Images Resizing Themselves in IE

[bigun]

This is a strange issue, I've gotten almost all IE/Everyother Browser issue fixed, except one.

This particular IE quirk involves some images being displayed, and as each one gets displayed, they get smaller.

Here is the CSS/HTML:

CSS

div#thumbmenu {
margin-left: auto;
margin-right: auto;
width: 90%;
clear: both;
}
img.thumbmenuitem {
width: 17%;
margin-top: -20%;
float: left;
position: relative;
/*margin-left: 1%;
margin-right: 1%;*/
}
img#first {
margin-left: 5%;
z-index: 1;
}
img#second {
margin-left: 21.80%;
z-index: 1;
}
img#third {
margin-left: 38.65%;
z-index: 1;
}
img#fourth {
margin-left: 55.5%;
z-index: 1;
}
img#fifth {
margin-left: 72.35%;
z-index: 1;
}

HTML

<div id="thumbmenu">
<img class="thumbmenuitem" id="first" src="./images/thumbs/mapthumb.png" alt="Bradley County Voting Areas" title="Bradley County Voting Areas">
<img class="thumbmenuitem" id="second" src="./images/thumbs/filmthumb.png" alt="Video Gallery" title="Video Gallery">
<img class="thumbmenuitem" id="third" src="./images/thumbs/experiencethumb.png" alt="List of Experience" title="List of Experience">
<img class="thumbmenuitem" id="fourth" src="./images/thumbs/letterthumb.png" alt="Letters of Excellence" title="Letters of Excellence">
<img class="thumbmenuitem" id="fifth" src="./images/thumbs/slideshowthumb.png" alt="Slideshow Galleries" title="Slideshow Galleries">
</div>

I'm not setting any width values in the ID's.... it's not making sense! I would post a screenshot, but I am afraid of violating TOS.

If anyone out there has dealth with this, please let me know why IE is doing this.

[JAB Creations]

Try adding this to the head of your page, it's been a while though I vaguely remember dealing with this years ago...

- John

<meta http-equiv="imagetoolbar" content="no" />

[bigun]

Thank you for the response, but that did not fix the issue.

I also disabled the feature in IE just to be sure I got the code correct, but the images still seem to resize themselves.

First one normal size, then smaller, and the next smaller, until the fifth looks like a spec. It's really strange.

[JAB Creations]

I did not spot it at first...though you're applying width to images directly via CSS; don't do that.

If you need the image to be a different resolution then manually resize them with an image editor. Browsers will do odd things if you try to size images that aren't their normal dimensions...and then throw in IE and just forget it. So remove the width from the images and let the browser render the image as is...if you don't like as-is then edit the image itself or make a copy and edit the copy image directly.

- John

[bigun]

So there's no way to keep images scaled based on browser size?

[JAB Creations]

SVG or nothing. You can't "scale" bitmap based images, only vector based images.

If you have a gallery with thumbnails and regular sized images, each thumb should be a completely separate image from the regular sized version.

- John

[swa66]

You can't "scale" bitmap based images, only vector based images.

That's not entirely true ...

You can resize images in CSS and CSS3 will offer even more in the future (like rescaling background images).
The problem child IE uses a far from optimal algorithm but there is somewhere a setting to change it to a standard bicubic one.

I'm trying to understand the reasoning behind the margins, the float, the centering and all, and honestly: it's hard to grasp what you're trying to do.
72% margins are gigantic.

I'm not setting any width values in the ID's.... it's not making sense!

I suggest reading up on the cascade and specificity a bit as they'll bite you easily enough if you're not familiar with the concepts.

To just simplify it to your example:

<img class="thumbmenuitem" id="third"

The .thumbmenuitem tries to give it:

width: 17%;
margin-top: -20%;
float: left;
position: relative;

The img#third tries to give it:

margin-left: 38.65%;
z-index: 1;

Since none of those conflict they *ALL* get applied to the element (that's the cascade at work).
If they would conflict, the img#third (1,0,1) would have a higher specificity than the .thumbmenuitem (0,1,0) selector and for those settings that did conflict, the img#third would win out.

Also take care with legacy IE in quirksmode: they use a broken box model, and that too might haunt you all to easy (use a full doctype with nothing in front of it)

[bigun]

I got it as sqaured away as I can in IE, here was the resulting code:

CSS

div#thumbmenu {
margin-left: auto;
margin-right: auto;
width: 90%;
clear: both;
}
img.thumbmenuitem {
/*width: 17%;*/
margin-top: -18%;
float: left;
position: relative;
/*margin-left: 1%;
margin-right: 1%;*/
}
img#first {
margin-left: 10%;
width: 17%;
z-index: 1;
}
img#second {
margin-left: 0%;
width: 21%;
z-index: 1;
}
img#third {
margin-left: 0%;
width: 27%;
z-index: 1;
}
img#fourth {
margin-left: 0%;
width: 38%;
z-index: 1;
}
img#fifth {
margin-left: 0%;
width: 63.5%;
z-index: 1;
}

HTML

<div id="thumbmenu">
<img class="thumbmenuitem" id="first" src="./images/thumbs/mapthumb.png" alt="Bradley County Voting Areas" title="Bradley County Voting Areas">
<img class="thumbmenuitem" id="second" src="./images/thumbs/filmthumb.png" alt="Video Gallery" title="Video Gallery">
<img class="thumbmenuitem" id="third" src="./images/thumbs/experiencethumb.png" alt="List of Experience" title="List of Experience">
<img class="thumbmenuitem" id="fourth" src="./images/thumbs/letterthumb.png" alt="Letters of Excellence" title="Letters of Excellence">
<img class="thumbmenuitem" id="fifth" src="./images/thumbs/slideshowthumb.png" alt="Slideshow Galleries" title="Slideshow Galleries">
</div>

It's off a little, but I'm happy considering it's IE.