Avatar billede verakso Nybegynder
10. juni 2009 - 15:14 Der er 5 kommentarer og
2 løsninger

Problem med <tr> og white space

Jeg har en række sider jeg er i færd med at skrive om, og det skal ikke være en diskussion af hvilken HTML standard der bruges - dem har der være rigeligt af på Eksperten, men koden ser således ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Testpage</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <meta http-equiv="Expires" content="Fri, Jun 12 1981 08:20:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store" />
</head>
<body style="margin:0px;">
<table style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
    <tr style="vertical-align:bottom; padding: 0; border-spacing: 0">
        <td style="padding: 0;"><img src="images/banner_top_left.gif" style="border: none 0px; width:20px; height:60px; padding: 0;" alt="" /></td>
        <td style="width:100%; padding: 0;"><img src="images/top_fill.gif" style="border: none 0px; width:100%; height:60px; padding: 0;" alt="" /></td>
        <td style="padding: 0;"><img src="images/banner_top_logo.gif" style="border: none 0px; width:75px; height:60px; padding: 0;" alt="" /></td>
        <td style="padding: 0;"><img src="images/banner_top_right.gif" style="border: none 0px; width:20px; height:60px; padding: 0;" alt="" /></td>
    </tr>
    <tr style="background-color:#e9e5df; height:14px; padding: 0; border-spacing: 0;">

        <td style="padding: 0;"> </td>
        <td style="padding: 0;" colspan="2" align="right"><span class="txt">Du er logget på som Gæst  </span></td>
        <td style="padding: 0;"> </td>
    </tr>
</table>
</body>
</html>

Problemet er, at der kommer "luft" i den første row, de valgte billeder går ikke helt til bund, så der kommer en "streg" mellem grafikken, og den farvede række.

Jeg er som sådan ikke interesseret i kun at løse problemet, men mere også forstå, hvorfor der denne ændrede fortolkning af tables.
For "problemet" kan løses meget simpelt ved at bruge
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
i stedet....
Avatar billede keysersoze Ekspert
10. juni 2009 - 15:49 #1
Jeg kan desværre ikke give den eksakte forklaring men umiddelbart ligger en del af forskellen i om du arbejder med block eller inline elementer.

Dette betyder også at der er flere forskellige muligheder for en løsning - sæt fx display: block på dit billed eller pak det ind i en div.

Som udgangspunkt bør du også have enheder på dine styles - dvs fx padding: 0px og ikke bare 0.
Avatar billede verakso Nybegynder
10. juni 2009 - 16:08 #2
Interessant, display:block på alle img styles, har den ønskede og synlige effekt.

Det må jeg helt klart Google på, for der må være en dybere mening med dette.
Avatar billede keysersoze Ekspert
10. juni 2009 - 17:52 #3
Hvis du finder et svar må du i hvert fald gerne sige til :)
Avatar billede zips Juniormester
10. juni 2009 - 18:24 #4
Info omkring images i firefox
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Her lidt fra webmasterworld i sidste indlæg
http://www.webmasterworld.com/css/3444785.htm
Avatar billede verakso Nybegynder
12. juni 2009 - 13:02 #5
@zips det var to meget gode forklaringer, specielt den første fra fra mozilla.

Og ganske logisk når man altså har læst artiklen.

Det skal blive spændende at se hvad er kommer til at ske med CSS3.

Smider I alle lige et svar, så jeg kan komme af med nogle points?
Avatar billede zips Juniormester
12. juni 2009 - 23:22 #6
Her er et svar :-)
Avatar billede keysersoze Ekspert
14. juni 2009 - 11:48 #7
svar :)
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