I was testing some layout ideas using css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> .s1 { position:absolute; left:20%; top:80%; width:60%; height:20%; z-index:1; background-color: #FF9933; layer-background-color: #FF9933; border: 1px none #000000; } .s2 { position:absolute; left:20%; top:0%; width:60%; height:20%; z-index:1; background-color: #FF9999; layer-background-color: #FF9999; border: 1px none #000000; } .s3 { position:absolute; width:20%; height:60%; z-index:1; left: 0%; top: 20%; background-color: #99CC33; layer-background-color: #99CC33; border: 1px none #000000; } .s4 { position:absolute; width:20%; height:60%; z-index:1; left: 80%; top: 20%; background-color: #99CC33; layer-background-color: #99CC33; border: 1px none #000000; } </style> <title>Test Document</title> </head> <body> <div id="Layer1" class="s1"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88" border="0"></a> </p> </div> <div id="Layer2" class="s2"> </div> <div id="Layer3" class="s3"> </div> <div id="Layer4" class="s4"> </div> </body> </html>
if you check that on FireFox or Opera it's exactly what I'm trying to do (I even validated the code at W3C), but I can't manage to make it render correctly on Internet Explorer (What a surprise, isn't it?)
it seems like IE doesn't understand the percent values for the Height attribute, is it a bug? there's some kind of work around?
Thanks in advance!
(O.o) Height % values on IE? (O.o)
NightWalker at the moment there is nothing for the percentage values to reference; IE does not know what the percentage is of (20% of what ?)
Add:
html, body {height:100%; padding:0; margin:0;}
to your rules and IE6 should play along.
Hugo.
(O.o) Height % values on IE? (O.o)
Hey! it worked! thanks!
It makes sence "the need" for a reference, but is it the way it should work? I mean which user agent is not rendering it properly IE or FF & O?
(O.o) Height % values on IE? (O.o)
As a rule of thumb one would say that mozi/FF renders most closely to the specs, but the height property in CSS is a confused mess, you do always need to define the height of the body element normally, for Mozi/FF you would use min-height and height auto to prevent unwanted overflow of contents as height:100% will fix the height and prevent container expansion, whereas height:100% in IE will act as min-height .
I'm not sure in this instance where FF gets it height reference from except that without an explicit reference it would take the value from it's parent container and I guess in this instance the assumption would be made that the viewport or body must be 100%, it would in fact make sense to me that the viewport( html element) must be 100% as it is the top level element, how can it not be 100%, could it be 50% of something ? what would be it's reference.
Hugo.
(O.o) Height % values on IE? (O.o)
I enlarged the div sizes, on FF renders perfectly, but on IE the lower div has a line over it, and on Opera happens the same plus right div is also wrong
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> html, body { height:100%; padding:0; margin:0; } .s1 { position:absolute; width:100%; height:20%; background-color: #FF9999; left: 0%; top: 0%; } .s2 { position:absolute; width:20%; height:60%; left: 0%; top: 20%; background-color: #99CC33; } .s3 { position:absolute; width:60%; height:60%; left: 20%; top: 20%; background-color: #99CCCC; } .s4 { position:absolute; width:20%; height:60%; left: 80%; top: 20%; background-color: #9999CC; } .s5 { position:absolute; left:0%; top:80%; width:100%; height:20%; background-color: #FF9933; } </style> <title>Test Document</title> </head> <body> <div id="Layer1" class="s1"> </div> <div id="Layer2" class="s2"> </div> <div id="Layer3" class="s3"> </div> <div id="Layer4" class="s4"> </div> <div id="Layer5" class="s5"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" /></a> <a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> </p> <p> <a href="http://www.w3.org/Style/CSS/Buttons/"><img src="http://www.w3.org/Style/CSS/Buttons/mwcts" alt="CSS" /></a> <a href="Overview.rss"><img src="http://www.w3.org/RDF/icons/rdf_flyer.24" alt="RSS feed" title="RSS feed of the "What's new" section" /></a> </p> </div> </body> </html>
Does it have to do with the min heigh you were talking about or is something else? :?
(O.o) Height % values on IE? (O.o)
Are you just experimenting, or creating a layout? If creating a layout you may want to scrap everything and start over without absolute positioning.
(O.o) Height % values on IE? (O.o)
Are you just experimenting, or creating a layout? If creating a layout you may want to scrap everything and start over without absolute positioning.

(O.o) Height % values on IE? (O.o)
It's too rigid and will fall apart. It's best to use the natural document flow.
(O.o) Height % values on IE? (O.o)
Get it all neat and tidy, then use the browser to increase the font size a few times.
(O.o) Height % values on IE? (O.o)
Thanks for the replies and the help guys! I'll continue my experiments