Tag Archives: css

Positioning and z-index in IE

Using absolute positioning to hide and show a nested list is one of the better ways to create a dropdown menu, and it can almost be done using only CSS. IE6 needs a little javascript help to respect the :hover pseudo-class. The Sons of Suckerfish will help you there.

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

Continue reading

Advertisements

IE6 magic bullets

Things that sometimes “magically” make Microsoft Internet Explorer 6 behave like expected from modern browsers.

  • position: relative
  • zoom: 1
  • height: 1%

They are all due to Microsoft’s proprietary concept of hasLayout.

Feel free to add any other magic bullets in the comments.

My bad

I’ve been stuck on a piece of CSS lately, simply couldn’t get the :hover to work on an anchor <a> element, in IE6 offcourse. Setting the positioning, the positioning of the container element, floats, z-index’s. All to no use. In the end I gave in and posted my problem on css-discuss. This is the reply I got:

This is the trouble line: <a class="link">Les mer<⁄a>. For an anchor tag to take effect, it has to have the href=”” attribute set, otherwise the link won’t fire and it seems that IE6 isn’t
acknowledging your <a> tags without href, hence your lack of :hover effects.

What a headslapping moment. I was so fixated on the problem being with IE6, that I didn’t realize the problem was in the chair.