menu has chaged in IE. help me...

[madu]

Hi all,
i have download a nice menu. it is working firefox & google chrome perfectly. but in the IE (currently i'm using IE7)

the shape of the active link has changed.
the font also has changed.


this is link to the menu,
http://www.shmtestforums.uphero.com/menu/
please help to change the css to work in IE perfectly.
thank you

[jscheuer1]

Nothing to do with css. Well you might be able to cobble something together in css to get those rounded corners in IE 7. More likely it would require javascript and/or images as well as css. However, the font is identical. It's the rendering of the font that's different.

By default most if not all modern browsers on the PC platform render fonts with anti-aliasing qualities. In IE this is called ClearType. It uses the same basic code engine as do the the Active X 'css' filters - including the one responsible for approximating what the opacity style property does in all other modern browsers.

To make a long story short - the two are incompatible. You can have partially opaque text or ClearType text, not both. The use of the alpha opacity filter is coded into the script, so cannot be removed by editing the css.

You can get rid of the highlighted (from the shmtestforums.uphero.com/menu/css/style.css file):


#container {
display:block;
position: absolute;
padding:0;
width:100%;
height:210px;
background:#fff;
top:50%;
margin:-100px 0 0 0;
border:solid #E69623;
border-width:3px 0 3px 0;

opacity: 0.90;
-moz-opacity: 0.90;
filter: alpha(opacity=90);
}

But that will mess other stuff up and only affects the bottom level - what you see before anything is activated.

[madu]

thank fro replying me. :)
but when remove the

filter: alpha(opacity=90);
from style.css, still problem is not solve. is there any difference after removing above part? :confused:
as an example you can see it in the firefox, they have got rounded corners. but in the IE still, rounded corners have lost.

isn't it ????????????????????

[jscheuer1]

My answer was basically a no. This issue does not have a css solution.

My suggestion on changing the css was as regards the appearance of the font, not for rounded corners. It has limited effect on the font because the filter removed is also used in the script and that part cannot be removed via css. Go back and actually read my entire previous post instead of cherry picking the one change I offered and expecting it to be a cure all.

What the script you have represents is the best the author felt could be done in IE. It does get a little better in IE 8. The font issue is better, not perfect, still no rounded corners though. Perhaps in IE 9 . . .

For rounded corners in IE, I suggest using Google.

There is no equivalent IE style for the border radius styles of other browsers. For rounded corners in IE you generally need (in addition to css) images (probably alpha level .png images - more problems for IE 6 and less) and/or complex layout, perhaps assisted by javascript. Be careful though - if you use IE filters as part of any of that, your text may lose its ClearType anti-aliasing qualities again.