Ie8 Site Trouble

I'm developing a website and I can't find the ways to resolve some stuff under IE8 or higer. First of all, here is temporary site location: http://capitalpay.co.uk/. 1 So the trou

Solution 1:

IE8 still does not get PNG transparency correct. This is why you are seeing black borders on the menu highlights. There is a blog post (one of many) explaining the problem. So this is probably what is causing your issues with the broken login and black border around the menu highlight. I'm still having a look at this problem and will edit this answer if I find out a nice way to do this.

Edit: So, here is a demo of something that just about works for me in IE8 and works perfectly in Chrome 11. I am still seeing a slight border in IE8 but I hope it's good enough for you. In my opinion, pixel perfect cross browser design is almost impossible with the kind of effects you want, unless you want to rely on even more JavaScript or (dare I say) Flash. I did make a PNG alpha hover highlight a couple of years ago that worked in IE6 but it relied on custom JavaScript, a clear.gif and specific CSS classes. There may be a better way to do this with but this solution is quite lightweight as it only relies on jQuery for the animation and some IE specific CSS. You may want to put the IE styles in a separate file if you care about a valid "main" CSS.

By the way, if you had an opaque background, this would be very easy - you could just add a background-color property to the <li> set to the color of your background and the transparency would work. There is another question that I'd read before and also see here for an excellent answer explaining why IE has trouble animating a transparent PNG. I've used some of the suggestions in those answers to help with my solution here.

Hope this helps!

Solution 2:

For your 'Login/register' transparency issue try to remove this line from your head <script>:

$('#LoginPart').corner('15px');

It seems like IE doesn't like it.

Solution 3:

the jquery corner plugin seems to be causing the 1st issue, if I run

$(".jquery-corner").css("display", "none");

it cleans up the background issue. Not sure if it also relates to the button hover overs but I'd start by maybe getting rid of jquery corner first.

Solution 4:

I've never had much luck with htc files for whatever reason but I figured I might as well post this as a possible solution:

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

I know using CSS border-radius would make much more sense for all non-ie browsers, so if you can get it to work it might be worth it.