PDA

View Full Version : Problem with IE not behaving itself


Andromeda
06-01-2007, 07:19 AM
The site I'm working on at the moment doesn't display as it should in IE. Surprise, surprise. The grey menu box is the problem.

See the attachment as to how the page should look.

I thought that the problem was how IE displayed boxes and followed the suggestion at the end of the CSS Box Model tutorial but this hasn't rectified the problem.

The css in question looks like this:

#menu {
background-image:url(images/menu01.gif);
width:154px;
height:424px;
float:right;
margin-right:35px;
margin-top:35px;
color:#FFFFFF;
padding: 0 10px 0 20px;
font-size:14px;}

By adding the code that the tutorial suggests the code now looks like this:

#menu {
background-image:url(images/menu01.gif);
width:154px;
height:424px;
float:right;
margin-right:35px;
margin-top:35px;
color:#FFFFFF;
padding: 0 10px 0 20px;
font-size:14px;}

</style>
<style>
<!--[if IE 5]>

#menu {
width: 184px; /* for IE 5 */
}
</style>
<![endif]-->
<style>

If anyone is able to suggest where I have gone wrong, I would be very greatful.

The full code can be viewed here:
http://www.newday.co.nz/site-pproducts/index.html

Andromeda
06-01-2007, 09:40 AM
I don't think my problem is the box model after all. I think the problem is that IE interprets the "margin-right:35px" differently to everything else. So I used a conditional statement:
</style>
<!--[if IE 6]>
<style>
#main {margin-left:15px;}
</style><![endif]-->
and that fixed it.

Does anyone know:
1. Why IE interprets the margins differently?
2. Is there a conditional statement that applies to both IE 5 and 6 or do I have to use two seperate ones?

domedia
06-05-2007, 03:53 PM
Your problem is the box model, that is why the tutorial helped you.

IE interpretes the box model (with padding) differently, and that is why you need the conditional statement. If you want a conditional statement for IE6, then replace IE5 with IE6 just like you did :)

For detecting more IE versions or siply all IE browsers, here's some examples:
<!--[if IE]>
IE only HTML goes here
<![endif]-->
<!--[if lte IE 6]>
IE6 and earlier only HTML goes here
<![endif]-->
<!--[if IE 7]>
IE 7 only HTML goes here
<![endif]-->

Andromeda
06-05-2007, 08:51 PM
OK. Thanks for that.