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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Navbar problem in IE!

    REF: http://moderntimes.com/bab/

    This menu bar works properly in all browsers except IE, as usual. I tried making a seperate .css for IE, but it doesn't work. The page validates? I use this menu in other pages and it works, even in IE? It's just so frustrating, how the design breaks up in the one browser that most people use.

    Any suggestions?

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    If there's really no way around then I'd recommend to create a separate stylesheet for IE 6 and use conditional comments to call the stylesheet(s) for specific versions of IE (or not):
    Code:
    (doctype)
    <head>
    (title, meta, etc.)
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <!--[if IE 6]>
    <link rel="stylesheet" href="styles_ie.css" type="text/css" />
    <![endif]-->
    </head>
    ...
    This provides a stylesheet for all browsers and one with IE specific styles that only IE 6 will recognize/execute.
    However, in order to work properly you need to reverse the first stylesheet's styles that don't work in IE because the second stylesheet has to overwrite the styles of the first one if they are supposed to be different. For example if you have specified
    Code:
    ul {padding-left: 20px;}
    in the regular stylesheet and don't want it to show in IE you must address this specific selector again and overwrite the setting in the IE stylesheet, e.g.:
    Code:
    ul {padding: 0;}
    I have also seen conditional comments with the NOT operator ("!"), specifiying if it's NOT IE then do this and that:
    Code:
    <!--[if !IE]> <-->
    <link rel="stylesheet" href="styles_ie.css" type="text/css" />
    <!--> <![endif]>
    I can't say for sure whether this is working, though. I suppose since a regular conditional comment would be ignored by other browsers than IE it would be useless to tell "if NOT IE show this style (to the other browsers)" so that's why these additional comment tags are there (colored in green). They pretend the comment is closed to the other browsers while IE is ignoring that (green) closing comment... complicated way but I'd say give it a try. :-)

    I hope that makes sense and helps...


  •  

    Posting Permissions

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