View Full Version : My CSS menu breaks in IE7

09-24-2006, 09:46 PM
I've used this forum before for help and advice and have found the users to be very knowledgeable, helpful and friendly so am hoping that someone may be able to help this time.

I have a website at http://www.hydro-culture.net which works fine in IE6, Firefox 1.5 and Opera 9.01 but I've just discovered that the menu breaks in IE7 (version 7.0.5700.6).

With the other browsers the right of the header picture spans to the menu. And the white vertical lines on the menu buttons meet the black horizonal seperator lines. In IE7 the picture does not span to the menu and there is a gap between the white and black lines.

IE7 is still at release candidate but I suspect that this issue may persist even at release version so I would like to fix it before the majority of Windows users migrate.

I've been told in an IE specific newsgroup "You are using <ul> tags for the menu and you have not set the list-style-position, list-style-type style attributes in the <Body> tag." but I've tried this and cannot get it to work :confused:

Can anyone please help me with this?

09-25-2006, 08:54 AM
Can anyone confirm if this is actually a problem with the CSS or is there any known rendering bugs in IE7?

Obviously if it's a rendering bug then there's a chance that it may get fixed before IE7 final release.

09-25-2006, 08:57 PM
It appears that the problem is related to the doctype declaration. If I remove the following from the code then the page displays ok in IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
Any ideas why this would be the case :confused:

09-25-2006, 10:08 PM
Removing the doctype puts Internet Explorer into quirks mode so that it will process the page the way that older IE versions did rather than following the standards. Removing the doctype is the easiest way to create a page that displays totally differently in IE to how it does in other browsers. You should fix your CSS so it works with the doctype there, get it working on standards compliant browsers first and then patch for non-compliant browsers such as IE7 and IE6.

09-25-2006, 10:29 PM
My CSS has some IE hacks, for example:

* html .menu {
margin-left: -3px;
It appears that IE7 ignores these when a doctype is specified. Is it best to write a seperate CSS stylesheet for IE and use the following in the HTML?

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyles.css" />
Or is there a better way of doing it?