Suckerfish Drop Menu Questions

**D9r** · May 29, 2007 06:09

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.)

**D9r** · May 29, 2007 06:48

(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>

**hexburner** · May 29, 2007 06:51

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.

**Kravvitz** · May 29, 2007 07:10

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.

**Paul O'B** · May 29, 2007 09:00

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;  }

**D9r** · May 30, 2007 12:18

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.

User Tag List

Thread: Suckerfish Drop Menu Questions

Thread Tools

Display

Suckerfish Drop Menu Questions

Bookmarks

Bookmarks

Posting Permissions