DIV 100% Height and IE

Forum Moderators: not2easy

Message Too Old, No Replies

DIV 100% Height and IE

Saboi

11:13 am on Sep 25, 2008 (gmt 0)

Hi guys,

Why is it that the height element applied to a DIV does not work in IE? It works fine in FF.

What could be the reason for this? How would you suggest one goes round this...

Thanks.

swa66

5:12 pm on Sep 25, 2008 (gmt 0)

IE has a broken box model, there's little you can do about it.
The easiest is to use conditional comment to work around the trouble it creates.

Saboi

10:28 am on Sep 26, 2008 (gmt 0)

Hello Swa66,

Managed to get it work in IE. However, FF then extende the content DIV a little further to the right.

Please look at my code below and kindly advice how i can have it uniform accross browsers...

CSS

#container{width:80%; height:100% auto; margin:0 auto; border:0;}

#header{width:80%; background-color:pink;height:30%; background-image:url(image.jpg); padding:4px;}

#menu{width:15%; background-color:blue; height:100%; float:left; border-left:double blue; border-right:double blue; padding:4px;}

#content{width:65%; background-color:white; height:100%; float:left; padding:4px;}

#footer{width:80%; background-color:green; height:5%; float:left; clear:both; padding:4px;}

.menu a{display:block; background-color:white; text-decoration:none; text-align:center;}

.menu a:hover{display:block; background-color:yellow; text-decoration:none;}

.menu a:visited{display:block; text-decoration:none;}

body{background-color:gray;}

</style>

HTML

<body>

<br>

</DIV>

<p>Bla bla bla bla...

</center>

</DIV>

</body>

</html>

swa66

10:40 am on Sep 26, 2008 (gmt 0)

The easiest is to use conditional comments: that way you can have what works in all browsers but IE separated from what IE needs.

In the head section of your html:


  <link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

style.css then gets what you need for FF, opera, safari , chrome, ...
ie6.css is what's needed to make IE6 behave (it goes on top of what is in style.css)
Ditto for IE7, it's independent form what IE6 gets (the bugs in both tend to differ)

You can also use the <style> tags instead of the external files, depends on how many pages share the same CSS which is better.