21
Nov 2003

CSS transparency and IE

This entry is out of date now, the file I was playing with has gone away!

I’ve come across a nippy little problem when coding the menu for a new site. I’ve got a full width div with a background-image which is a curve, one side of which is transparent. There’s an absolutely positioned menu div which I’d like to slide ‘under’ the image.

CSS:

#menu {
position:absolute;
top:20px;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
width:50em;
max-width:800px;
border:1px solid green;
text-align:right;
}

#lower-header {
position:relative;
z-index:2;
background-color:transparent;
background-image:url(../images/bottom.png);
background-repeat:no-repeat;
height:65px;
margin:0;
padding:3em 0 0 0;
border-right:1px solid #000000;
}

Looks pretty much as it should in IE5+, Op and Firebird but, as usual, doesn’t work as it should in IE – the links are visible, but not clickable.

Any clever ideas for solving the problem without changing the XHTML considered ;-)

EDIT: background image is normally a PNG, but it’s gone funky for some reason so that page is using a GIF.

Leave a comment

You must be logged in to post a comment.