Web Analytics Made Easy - StatCounter My CSS menu breaks in IE7 - CodingForum

Announcement

Collapse
No announcement yet.

My CSS menu breaks in IE7

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    My CSS menu breaks in IE7

    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

    Can anyone please help me with this?
    Last edited by mobile; Sep 24, 2006, 04:27 PM.
    Tags: None
  • #2
    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.

    Comment

    • #3
      My CSS menu breaks in IE7 - UPDATE

      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:

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

      Comment

      • #4
        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.
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment

        • #5
          My CSS has some IE hacks, for example:

          Code:
          * 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?

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

          Comment

          Previous template Next
          Working...
          X