Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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; 09-24-2006 at 09:27 PM.

  • #2
    New Coder
    Join Date
    Jan 2005
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •