Avatar billede bgo Nybegynder
03. november 2006 - 20:51 Der er 10 kommentarer og
1 løsning

forskel på rendering af linier og tabeller

En ting jeg ikke har bemærket før, muligvis fordi det har været ligegyldigt med de ting jeg tidligere har lavet, er at IE og FF åbenbart giver meget forskellige resultater mht. afsnitsmellemrum og cellehøjde. Det undrer mig lidt at der er SÅ stor forskel, på så simple og ligetil ting.

I følgende eksempel vil FF meget gerne smide en hulens masse plads over og under teksten i tabellen, mens IE komprimerer cellehøjden til lige præcis at kunne have teksten i cellerne. Det er det sidste der er ønskværdigt til det jeg laver nu.

Nedenunder laver IE langt større afstand mellem afsnittende end FF. Der synes jeg bedre om FF.

Det er faktisk møg hamrende irriterende med disse forskelle - og jeg forestiller mig at andre browsere giver flere forskelle. Jeg synes ikke lige at jeg kan gennemskue hvordan jeg justerer lige disse ting via CSS så det vises ens, så jeg ville meget gerne have hjælp til det.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><p>dfg dfg dfgd </p></td>
    <td><p>sdfsdf sdf sdf sdfdf sd </p></td>
    <td><p>sdf sdf sdf df dsf sd </p></td>
  </tr>
  <tr>
    <td><p>sdf sdf sdf sdfsdf d </p></td>
    <td><p>sdf sdf sdf sd fsd fsdf </p></td>
    <td><p>sdfd fsdf sdf sdf sdf </p></td>
  </tr>
  <tr>
    <td><p>df sdf sdfsdf sdf ds f </p></td>
    <td><p>sdf dsfsdfsdfsdf </p></td>
    <td><p>dsf sdf sdf sdf d </p></td>
  </tr>
</table>
<p>gdfgdfgdgd d gfgdfg df gdf gdfg dfg</p>
<p>dfg dfg dfg dfg d  </p>
</body>
</html>
Avatar billede jowii Nybegynder
03. november 2006 - 21:24 #1
Hvorfor bruger du p'er i td'er`?
Avatar billede bgo Nybegynder
03. november 2006 - 21:55 #2
Fordi der er tale om afsnit ;) Uanset om der kun er ét afsnit, eller måske blot én linje, så er det stadig afsnit, og derfor bør det omgives af p tags ;)
Avatar billede jowii Nybegynder
03. november 2006 - 22:02 #3
Hm. du kan bare bruge margin?

Angive margin-top på table-elementet:
table {
margin-top: [værdi];
}

og så frem deles, ved de andre ting.??
Avatar billede jowii Nybegynder
03. november 2006 - 22:03 #4
Er det inde i tabellen, vil jeg mene, at du også kan bruge padding. Top- left- right eller bottom.
Avatar billede bgo Nybegynder
04. november 2006 - 11:31 #5
Tja, det er som om at der er noget padding når det er i FF, men det burde der ikke være når jeg har sat cellpadding til 0 - og cellspacing er også 0 så der burde heller ikke være afstnd mellem cellerne (prøver om lidt at sætte nogle baggrundsfarver på, så jeg kan se om det er celle-størrelse eller celle-afstand).

Jeg har prøvet at sætte cellehøjden til 10, men det ændrer ikke noget
Avatar billede bgo Nybegynder
04. november 2006 - 11:41 #6
Det ER cellehøjden. Sjovt nok opfører FF sig som forventet når jeg blot bruger en spacer gif - men ikke når jeg blander spacer gif'en med tekst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="10" bgcolor="#CCCCCC"><p>dfg dfg dfgd </p></td>
    <td height="10" bgcolor="#999999"><p>sdfsdf sdf sdf sdfdf sd </p></td>
    <td height="10" bgcolor="#666666"><p>sdf sdf sdf df dsf sd </p></td>
  </tr>
  <tr>
    <td bgcolor="#666666"><p>sdf sdf sdf sdfsdf d </p></td>
    <td bgcolor="#CCCCCC"><p>sdf sdf sdf sd fsd fsdf </p></td>
    <td bgcolor="#999999"><p>sdfd fsdf sdf sdf sdf </p></td>
  </tr>
  <tr>
    <td bgcolor="#999999"><p>df sdf sdfsdf sdf ds f </p></td>
    <td bgcolor="#666666"><p>sdf dsfsdfsdfsdf </p></td>
    <td bgcolor="#CCCCCC"><p>dsf sdf sdf sdf d </p></td>
  </tr>
</table>
<p>gdfgdfgdgd d gfgdfg df gdf gdfg dfg</p>
<p>dfg dfg dfg dfg d</p>
<p>gdgdgdfg dgg dfg dfgdg<br />
  dfg dfg dfg dfg dg</p>
<table width="100%" border="0" cellspacing="0" cellpadding="1px">
  <tr>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
    <td height="5" bgcolor="#999999"><img src="images/spacer.gif" width="5" height="5" /></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>
Avatar billede bgo Nybegynder
04. november 2006 - 11:48 #7
hmm. ser ud til at den eneste måde at undgå det på er ved ikke at bruge paragraph tags. Kan bruges som nødløsning til dette projekt, selvom det næppe kan siges at være optimalt - hvorfor jeg stadig leder efter en løsning ;)
Avatar billede jowii Nybegynder
04. november 2006 - 16:45 #8
Eller sætte margin/padding på p-elementerne?
Avatar billede bgo Nybegynder
06. november 2006 - 22:25 #9
ja, jeg ente også med at sætte margin-top:0px det ene sted og margin-top:0px;margin-bottom:0px det andet sted. Nu er der stort set ikke nogen forskel på IE og FF.

Nå, selvom jeg selv fandt frem til det, hjalp du mig, indirekte, på sporet, så smid et svar, og der er point :)
Avatar billede jowii Nybegynder
07. november 2006 - 19:02 #10
Nej behold du dem selv.
Avatar billede bgo Nybegynder
07. november 2006 - 22:36 #11
bare iorden :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester