Safari visar fel bredd på <TD>?

Tråden skapades och har fått 15 svar. Det senaste inlägget skrevs .
1

Gör jag något fel eller är det helt enkelt så att Safari renderar tabellbredder fel? När jag anger att bredden på en cell ska vara 200px och padding 3px blir totalbredden 200px istället för 206px. IE7 och Firefox ger mig 206px som förväntat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        table { table-layout: fixed; width: 100%; }
        td { padding: 3px; }
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 200px; background-color: #A5CDA9;">3px + 200px + 3px</td>
            <td style="background-color: #CCB259;">3px + resten + 3px</td>
        </tr>
    </table>
</body>
</html>

Resultatet ser ni i bilden nedan.

Hur kan jag få Safari att göra rätt utan att ha speciell kod för just Safari?

Ett känt problem. Det handlar om hur olika webbläsare hanterar DOM modellen.
Det är bara lära sig leva med det.

Det var ju tråkigt att höra. Jag hoppas de fixar till det snart. Annars brukar ju Safari vara duktig på att följa standarden för boxmodellen.

Tack för snabbt svar dock. Nu behöver jag inte lägga mer tid på det eftersom jag ändå inte kommer hitta en lösning...

  • Medlem
  • Mölndal
  • 2007-04-18 13:10

Mattias, det där får du gärna utveckla. Exakt hur lyder det kända problemet? Gör Safari fel på enbart <td>? Det påminner ju otäckt mycket om den kassa boxmodellen i IE quirks mode.

Sen har det väl inte med DOMen att göra. Är det inte en ren renderingsbugg?

  • Medlem
  • Lund
  • 2007-04-18 13:58

Det där låter märkligt. Det är ju IE som har problem med box model, inte Safari.

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Det är bara att testa koden. Den är ju väldigt enkel. Ta en skärmdump och kolla bredden i Photoshop.

Som du skriver, hugin, så brukar Safari hantera boxmodellen bra, men just för <td> verkar det bli fel.

  • Medlem
  • Lund
  • 2007-04-18 14:13

Hmm. Du har helt rätt i att något är skumt. Med <div> funkar det som det ska men med en tabell blir det konstigt.

Men jag är ingen tabell-expert, så jag kanske missar något. Måste det göras som en tabell?

  • Medlem
  • Lund
  • 2007-04-18 14:14

Tar man bort table-layout: fixed; så blir det rätt.

Jag var lite hastig... det har med uppritningen att göra. Inte DOM.
Jag kommer inte ihåg exakt men jag har för mig att alla webbläsare gör mer eller mindre fel.
Jag har förklaringen hemma i en bok om CSS.

hugin, i det här fallet är det faktiskt riktig tabelldata som presenteras. I vissa celler visas dock symboler eller previewer vilket gör att jag vill bestämma bredden.

Det var ju bra att veta att "table-layout: fixed;" ställer till det för Safari. Den är dock rätt bra eftersom man slipper ange cellbredd då man vill fördela återstående bredd jämnt mellan celler. Dessutom är det väl det enda sättet att rita ut tabeller som är standardiserat så att man vet vad man kan förvänta sig (http://www.w3.org/TR/CSS21/tables.html#width-layout).

  • Medlem
  • Mölndal
  • 2007-04-18 15:13

Min erfarenhet är att tabellen mår allra bäst av att helt själva få bestämma sin bredd. Men ibland måste man meckla med det, och då blir det tyvärr rätt knöligt.

  • Medlem
  • Lund
  • 2007-04-18 16:06

Hmm. Är det inte så att Safari faktiskt gör rätt i det här fallet? Att det med "table-layout: fixed;" faktiskt ska bli precis så som det blir? Det är iaf vad jag kan läsa mig till på länken Mattias nyss postade:

http://www.w3.org/TR/CSS21/tables.html#width-layout

  • Medlem
  • Piteå
  • 2007-04-23 01:40
Ursprungligen av hugin:

Hmm. Är det inte så att Safari faktiskt gör rätt i det här fallet? Att det med "table-layout: fixed;" faktiskt ska bli precis så som det blir? Det är iaf vad jag kan läsa mig till på länken Mattias nyss postade:

http://www.w3.org/TR/CSS21/tables.html#width-layout

Visst är det så. Skönt att mina tankar om safaris rendering åteställdes

  • Medlem
  • Lund
  • 2007-04-23 08:39
Ursprungligen av etna:

Visst är det så. Skönt att mina tankar om safaris rendering åteställdes

Ja precis. Men lite oroväckande att inte Firefox gör lika.

"With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing."

hugin och etna, när ni skriver att det är Safari som gör rätt, menar ni då att t.ex. ovanstående citat från tidigare nämnda länk innebär att man, för att bestämma den totala bredden på en cell, inte ska lägga på "cell padding" utanför cellens "width" (såsom tydligt beskrivs i the box model) utan istället anse den vara inkluderad i cellens "width" för just tabeller med "table-layout: fixed"?

Det låter ju lite tokigt att det skulle vara så. Dessutom är det ju som du skriver, hugin, så att Firefox (och IE7) hanterar det enligt box-model-principen.

  • Medlem
  • Lund
  • 2007-04-23 09:36

Mattias: Ungefär så, ja.

1
Bevaka tråden