table-height med XHTML

5 svar · 307 visningar · startad av NoiseMaker 4 juni 2003

NoiseMakerMedlem sedan sep. 2001171 inlägg

Frågan4 juni 2003 17:04#1

Tjenare!

Har ett delikat problem. I HTML är det mer än vanligt att man har en tabell med tre rader i där den översta är ett sidhuvud, den mellersta är själva sidinnehållet och den nedersta är sidfoten.
SIdfoten börjar alltid där den mellarsta delen slutar förutsatt att det är lägre än sifotens egen höjd över webbläsarfönstrets nedre kant.

Detta vill jag göra med XHTML men det funkar inte för mig. För att förenkla lite har jag skapat ett exempel.
Observera att mittendelen INTE har fått en height tilldelat eftersom tanken är att den alltid skall dras ut så tabellen blir 100%.
Exempelt fungerar alltså INTE men jag anser att det borde göra det.

Alla ideer är ytters välkommna!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>A table problem</title>

HTML,
BODY {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:11px;
line-height:16px;
color: #333333;
font-weight:normal;
width:100%;
height:100%;
margin:0px;
padding:0px;
}

.SuperTable {
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
border-width:0px;
border-spacing:0px;
}
</style>
</head>
<body>

\<table class="SuperTable"\>
	
	\<tr\>\<td bgcolor="#CCCCCC" height="20"\>Header Area\</td\>
	\</tr\>
	
	\<tr\>\<td bgcolor="#FFFFFF"\>Body Area\</td\>
	\</tr\>
	
	\<tr\>\<td bgcolor="#CCCCCC" height="20"\>Footer Area\</td\>
	\</tr\>

\</table\>

</body>
</html>

jarvkloMedlem sedan juli 20013 378 inlägg

4 juni 2003 18:47#2

Hmm...
Koden funkar klockrent i Mozilla (även om height="20" inte är korrekt xhtml och att du bör använda t.ex. style="height:20px" istället om du vill validera - men det är egentligen ovidkommande detaljer för det här problemet... ;) )

Bugg i MSIE kanske?

Vara hur det månde med det - om du lägger till ett

<?xml version="1.0" encoding="ISO-8859-1"?>

överst i koden så funkar den även i MSIE6...

Be mig inte förklara *exakt* varför - men genom att göra så, så slänger du över MSIE6 i "Quirks mode" och i just MSIE6 verkar just det där med tabellraders inbördes höjder fungera bättre i "Quirks" än i "Standards mode". :OO

NoiseMakerMedlem sedan sep. 2001171 inlägg

4 juni 2003 19:23#3

jedrans anamma också! Då e det alltså IE som är kass i detta fallet. Hmm.. det ställer det faktiskt till en del problem.. =(

jag tror jag hoppar det där med Quirk-mode (vet ej riktigt vad det e ens). Sidan måste funka för "alla".

Je je.. får la skita i XHTML eller hitta en annan layout =(

tack

WebbanMedlem sedan maj 200330 inlägg

4 juni 2003 20:19#4

Men på Macen blir det snyggt även i IE. Har testat en handfull webbläsare och det ser ut som du vill i alla.

... dock inte i Opera, där blir header och footer ca 200px.

jarvkloMedlem sedan juli 20013 378 inlägg

4 juni 2003 20:36#5

"Quirks mode" är inte automatiskt farligt - så häng inte upp dig på min kommentar om det - Att slänga in <?xml .. ?> - taggen löser ju problemet - eller hur ? ;)

Gör ett provskott, testa det både i Mozilla och MSIE6... Ser det acceptabelt ut i bägge borde det se acceptabelt ut i fler webbläsare... - och du kan ju alltid fråga folk här på wF (t.ex. i "Kolla min hemsida") om de kan hjälpa dig att testa sidan på olika plattformar m.m. när du är klar - webban har ju t.ex. redan gjort det spontant här och nu, eller hur? ;)

Konsten att lära sig något nytt är att inte ge upp bara för att vägen till det nya börjar med en uppförsbacke ;)

jarvkloMedlem sedan juli 20013 378 inlägg

5 juni 2003 06:00#6

Kom förresten på att det inte är säkert att du löser problemet bara för att du går tillbaka till HTML4...

Gjorde om din kod till HTML 4.01 med den <!DOCTYPE som skall användas (åtminstånde om man vill koda slaviskt enligt W3C ;) :

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

<title>A table problem</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<style type="text/css" media="screen">

HTML,
BODY {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:11px;
line-height:16px;
color: #333333;
font-weight:normal;
width:100%;
height:100%;
margin:0px;
padding:0px;
}

.SuperTable {
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
border-width:0px;
border-spacing:0px;
}
</style>
</head>
<body>

<table class="SuperTable">

<tr><td bgcolor="#CCCCCC" style="height:20px">Header Area</td>
</tr>

<tr><td bgcolor="#FFFFFF">Body Area</td>
</tr>

<tr><td bgcolor="#CCCCCC" style="height:20px">Footer Area</td>
</tr>

</table>

</body>
</html>

Kör den och du skall se att det blir exakt samma fel på tabellen i MSIE6 med den koden.

Men i HTML är lösningen att göra avsteg från "standard" och välja en annan <!DOCTYPE-tagg... t.ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

vilket kanske är lite förvånande... att lägga till <?xml...?>-taggen i xhtml-lösningen av prblemet är ju fortfarande helt korrekt enligt "standard" ;)

Även i HTML4 är det alltså frågan om att testa och jämföra mellan olika webbläsare för att se om man får acceptabelt resultat - det som är nytt för många av oss är väl snarare kanske att valet av <DOCTYPE faktiskt kan så stor påverkan på hur sidan visas... ;)