Tue, 2005-06-28 06:19
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!
Tue, 2005-06-28 06:46
#1
(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.
Tue, 2005-06-28 06:59
#2
(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?
Tue, 2005-06-28 07:56
#3
(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.
Wed, 2005-06-29 01:38
#4
(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? :?
Wed, 2005-06-29 01:48
#5
(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.
Wed, 2005-06-29 01:54
#6
(O.o) Height % values on IE? (O.o)
wolfcry911 wrote:
I'm just experimenting Are you just experimenting, or creating a layout? If creating a layout you may want to scrap everything and start over without absolute positioning.
, but what's so wrong about absolute positioning anyway? :?
Wed, 2005-06-29 02:30
#7
(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.
Wed, 2005-06-29 09:42
#8
(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.
Thu, 2005-06-30 00:47
#9
(O.o) Height % values on IE? (O.o)
Thanks for the replies and the help guys! I'll continue my experiments