Transparency with relative positioning

[david7777]

I cant seem to get the alph opacity filter to work on a div with relative positioning. I am using the following code:

<div class="mainNav" style="filter:Alpha( Opacity=40 ); position: absolute;"><a TITLE='Home Page' href='/'>Home</a></div>


So the class is giving a blue background, which i want transparent. It works fine if i use absolute positioning, but as soon as i use relative positioning, then no transparency occurs. Why is that?

I have tried to use a semi-transparent gif as the background which works perfectly except for performance - it seems to slow everything down when an image is involved... So i dont want to use that either.

[Frank]

I tried this and it works ok, except the div has now moved, because of where absolute and relative have there starting positions. Is it possible that it's working just off your view of the page. Maybe you should try 0px for your positions. I'm not 100% sure if it matters but I always put "position: " at the start of my style like so.

<div style="position: relative; left: 45px; top: 45px; height: 38px; width: 121px; visibility: hidden; filter:alpha(opacity=75);-moz-opacity: 75%">

Hope this helps

[david7777]

Thanx a ton! It was actually just one of the size attributes i needed to put in... If i just put height, or width in there, everything worked fine...

Thanx again :thumbsup:

[looka]

and still we don't know wheter it is possible to cancel transparency on nested objects?

[AaronW]

Well you'd just tell the nested object to be (100 + (100 - opacity))% opaque. So if the parent is 50% opaque, the child would be 150% opaque. I'd imagine it'd work with "opacity:" and "filter:alpha:" too. Anything over 1 or 100 should mean "fully opaque".

[looka]

SHOUD, yes, shoud :(
but i have tried this options and also filter:none for ie. nothing works either in mozilla either in ie. im tryin now if image loader could do the work:)