Can someone explain this code for me and why it works like this.

About min-height and conditional comments for ie6

Page 1 of 1

1 Replies - 941 Views - Last Post: 07 September 2009 - 05:23 AM

#1 aklo   User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 23-January 09

Can someone explain this code for me and why it works like this.

Posted 05 September 2009 - 08:20 PM

So i did a simple header, 2column and footer layout.

As alway keeping a min height when there is no content always requires a work around.

Then i found this conditional comment solution from
http://www.webmaster...css/3479075.htm

To quote this user's solution for easier reference.

Quote

Something like this is fairly simple, it shouldn’t require superfluous elements…

Problem: IE doesn’t accept min-height.
Standards-compliant browsers set height explicitly.

Workaround: Thankfully, IE does not set height explicitly, rather, fluidly, as in, “it works the way min-height does.”

Solution: You should really put IE-specific code in a conditional comment that only affects IE 6, since IE 7 correctly accepts min-height. Hacks such as the Star (*) hack are still applied by IE 7 in quirks mode. Conditional comments would be as simple as:
<head>
<style type="text/css">
#container { min-height: 100px; }
</style>
<!--[if IE 6]>
<style type="text/css">
#container { height: 100px; }
</style>
<![endif]-->

</head>



I do understand what the code is trying to do but what puzzles me is:
setting the height to 100px even in ie6...the container will not auto expand when there is content...so why is this conditional comment working?

I mean if i can do conditional comments like that above isn't it the same as just declaring all in one like:

#container {
min-height:100px; !important /* for mozilla anyway ie can't read it */
height:100px; /* for ie and mozilla but this has no !important */
}

Is This A Good Question/Topic? 0
  • +

Replies To: Can someone explain this code for me and why it works like this.

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Can someone explain this code for me and why it works like this.

Posted 07 September 2009 - 05:23 AM

Try the following in IE6 and a newer browser to see the difference in how old IE handles height:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div#container {
	height:100px;	
	background-color:#f00;
}
div#contents {
	height:200px;
	width:20px;
	background-color:#00f;
}
</style>
</head>

<body>
<div id="container">
	<div id="contents">
	
	</div>
</div>
</body>
</html>



In both IE6 and newer browsers the blue area is 200px high, but only in IE6 is the red area more than 100px high.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1