Search code examples
internet-explorerpngvisual-studio-designer

PNG img displays in Visual Studio Designer but not IE

I am currently writing a webpage. I want there to be a banner image on the top of the webpage. Here is my html and css:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Protect The Environment!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div>
        <img src="http://intranet.kings.edu.hk/~s13977/banner.png"
            id="banner-image" 
            alt=""/>

    </div>
</body>
</html>

styles.css

body {
    background:#f8e4e4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:medium;
}

#banner-image {
    height: 106px; 
    width: 582px;
}

As you can see, I did put the image in the html and the src is set to the correct url. You can copy the url and check. Here is how it looks from the Visual Studio Designer: enter image description here

But when I run it with IE, it looks like this: enter image description here

I tried to add this to the #banner-image css rule:

visibility:visible;

But it doesn't work at all. The page stays the same!

I think there is some problems with the div but I really want to keep it. It just makes things much easier to manage.

Solution

  • In my testing, I didn't find any difference in HTML ordering, although I wasn't extremely thorough. Adding a float class directly to the image or in a surrounding <div> makes no difference, the images still do not show up.
    Fortunately, the fix is quite simple! Just add three lines to your CSS. file and the problem is solved.

    No hacks, no conditionals, just pure, validating CSS.

    img
{
    position: relative;
}

    For as many headaches I got from dealing with Internet Explorer's inadequacies, it was a slap on the face when I realized how simple the solution is. Relative positioning is the magic fix in IE, so try it out if you've got some odd quirk that's causing you grief!

    Note : Tested and workied fine