Opacity setting IE

[TUNA FISH]

I've just built a website for myself using iWeb09. The website includes an opaque box in the navigation bar on each page. I finished building it and was happy with the finished product until I checked it in IE.

Unfortunaty all the opaque boxes become exploded and mess up the navigation bar. After spending all morning researching and learning some CSS I've found the problem is with the opacity setting and the fact IE doesn't know what to do with it. The problem can be fixed by replacing

opacity: 0.65; with filter:alpha(opacity=65);

but then it no longer works in any other browser. So I tried using both which then messes up IE again since I guess it is seeing the opacity setting again and going into a fit. I then tried using the -ms- -o- -moz- and -webkit- to make the terms browser specific, it worked! All my browsers were working until I found out the Firefox I was using was v3. When I tried 3.5 the boxes were solid, some research lead me to find the -moz- had been made obsolet in 3.5 .

So now I almost have it working other than Firefox 3.5. What I need to do is use the opacity command with the IE specific filter:alpha(opacity=65); but somehow get IE to ignore the opacity command. I don't know how to do this?

Can anyone shed some light? Thanks.

 

[PMWD]

Normally you can just set the value for each browser and it'll ignore the other settings it doesn't recognise:

div.class {
filter:alpha(opacity=65);
-moz-opacity:0.65;
-khtml-opacity:0.65;
opacity:0.65;
}

When you say the boxes explode in IE what do you mean? Do they lose some other setting? Are you making sure you've closed each element with a semi-colon?

 

[TUNA FISH]

Ok I have edited two of my pages so the opacity reads as,

}
.style_SkipStroke_2 {
background: rgb(0, 0, 0);
filter:alpha(opacity=65);
opacity: 0.65;
}

I've done this on this page and this page . You should see the problem I'm talking about when you view them using IE but see what they are meant to look like in another browser. If you go on any other pages in Firefox you will notice the boxes in the navigation bar appear solid.

 

[TUNA FISH]

I've been doing some more fiddling and found the html iWeb writes refers to a javascript file which if removed stops internet explorer messing up when opacity is included. Removing it ruins the navigation bar though so I need to keep it. I searched through the file and found instances of opacity, here is the code.

if(style=='opacity')return value?parseFloat(value):1.0;return value=='auto'?null:value;},getOpacity:function(element){return $(element).getStyle('opacity');},setStyle:function(element,styles){element=$(element);var elementStyle=element.style,match;if(Object.isString(styles)){element.style.cssText+=';'+styles;return styles.include('opacity')?element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]):element;}
for(var property in styles)
if(property=='opacity')element.setOpacity(styles[property]);else

If I remove this code the site works on all browsers using the 3 opacity terms, the problem is my blog then doesn't show! There must be a single line of code I can edit or change to solve it without ruining my blog. There is also this in the file

else if(Prototype.Browser.IE){$w('positionedOffset getOffsetParent viewportOffset').each(function(method){Element.Methods[method]=Element.Methods[method].wrap(function(proceed,element){element=$(element);var position=element.getStyle('position');if(position!='static')return proceed(element);element.setStyle({position:'relative'});var value=proceed(element);element.setStyle({positionosition});return value;});});Element.Methods.getStyle=function(element,style){element=$(element);style=(style=='float'||style=='cssFloat')?'styleFloat':style.camelize();var value=element.style[style];if(!value&&element.currentStyle)value=element.currentStyle[style];if(style=='opacity'){if(value=(element.getStyle('filter')||'').match(/alpha\(opacity=(.*)\)/))