Relative Superfish is a Mad Mad Girl

When trying to use Superfish or other css-based dynamic menu, Internet Explorer will complot against you, specially with some complex layout.

Lets take an example of what im saying. Suppose we want to do come to this:

This is a typical web page, we have a Menu with Superfish, an Slideshow underneat it, and also a floating Logo. So what is the best way to put all of this?

1) Lets make the Dom:
Thats right, put the container divs in that order and together at the same DOM level. Those ID comes from Drupal, but you can name them as you want.

2) Position:
This is almost easy, just put them as the image suggest:

The important part here is the static position on the Superfish Menu. Never put a position:relative to the superfish menu container. It will just mess it up the children menus. Why it does that? Well for what I know, when a relative item (the submenu) is inside another relative item (the container), that item will only appear inside the view area of the container. Of course only on IE. (6 to 8 at least).

No comments: