SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish Drop Menu Questions

    I have 2 questions regarding one of Paul's drop menus, which can be seen here:
    http://www.pmob.co.uk/temp/dropdown-vertical3.htm

    First, does it need to be modified in order to display properly in IE7? I'm guessing it's fine as is, but I don't know IE7 well enough yet to know for sure.

    Second, the source code begins with a Conditional Comment for IE and then comes the main CSS. Is it OK to reverse the order so that the main CSS comes first and the conditional comment comes second?

    (As a general rule of thumb, would it be OK to always list regular stylesheets first and conditional comments second? If it can be done this way, it seems that this might be a good strategy for organizing the code.)
    Last edited by D9r; May 29, 2007 at 06:56. Reason: Add resource link for Conditional Comment

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (when in doubt, search the fine web)
    Well, after doing the obligatory search I found the following instructions. They make sense, although the focus is mainly on CSS and there's no reference to JavaScript (as is used in the suckerfish menu).
    Properly hiding CSS from Internet Explorer
    the proper way to hide information from Internet Explorer would be to use something similar to the code below.

    http://www.shayna.com/index.cfm?fuse...y_entry&id=131
    Code:
    <head>  
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css" media="all" />
        <!--[if lt IE 6]>
            <link rel="stylesheet" type="text/css" href="assets/css/ie5.css" />
        <![endif]-->
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
        <![endif]-->
        <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="assets/css/ie7.css" />
        <![endif]--> 
    </head>

  3. #3
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, does it need to be modified in order to display properly in IE7? I'm guessing it's fine as is, but I don't know IE7 well enough yet to know for sure.
    The script works fine in IE7, no need to adjust that.

    Second, the source code begins with a conditional statement for IE and then comes the main CSS. Is it OK to reverse the order so that the main CSS comes first and the conditional statement comes second?
    In this case you don't have to worry about the order of the conditional comment and the CSS links etc, but sometimes it does make a difference.
    That's just a matter of what it's for and what it does.

    (As a general rule of thumb, would it be OK to always list regular stylesheets first and conditional statements second? If it can be done this way, it seems that this might be a good strategy for organizing the code.)
    Doesn't matter, as long as it works for you.
    FOR SALE: 1 set of morals, never used, will sell cheap

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE only stylesheets should come after the main stylesheet.

    The conditional comment containing a <script> element may come after the <link>s if you want it that way.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The conditional comment used in my example holds javascript and has nothing to do with the css so it can go where it likes

    The page works fine in IE7 as it is but IE7 should be able to work without the javascript anyway. However it actually doesn't work without the Javascript because IE7 has a nasty bug.

    IE7 doesn't like the menu moved off screen using left:-999em and won't show it when it is brought back into view. However if you use margin-left:-999em then it works fine (good old ie keeping up with nonsense again. )

    So if you want to fix IE7 to work without the javascript you need to do the following.

    Change the conditional comment to exclude ie7

    e.g.
    Code:
    <!--[if lt IE 7]>
    etc...........
    Then make these changes to the css.:
    Code:
    #nav li ul {
        position: absolute;
        top: 0;
        margin-left:-999em;
        min-height:0;
    }
    #nav li:hover ul,#nav li.over ul { margin-left:149px;  }

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks hexburner, Kravvitz, and Paul. I appreciate your quick and informative replies. This is a great forum -- I registered 2 years ago but never really posted until now. I'm glad to have found it.


Bookmarks

Posting Permissions

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