CODEWITHSUNDEEP
cssimageinternet-explorer-9
boatcoder
boatcoder

Reputation: 18117

How do I get Internet Explorer to do a better job displaying images

On the left is chrome, on the right is IE9, same image, same html, but one of them looks like utter crap. How do I get IE to not screw up my images?

Image Display Problem

Here is the actual image being displayed in the page, in case that helps

Actual image used to create the screenshot above

Here is the html:

<div id="logo-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="height: 80px; width: 950px; left: 0px; top: 0px;">
<img src="/static/img/logo.gif" height="40"><a id="logout" href="/viewer/logout">Logout</a>
<div id="logo-clearEl" class="x-clear" role="presentation">
</div>
</div>

Here is the css for the img tag

#logo-body img {
    margin-top: 20px;
    margin-left: 10px;
}
.x-border-box, .x-border-box * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
fieldset, img {
    border: 0;
}

and the css for the parent div

#logo-body {
  border: none;
}
#logo, #logo-body {
  background-color: #002d56;
  background-image: -moz-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -webkit-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -o-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -ms-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
}
.x-panel-body-default {
  background: white;
  border-color: #99bce8;
  color: black;
  border-width: 1px;
  border-style: solid;
}
.x-panel-body-default {
  background: white;
  border-color: #99bce8;
  color: black;
  border-width: 1px;
  border-style: solid;
}
.x-panel-body {
  overflow: hidden;
  position: relative;
  font-size: 12px;
}
.x-border-box, .x-border-box * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

Upvotes: 1

Views: 113

Answers (2)

boatcoder
boatcoder

Reputation: 18117

The simple answer to this is that you can't. IE is just an inferior browser in almost every regard, and it shows more and more, from image rendering to debugging, to css support, you name it.

Converting to PNG from GIF did nothing, creating a whole new logo does solve the problem, but doesn't really answer the question. Someday IE will cease to exist (I hope) and we will no longer spend more time making up for its deficiencies than we do creating whole products.

To those of you that helped create IE, a curse upon you and all your descendants.

Upvotes: 0

Giovanni
Giovanni

Reputation: 580

It might be the image itself, You can try saving it as a PNG rather that a GIF.

PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds...More

Or re-create the image and use a different file format. Like this: logo

for example: http://jsfiddle.net/Wy8Y4/8/

<img src="https://i.sstatic.net/xbEug.png" height="40"><a id="logout" href="/viewer/logout">Logout</a>

Upvotes: 2

Related Questions