9 replies [Last post]
NightWalker
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

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">&nbsp;</div>
      <div id="Layer3" class="s3">&nbsp;</div>
      <div id="Layer4" class="s4">&nbsp;</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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

(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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

NightWalker
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

(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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

(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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

NightWalker
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

(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">&nbsp;</div>
      <div id="Layer2" class="s2">&nbsp;</div>
      <div id="Layer3" class="s3">&nbsp;</div>
      <div id="Layer4" class="s4">&nbsp;</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? :?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

(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.

NightWalker
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

(O.o) Height % values on IE? (O.o)

wolfcry911 wrote:
Are you just experimenting, or creating a layout? If creating a layout you may want to scrap everything and start over without absolute positioning.
I'm just experimenting Laughing out loud, but what's so wrong about absolute positioning anyway? :?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

(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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(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.

NightWalker
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

(O.o) Height % values on IE? (O.o)

Thanks for the replies and the help guys! I'll continue my experiments Laughing out loud