jloop == outburst

I’m a big fan of the Son of Suckerfish CSS dropdown menus at HTML Dog – executed entirely using CSS with just a touch of JavaScript to give a little extra help to certain browsers out there. Lately, we’ve also been making use of the Blueprint CSS framework on a few projects and I ran into an issue when combining the two. The dropdown menus were appearing behind content when viewed in Internet Explorer.

By default, Blueprint has a stylesheet for IE that adds a position: relative declaration to certain classes. Took me a little while to track this down and the solution is pretty simple: add a z-index property to the nearest positioned ancestor of the dropdown navigation, and set the value to something greater than the z-index of the content (e.g. 100). VoilÃ ! You’re back up and running.

In short, I changed the first line of this:

<div class="column span-42 pull-10 last">
  <ul id="nav">
    <li><a href="#">COMPANY</a>
      <ul>
        <li><a href="/ourstory">OUR STORY</a></li>
        <li><a href="/executivemanagement">EXECUTIVE MANAGEMENT</a></li>
        <li><a href="/news">LATEST NEWS</a></li>
      </ul>
    </li>
  </ul><!-- end #nav -->
</div>

to this:

<div class="column span-42 pull-10 last" style="z-index: 100;">

Oh yeah, and to keep the Suckerfish dropdown menus from appearing behind Flash pieces, make sure that you set the Flash parameter ‘WMODE’ to ‘transparent’

If you’re using SWFObject to display your Flash pieces, you would add the line:

so.addParam("wmode", "transparent");

Subscribe to comments Comment | Trackback |

Post Tags:

Browse Timeline

Comments ( 1 Comment )

Hey thanks for the tip — I was wondering why Suckerfish gets screwy with Blueprint….

Vijay Pattisapu added these pithy words on Aug 30 08 at 4:56 pm

Browse Timeline

Comments ( 1 Comment )

Add a Comment