[css+html] probleem met hoogte van <div> in IE

[mahi]

Ik ben zonet op een vreemd verschijnsel in Internet Explorer gestoten. Onder bepaalde condities doet de hoogte van een <div> element vreemd.

Een vereenvoudigd voorbeeld als demonstratie:

PHP:

<p>test</p>
<div style="border: 1px solid;"></div>
<p>test</p>

Dit geeft in zowel Internet Explorer als Opera en Mozilla dezelfde ouput:

code:

test
____________________________________________

test

De <div> is 0 pixels hoog, de border 1 pixel, zodat de <div> zichtbaar is als een lijn van 2 pixels hoog die van links naar rechts het scherm vult. Tot zover alles goed...

Nu wil ik een breedte opgeven voor de <div>. Zeg 50 pixels:

PHP:

<p>test</p>
<div style="width: 50px; border: 1px solid;"></div>
<p>test</p>

In Opera en Mozilla krijgen we hetzelfde resultaat als het voorgaande voorbeeld, afgezien van de lijn (de <div>) die nu maar 52 pixels lang is (50 pixels van de <div> + twee keer de 1 pixel border). Volledig zoals verwacht.

Maar... In Internet Explorer ziet het er nu totaal anders uit:

code:

test
 _________________________
|_________________________|

test

De <div> is nu niet langer een lijn, maar een blok. Dat wil zeggen dat de <div> een hoogte heeft gekregen, en dit zonder dit op te geven! Wanneer we zelf een hoogte opgeven om terug een hoogte van 0 pixels te krijgen;

PHP:

<p>test</p>
<div style="width: 50px; height: 0px; border: 1px solid;"></div>
<p>test</p>

Blijven we hetzelfde resultaat houden. De <div> wil niet meer *dun* worden.

Het lijkt alsof Internet Explorer plaats voorziet voor een lettertype, want als ik de font-size wijzig, dan verandert de hoogte van de <div> in IE. Er staat echter geen tekst in de <div> dus ik zie niet in waarom IE dat zou moeten doen...

Iemand die weet wat hier het probleem is en hoe ik dit oplos? De code hierboven is een eenvoudig voorbeeld, maar voor m'n site gebruik ik een vrij complexe structuur die het gebruik van <div> noodzakelijk maakt. In Opera en Mozilla rendert het zootje perfect. Alleen in Internet Explorer zit ik met een aantal <div> blokken die te *dik* zijn. Ik zou dat graag opgelost zien

[Willem]

Heb even zitten klooien en kom er 1,2,3 ook niet achter, maar;
Waarom zou je geen <hr> gebruiken bijvoorbeeld?

[Verwijderd]

Eigenlijk ken ik het alleen zoals MSIE ermee werkt: omlijning van tekst:

test

code:

<div style="width: 50px; border: 1px solid;">test</div>

Als je echt een specifieke lijninvulling wilt kun je beter gebruik maken van HR tags:

test

---

test

code:

<p>test<hr width=50 size=1 align="left" noshade>test

[Willem]

Vuile spuit 11

Maar dan zou ik dus alsnog de hr met CSS stylen en niet zo dirrrrrty

[crisp]

HTML:

<div style="width: 50px; border: 1px solid; font-size: 0px; line-height: 0px"></div>

edit: IE5.5 laat toch 1 pixel tussenruimte. Je zou natuurlijk ook alleen de top of bottom-border kunnen zetten

[ Voor 32% gewijzigd door crisp op 27-08-2003 10:30 ]

[Verwijderd]

willem169 schreef op 27 August 2003 @ 08:09:
Vuile spuit 11

Maar dan zou ik dus alsnog de hr met CSS stylen en niet zo dirrrrrty

HRs zijn bijna niet cross-browser met CSS te stylen. Dit werkt wel:

HTML:

<style type="text/css">
div.hrDIV {
    /* 
        hier de CSS zoals je die eigenlijk 
        op de HR zou willen doen
    */
}
div.hrDIV hr { display:none; }
</style>

<div class="hrDIV"><hr></div>

Heel vies, maar de enige practische oplossing voor zover ik weet.

[mahi]

Bedankt "crisp"! Dat was inderdaad de oplossing waarnaar ik zocht

Aan "willem169", "euss" en "Blues" die met <hr> werken: Dat is niet m'n bedoeling. Ik zei eerder al dat mijn voorbeeld om een vereenvoudigd voorbeeld gaat om het probleem goed te accentueren. In m'n eigenlijke layout moeten de desbetreffende <div> elementen wél een hoogte hebben, maar niet zo hoog als font-size toeschrijft. Met de oplossing van "crisp" kan ik de hoogte nauwkeurig controleren.

Anyway, bedankt iedereen voor jullie antwoorden! Ik ben weer eens wat wijzer geworden