CODEWITHSUNDEEP
htmlcssinternet-explorer
SaVee
SaVee

Reputation: 23

Internet Explorer doesn't show an image

I have a problem with my website, the Yellow Butterfly Logo doesn't show up in Internet Explorer, but does in Chrome and other browsers.

I don't even know where the problem is so I couldn't find anything out.

If you need more information tell me; here is the Website (to see the problem open with).

#logo
{
    z-index:2333;
    position:absolute;
    width:70px;
    height:70px;
    margin-left:-375px;
    margin-top:-24px;   
}

Sorry for my bad English its not my native language.

Upvotes: 0

Views: 1855

Answers (2)

Sampson
Sampson

Reputation: 268344

The issue here appears to be default placement of an absolutely positioned element within an element using the align attribute such as <div align='center'>...</div>. Chrome allows the align attribute to center an absolutely-positioned element, where as Internet Explorer 11 does not.

After checking the in-development version of Internet Explorer via http://remote.modern.ie, it appears future versions Internet Explorer will handle this in the same way Chrome does, making the following solution relevant only for backwards compatibility.

Apply the following changes to address the problem:

div#wrapper {
    width: 768px;
    margin: 0 auto;
}

By setting width: 768px on the #wrapper and margin: 0 auto we take a better approach to centering your layout, as well as positioning aboslutely-positioned children.

#logo {
    /* margin-left: -375 */
}

All that is needed now is to remove the above rule. Due to the improved centering, we no longer need to specify the left margin.

In the long-run, I would encourage you to not rely on margins at all for positioned absolutely-positioned elements. Instead, the would use more explicit absolute coordinates:

#logo {
    left: 0;
    top: 187px;
}

Here's a change-summary from Internet Explorer's F12 Developer Tools that show a diff:

Internet Explorer Changes

Upvotes: 3

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Your positioning is a mess. You give the logo absolute positioning, but then specify none of the positioning properties (left/top/right/bottom) - this makes the resultant position of your image undefined by the CSS standards. Chrome/Firefox default to left:50% in this case, IE to left:0.

Make it explicit, by adding left:50% to your CSS rule for #logo, and the image will appear in IE again.

I would recommend reading up some more about how the box model actually works though, your site is really a mess right now and it's a miracle it's working as good as it does right now.

Upvotes: 0

Related Questions