Dumma CSS...

10 svar · 928 visningar · startad av Darren 30 jan. 2003

DarrenMedlem sedan dec. 2002789 inlägg

Frågan30 jan. 2003 13:53#1

Har problem med att få en tabell att centreras med hjälp av CSS. Koden ser ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test sida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {margin: 0px; padding: 0px; background-color: #ffffff}
table.first {width: 100%; height: 100%; border: 0px;}
td.first {text-align: center; vertical-align: middle;}
table.second {width: 750px; height: 450px;, border: 0px;}
td.second {text-align: left; vertical-align: top; background-color: #ff0000;}
</style>

</head>

<body>
<table cellpadding="0" cellspacing="0" class="first">
  <tr>
    <td class="first">

<!--  denna tabellen skall centreras enligt CSS men det gör den inte -->	
    <table cellspacing="0" cellpadding="0" class="second">
      <tr>
        <td class="second">&nbsp;</td>
      </tr>
    </table>

    </td>
  </tr>
</table>
</body>
</html>

Någon som har en lösning på problemet?

MatteMedlem sedan aug. 20002 975 inlägg

30 jan. 2003 14:03#2

Det har smugit sig in ett litet kommatecken som inte ska vara där för table.second. Sedan för Mozilla måste du lägga till margin:auto

table.second {width: 750px; height: 450px; border: 0px; margin:auto;}

DarrenMedlem sedan dec. 2002789 inlägg

30 jan. 2003 14:08#3

Tack Matte. Det fungerar nu, men vad har margin: auto att göra med placeringen egentligen!?

MatteMedlem sedan aug. 20002 975 inlägg

30 jan. 2003 16:12#4

För att centrera i Mozilla får du använda margin:auto.

Tror dessutom att detta är rätta sättet enligt standarden, men det ska jag låta vara osagt.

jarvkloMedlem sedan juli 20013 378 inlägg

30 jan. 2003 20:23#5

vad har margin: auto att göra med placeringen egentligen!?

Det du råkade snubbla på är en så kallad "överspecificering" av tabellens bredd där webbläsaren försöker göra det bästa av situationen enligt regler i "standard".
Så här ligger det (mycket grovt ;) ) till:

Din tabell "second" är ett block som skall ligga i ett block som är "jättebrett".

Tabellen second:s bredd är:

marginal + border + width + border + marginal

Eftersom du till att börja med inte valt några värden på "margin:" för tabellen "second" är dessa värden alltså antagligen förinställda till någon eller några pixlar. (webbläsarens grundinställningar eller arv från något omgivande block - eller kanske "0" från body ? ).

Detta innebär att du får en tabell som har alla värden fasta, men där värdena sammanslagna inte räcker till för att fylla ut hela vidden av det omgivande blocket (tabellcellen td.first).

Enligt CSS2-specen (se http://www.w3.org/TR/REC-CSS2/visudet.html#q6) skall då webbläsaren automatiskt göra om någon av marginalerna (höger rekommenderas i specen för "västerländsk" text, vänster för "österländsk" - dvs höger-till-vänster text) till "auto" så att blocket (tabellen "second") kan fylla ut hela bredden på omgivande block (td.first)
Du får alltså en situation som är (ungefär)

fast värde  + fast värde + fast värde + fast värde + "det som är kvar till omgivande blocks kant"

som skapas av webbläsaren som följer specen.

auto-värdet är värdet "lagom fördelning av vad som är kvar" enligt samma avsnitt i specen.
Iom att du ställer in "margin:auto" på "second" så blir *alla* marginaler auto, och då säger specen att "det som är kvar" skall fördelas lika mellan de mått som är "auto", dvs du får:
kod]"Auto" + fast värde + fast värde + fast värde+ "auto"
vilket webbläsaren gör om till:

"det som är över genom 2" + fast värde + fast värde + fast värde + "det som är över genom 2"

vilket innebär att paketet "border + width + border" hamnar i mitten på sidan...

MSIE har (som många upptäckt) en del hyss för sig när det gäller förinställda värden för td som påverkar arv av vissa CSS-värden... Speciellt när man kör den i "Quirks" mode, vilket du gör iom valet av DOCTYPE...
Det är möjligt att det är något sådant som gör att det (felaktigt ;) ) funkar i MSIE utan att man behöver göra speciellt mycket, medans man måste vara medveten om att man måste lägga på margin:auto i NN/Moz ;)

Standarder är skoj - när man kommit in en bit i dem :e

DarrenMedlem sedan dec. 2002789 inlägg

30 jan. 2003 20:40#6

Att du orkar skriva så mycket.

Nu vet jag iaf varför det skall vara så. Tack. :)

jarvkloMedlem sedan juli 20013 378 inlägg

30 jan. 2003 20:55#7

Det blir ofta så här mycket text lite "i förbifarten" när någon här på wF råkar fråga om ett ämne som jag ändå håller på att bearbeta en artikel för till http://xhtml.nu/ ...

Detta med block, dimensioner och positioneringar råkade ligga i "pipeline" :e

DarrenMedlem sedan dec. 2002789 inlägg

30 jan. 2003 22:08#8

Matte skrev:

table.second {width: 750px; height: 450px; border: 0px; margin:auto;}

Lösningen jag fick av Matte fungerade jättebra med Opera 7 (beta 2). Nu uppdaterade jag till Opera 7 final och då fungerar det inte längre.

Tabellen blir centrerad horisontellt men placeras i top vertikalt...

Någon som vet vad felet är nu?

DarrenMedlem sedan dec. 2002789 inlägg

31 jan. 2003 10:31#9

Löste det med en annan DOC_TYPE. Dessutom var jag tvungen att sätta style på både html- och body-taggen (style="height: 100%;").

DOC_TYPE jag använder är:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Det som är konstigt här är att om jag byter 4.01//EN i raden ovan till 4.01//SE så fungerar det inte alls. Hela sidan blir förstörd... Mysko!

jarvkloMedlem sedan juli 20013 378 inlägg

31 jan. 2003 11:52#10

Din DOCTYPE är "korrekt" enligt W3C, vilket ger dig "standards" mode i t.ex. MSIE och NN/Moz.

Om du ändrar 4.01//EN till 4.01//SE, så gör du den "felaktig", och då hamnar du i "quirks" mode - och den är - eh - annorlunda ;).

Bortsett från att språkkoden för svenska är SV och landskoden är SE (och att du alltså borde ha gissat på SV ;) ) så betyder "//EN" just där att HTML-taggarna är uttryckta på engelska (table, form, head osv alltså ;) )...

Språkkoden (sv) ställer du in med t.ex.

<HTML LANG="SV">

eller

<META HTTP-EQUIV="Content-language" CONTENT="SV">

DarrenMedlem sedan dec. 2002789 inlägg

31 jan. 2003 11:58#11

Just det... Att jag inte tänkte på det tidigare med tanke på att det har disskuterats tidigare här på wF.

Som tur är så är jarvklo vaken igen och kan rätta till mina misstag... :)