Varför blir <div>en mindre i firefox & safari men bra i IE

jonas18zMedlem sedan okt. 200445 inlägg

Frågan6 nov. 2004 16:42#1

jag undrar varför det gråa blir litet i firefox och stort i IE?
vad gör jag för fel? det validerar i xhtml 1.0 strict.

kolla filen.


<div style="position: absolute; top: 18px; left: 18px; height: 200px; width: 438px; border: 10px solid white; background: #b3b3b3; ">
 
 <div style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px ;  "><strong>Test001</strong></div>
  <div style="background: blue; line-height: 0; font-size: 0; height: 4px "></div>

 <div style="margin: 10px;">
   <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velet esse molestie
consequat, vel vel illum dolore eu feugital facilisis at vero eros et 
accumsan et iusto odio ignissim quieum iriure dolor in hendrerit in 
vulputate velet esse.
<br/> Velet esse molestie consequat, vel vel illum 
dolore.Eu feugital facilisis at vero eros et accumsan et iusto odio 
ignissim. Iriure dolor in hendrerit in vulputate velet esse molestie 
consequat, vel vel illum dolore eu feugital facilisis at vero eros et 
accumsan et iusto odio ignissim quieum iriure dolor in hendrerit in 
vulputate velet esse.
<br/>In hendrerit in vulputate velet esse molestie consequat, 
vel vel illum dolore eu feugital facilisis at vero eros et accumsan et iusto 
odio ignissim quieum iriure dolor in hendrerit in vulputate velet esse. Velet 
esse molestie consequat, vel vel illum Molestie consequat, vel vel illum 
dolore eu feugital facilisis at vero eros et accumsan et iusto odio ignissim 
quieum iriure dolor in hendrerit in vulputate
 </p>
 
  </div>
</div>

dectgapMedlem sedan sep. 20021 655 inlägg

6 nov. 2004 16:55#2

Du har skrivit att det gråa området ska vara 200px högt - därför blir det inte högre än 200px i Firefox och Safari.

Om du menar att det minst ska vara 200px högt kan du använda min-height. Dock förstår sig inte IE på min-height, men tolkar height fel, vilket vi kan dra nytta av:

<style type="text/css">
#foo {
   position: absolute;
   top: 18px;
   left: 18px;
   height: 200px;
   width: 438px;
   border: 10px solid white;
   background: #b3b3b3;
}

html>body #foo {
   height: auto;
   min-height: 200px;
}
</style>

...

<div id="foo">

Byt gärna ut ditt blåa, tomma div-element mot ett hr-element istället.