Centrering vertikalt/horisontellt (XHTML Strict)

4 svar · 569 visningar · startad av LBC 7 juni 2003

LBCMedlem sedan jan. 2003146 inlägg

Frågan7 juni 2003 11:46#1

Hejsan!

Sitter och försöker få följande kodsnutt centrerad vertikalt och horisontellt. Som det är nu hamnar tabellinnehållet mitt på sidan i IE, men NN envisas med att lägga texten centrerat på toppen av sidan. Vad har jag missat, eller hur ska jag få texten mitt på sidan i både IE och NN utan att XHTML Strict-validatorn ska gnälla?

<div style="text-align:center">

<table style="width: 200px; margin: auto; height: 100%">
<tr valign="middle">
<td style="width: 200px; text-align: center">

Denna text ska centreras vertikalt och horisontellt.

</td>
</tr>
</table>

</div>

jarvkloMedlem sedan juli 20013 378 inlägg

7 juni 2003 19:52#2

Det där beror på vilken <!DOCTYPE du kör med och hur webbläsarna i sin tur tolkar denna ...
I vissa lägen blir 100% inte vad man tror (varken i HTML eller xhtml ;) ) pga "kända fenomen"

"Patentlösning":
Kör med

<style type="text/css">
<!--
body, html {height:100%;margin:0;padding:0;}
-->
</style>

någonstans i din <head>...

Förklaringar hittar du om du nystar lite i t.ex. trådarna http://www.webforum.nu/showthread.php?s=&threadid=77151
eller http://www.webforum.nu/showthread.php?s=&threadid=77213

LBCMedlem sedan jan. 2003146 inlägg

8 juni 2003 09:27#3

Jarvklo: tackar för svaret! Jag har testat din variant, och det ser bra ut i både IE6 samt NN7. Sidan är tänkt att fungera i IE5.x samt NN6.x, men har inte hunnit kolla hur det ser ut i dessa.

En liten fundering: höjdcentreringen i NN löste sig först när jag tog bort <div style="text-align:center"> ovanför själva tabellen. Denna kod har jag för mig behövs då IE5.0 läser koden lite tokigt (kan det varit du som skrev det ;) )... har du någon lösning på att kunna använda div-taggen runt tabellen utan att det buggar i NN? NN lägger alltså tabellen överst i sidan istället för mitten om jag lägger omsluter tabellen med en div-tag.

...och när jag ändå har dig "i tråden": är det fullt möjligt att koda sidor i XHTML Strict som fungerar i äldre webläsare (ex IE4, NN4), eller är Transitional att föredra?

Bifogar DOCTYPE samt koden som löste problemet.

<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv"> 
<head>

<title>---</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache" /> 
<meta http-equiv="Pragma" content="no-cache" /> 

<style type="text/css">
<!--
body, html {height:100%;margin:0;padding:0;}
-->
</style>

</head>

<body>
<table style="width: 100%; margin: auto; height: 100%">
<tr valign="middle">
<td style="width: 100%; text-align: center">
INNEHÅLL
</td>
</tr>
</table>
</body>
</html>

Stort tack!

EDIT: Kom kanske på lösningen. Borde <div>-taggen runt tabellen kunna ersättas med en text-align: center i body ? :)

jarvkloMedlem sedan juli 20013 378 inlägg

8 juni 2003 19:13#4

Hmm...

Tänk såhär...
Du jobbar med "block" (html, body, table och div är alla i grund och botten block om du inte anger något annat)
Varje block har en höjd och en bredd.

Om du inte anger någon höjd, används "höjden på det som ligger inom blocket" per default (värdet "auto" har jag för mig utan att ha kollat upp det ;) ).

height:100% på ett block som ligger inut ett annat block blir alltså 100% av höjden på det omgivande blocket...
Exempel:

<div style="height:200px">
  <div style="height:100%">
    Hur hög blir jag?
  </div>
</div>

Här är det inget problem... 200 pixlars höjd verkar vettigt... Men hur blir det om man istället gör såhär då?

<div>
  <div style="height:100%">
    Hur hög blir jag?
  </div>
</div>

Hmm... 100% av något som inte är explicit definierat... Tydligen tolkar olika webbläsare detta olika som du märkt...
Och vad jag förstår verkar det vara detta du snubblat på...
Lösningen borde vara att ha

<div style="height:100%;text-align:center">

om din <table>...

är det fullt möjligt att koda sidor i XHTML Strict som fungerar i äldre webläsare (ex IE4, NN4)

Jupp - men du får leva med att dessa webbläsare har ett minst sagt "fläckvis" stöd för CSS, och att användningen av Strict tar bort en del av alternativen (<font>-taggar, bgcolor-attribut osv)

eller är Transitional att föredra?

Hmm...
Är det verkligen någon större skillnad förutom att du kan ta till <font>-taggar, bgcolor-attribut osv för att arbeta dig runt det "fläckvisa" stödet för CSS i NN4 och IE4 ?

Jag tycker nog att det är ett större beslut att bestämma sig för att man vill köra med enbart CSS för utseendet än att välja vilken uppsättning taggar och attribut man begränsar sig till via Doctype...

För mig är det till syvende och sist en smaksak.
Jag kör antingen det ena eller det andra beroende på humör, kravbild och ambitionsgrad... ;)
Även om jag brukar predika en del för att det inte är fel att lära sig köra med "Strict"... :e

LBCMedlem sedan jan. 2003146 inlägg

9 juni 2003 08:08#5

Tackar för svaret. Maler vidare med Strict :)