IE8 site trouble

Question

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 troubles are: Login/register form has black rectangle instead of transparency: enter image description here

And the style is:

#LoginPart
{
    background-image: url('../images/login_bg.png');
    float: right;
    width: 184px;
    height: 25px;
    margin-top: 10px;
    margin-right: 100px;

    text-align: center;
}

And here is that background (a bit ugly): enter image description here

2

My meny highlights bad... I know the code is'nt the best, but it works in another browsers

s enter image description here

css:

        <div id="Menu">
            <ul id="Navigation">
              <li><a href="#home"><div class="HighlightItem"></div><span>Home</span></a></li>
              <li><a href="#vending"><div class="HighlightItem"></div><span>Vending machine</span></a></li>
              <li><a href="#videos"><div class="HighlightItem"></div><span>Videos</span></a></li>
              <li><a href="#about"><div class="HighlightItem"></div><span>About</span></a></li>
              <li><a href="#contact"><div class="HighlightItem"></div><span>Contact</span></a></li>
            </ul>
        </div>

Navigation:

#Navigation
{
  margin:0;
  padding:0;

  text-align:center;
  list-style:none;
  height: 50px;
}

.HighlightItem
{
    width: 142px;
    height: 50px;
    position: absolute;
    display: none;
    background:none;
}

#Navigation span
{
    position: relative;
    text-align: center;
    top: 40%;
    font-size: small;
    z-index: 5000;
    font-weight: bold;
    text-shadow: 1px 0px 0px #000;
}

In span element there is menu text. I made z-index: 5000 for it to make over it absolute div with transparency, but leave text above it.

And here is JS (Jquery) code I'm using to animate menu:

    $('li>a').hover(function(){
        $(this).children('div').stop();
        $(this).children('div').css({opacity: 0});
        $(this).children('div').css('background-image', 'url("../images/but_hov.png")');
        $(this).children('div').css('background-repeat', 'no-repeat');
        $(this).children('div').css('background-position', 'center center');
        $(this).children('div').fadeTo(400, 1.0);
    }, function(){
            $(this).children('div').stop();
            $(this).children('div').fadeTo(400, 0, function() {
            $(this).children('div').css('background-image', 'none');
            $(this).children('div').hide();
        });
    });

Any help is welcome!

MS released it on the 14th [IE9 Release Globally Available for Consumers and Businesses](http://blogs.msdn.com/b/ie/archive/2011/03/14/ie9-release-globally-available-for-consumers-and-businesses.aspx) — MikeM, Mar 20 '11 at 18:36

score 1 · Answer 1 · answered Mar 20 '11 at 18:53

1

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.

answered Mar 20 '11 at 18:53

Sylvain Guillopé

1,358
9
21

score 1 · Answer 2 · answered Mar 20 '11 at 18:53

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

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!

score 1 · Answer 4 · answered Mar 20 '11 at 21:08

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.

IE8 site trouble

1

2

4 Answers4

Linked