[HTML] td hoogte problemen met doctype loose.dtd - Softwareontwikkeling

woensdag 27 april 2005 12:04

Acties:

Verwijderd

Topicstarter

Ik heb de volgende html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
}
-->
</style></head>

<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFFFFF" height="20">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#333333">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Als ik geen doctype opgeef, of die html 4.1 doctype, dan rendered IE de pagina zoals ik zou willen. De bovenste TD heeft een hoogte van 20 pixels, en de onderste TD vult de overige ruimte op van de 100% die ik in de table heb opgegeven.

Welnu, hoe krijg ik dit voor elkaar met doctype loose? Liefst zonder inline style properties, want ik meen dat ik er ook moet komen als ik alle elementen (td, tr, table etc) goed definieer in de style tags bij het head gedeelte van de pagina.

[ Voor 17% gewijzigd door Verwijderd op 27-04-2005 12:05 ]

woensdag 27 april 2005 12:18

Acties:

Sappie

De Parasitaire Capaciteit!

Je hebt dan waarschijnlijk, bij het opgeven van die 'html 4.1 doctype', een invalide / onvolledig DTD opgegeven. Daardoor rendert IE6 de pagina in Quirks mode. De DTD zoals je die nu gedeclareerd hebt (HTML 4.01 Transitional) is wél valide en volledig. Daardoor rendert IE6 de pagina in standards mode.

Wat je kunt doen is het plaatsen van een html comment boven de DTD om IE6 toch in Quirksmode te dwingen. Wat je verder doet met de verschillen in het box-model tussen IE6 en bijv FF zul je even uit moeten zoeken.

[ Voor 7% gewijzigd door Sappie op 27-04-2005 12:27 ]

Specs | Audioscrobbler

woensdag 27 april 2005 12:20

Acties:

TwoR

Gekleurde stippen

<td bgcolor="#FFFFFF" height="20">

Height is niet een officiele tag. IE slikt het wel maar als je het doctype erbij zet dan werkt dat niet meer. Je zal dan toch met een style moeten werken

woensdag 27 april 2005 12:33

Acties:

Sappie

De Parasitaire Capaciteit!

TwoR schreef op woensdag 27 april 2005 @ 12:20:
<td bgcolor="#FFFFFF" height="20">

Height is niet een officiele tag. IE slikt het wel maar als je het doctype erbij zet dan werkt dat niet meer. Je zal dan toch met een style moeten werken

Het height attribuut is "proprietary to Netscape or Internet Explorer". Ook is het volgens mij, maar dat weet ik zo uit mn hoofd niet zeker, pas vanaf HTML 4.01 STRICT deprecated. Het werkt dus, in tegenstelling tot wat jij beweert, nog steeds in oa IE. Wel is het netter / beter om voor dit soort dingen (hieronder vallen ook de cellpadding, border, e.a.. attributen in het table element en eigenlijk alle attributen die iets aan de opmaak veranderen) CSS te gebruiken.

[ Voor 20% gewijzigd door Sappie op 27-04-2005 12:36 ]

Specs | Audioscrobbler

woensdag 27 april 2005 12:59

Acties:

Verwijderd

Topicstarter

Anyway, deze code heeft dus ook niet het gewenste effect:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
}
-->
</style></head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="height:100%">
  <tr>
    <td bgcolor="#FFFFFF" style="height:20px">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#333333">&nbsp;</td>
  </tr>
</table>
</body>
</html>

woensdag 27 april 2005 13:42

Acties:

Sappie

De Parasitaire Capaciteit!

lees je mijn replies ook?

Specs | Audioscrobbler

woensdag 27 april 2005 14:19

Acties:

Verwijderd

Topicstarter

lees je mijn replies ook

Lezen wel, maar ik begrijp niet helemaal wat je wilt zeggen...

Als ik het goed begrijp, werkt het hoogte attribuut dus nog steeds in IE en Netscape in loose mode, en niet meer in strict mode.

Ok, ik gebruik dus loose, maar IE doet niet wat ik wil: de bovenste cel een hoogte geven van 20 pixels.

Waarom niet? En hoe kan ik toch de bovenste cel een fixed hoogte geven van 20 pixels, terwijl de onderste cel automatisch de rest van de ruimte tot zijn beschikking krijgt, zoals dat zou gebeuren in quircksmode?

woensdag 27 april 2005 14:43

Acties:

Sappie

De Parasitaire Capaciteit!

Afhankelijk van het doctype (en de volledigheid daarvan) bepaalt de browser in welke mode hij gaat renderen. Bij een volledig HTML 4.01 doctype (daarbij maakt het niet uit of het transitional (loose) of strict is) zal IE6 in standards mode renderen.

Helaas is het afaik zo dat in standardsmode IE's table model niet overeen komt met FF's table model. Wil je dat wel laten overeenkomen dan dwing je IE in quirksmode door een html comment boven de DTD te plaatsen. zo dus:

code:

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

Een nare bijkomstigheid is dat het box-model dan niet meer overeenkomt. Je zou het ook op kunnen lossen mbv een javascriptje, zodat je nog wel over het goede box-model beschikt.

Verder zou je kunnen kijken naar een oplossing zonder behulp van tabellen. De layout die jij in dit topic wil bewerkstelligen is iig goed mogelijk daarmee, echter weet ik de verder context van je stukje html natuurlijk niet.

Edit:

Verwijderd schreef op woensdag 27 april 2005 @ 14:19:Als ik het goed begrijp, werkt het hoogte attribuut dus nog steeds in IE en Netscape in loose mode, en niet meer in strict mode.

Het hoogte attribuut werkt nog steeds in zowel IE als netscape alleen is het gebruik ervan in HTML 4.01 Strict deprecated, wat zoveel wil zeggen als toegestaan maar niet aanbevolen.

[ Voor 68% gewijzigd door Sappie op 27-04-2005 14:51 ]

Specs | Audioscrobbler

woensdag 27 april 2005 16:07

Acties:

crisp

Devver

Pixelated

Verder is height op een table-cell een 'recommended cell height'; een useragent kan en mag (en zal vaak ook) het anders renderen.

Intentionally left blank