CSS semi-transparent problem in IE

dbrowne9212

Guys having some IE compatibility issues here with some CSS code. The menu is semi-transparent in Firefox but it dosent work in IE. however other transparencies ARE working in IE that are declared exactly the same way...

site is www.moretinygiants.com

any ideas?

#supernav {
font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: relative;
top: 114px;
left: 55%;
padding: 5px 35px 0px 35px; /* duplicate the tab size */
text-align: left;
display: inline;
}

#supernav li {
display: inline;
margin: 0px;
padding: 0;
text-transform: lowercase;
}

#supernav a {
color: #000000;
display: inline;
background-color: #ffffff;
font-weight: normal;
height: 19px;
padding: 5px 15px;

/* for IE */
filter:alpha(opacity=75);
/* CSS3 standard */
opacity:0.8;
/* for Mozilla */
-moz-opacity:0.8;

}

#supernav a:hover {
color: #111;
display: inline;
background-color: #FFFF00;
text-decoration: none;

/* for IE */
filter:alpha(opacity=80);
/* CSS3 standard */
opacity:0.8;
/* for Mozilla */
-moz-opacity:0.8;


}

#supernav .current_page_item a {
display: inline;
color: #111;
text-decoration: none;
}


is called like this:


<div id="header">


<ul id='supernav'>
<li><a href='http://www.moretinygiants.com/'>Home</a></li><li><a href='http://www.moretinygiants.com/?page_id=12'>News</a></li><li><a href='http://www.moretinygiants.com/?cat=4'>Gigs</a></li><li><a href='http://www.moretinygiants.com/?page_id=28'>Gallery</a></li><li><a href='mailto:moretinygiants@gmail.com'>Contact</a></li>
</ul>

</div>

forbairt

had a look into the problem ...

strange I hadn't realised this would happen

I think the solution to your problem is to use images for your a and a:hover instead of background colours but I've not tested it yet.

deegs

I cant see what your talking about, although both browers render it completely different.. tho neither are transparant

forbairt

deegs wrote: »

I cant see what your talking about, although both browers render it completely different.. tho neither are transparant

Probably cus he's changed it completely

Webmonkey

This is what I do:

Have this in the CSS file:

.transimage {
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;

}
.transimageover  {
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;

}

And have these on images:

<a href="#"><img src="image1.gif" width="x" height="y" alt=""
class="transimage" 
onmouseover="this.className='transimageover'" onmouseout="this.className='transimage'"></a>

<a href="#"><img src="image2.gif" width="x" height="y" alt=""
class="transimage" 
onmouseover="this.className='transimageover'" onmouseout="this.className='transimage'"></a>

worked a treat for me anyways in Firefox 2 and 3 beta and IE6/7. Haven't tried on anything else but would imagine it work.

forbairt

.transimage {
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;

}

Pretty much what he had not sure why it wasn't working though ..


Javascript isn't exactly an option though if its turned off its not going to work

Webmonkey

Yeah i'll admit not ideal alright but if it doesn't work it isn't a big consequence for what i'm doing anyways

forbairt

Webmonkey wrote: »

Yeah i'll admit not ideal alright but if it doesn't work it isn't a big consequence for what i'm doing anyways

In this case it was working in firefox ... in IE though the transparency wasn't showing up for some reason so the javascript wouldn't have made any difference I'd guess

Webmonkey

forbairt wrote: »

In this case it was working in firefox ... in IE though the transparency wasn't showing up for some reason so the javascript wouldn't have made any difference I'd guess

Yeah thinking about it now, that would be my guess too.

forbairt

very strange though another portion had transparency working fine ... but the nav div

div -> ul -> li -> a
div -> ul -> li -> a:hover

with the a having the background color and transparency wasn't working