Why Are Internet Explorer Images HUGE?

Ok, I’m really nerding out on this one and most of my readers won’t care about Internet Explorer images, but for the few do-it-yourself bloggers that might otherwise spend hours searching for a solution, I offer this. (Plus I’ll know where to find the solution next time I forget.)

First, Internet Explorer sucks. Let’s get that out of the way.

Why are Internet Explorer images HUGE? Why won’t they resize?

I just finished a web site that looked lovely in Chrome. But Internet Explorer images were so big they ran out of the content area.

Isn’t that lovely?

I Googled solutions for an hour before I finally found what I thought might fix the Internet Explorer image problem and manged to fix it, but let me make this easy for you.

Internet Explorer doesn’t like the “auto” tag, which is used with lots of templates on WordPress and, in my case, a Rockettheme.com Joomla template. So where my CSS stylesheet said:

img { max-width: 100%; width: auto \9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }And Chrome and Firefox said, “Oh sure, that makes perfect sense!” Internet Explorer images said, “Uh… duh… I give up, I’m just going to make these images their REAL upload size and TOTALLY IGNORE anything you might have done to shrink that photo down on that particular page, like using height=”300″ or dragging it to another sizes or whatever. Can I pet the rabbit now? “Brilliant, IE.

SOLUTION TO THE INTERNET EXPLORER IMAGES ISSUE

1. View the site in Chrome.
2. Right click on the image that Internet Explorer is using to piss you off (even though it looks fine here) and choose “Inspect Element” from the pop up menu.
3. That will open up a box at the bottom of your screen. On the right, you’ll see all the snippets of CSS code attached to that element (the photo). You’ll also see WHERE it is pulling that code from. In the case of my Rocket Theme Joomla template, it was in bootstrap.css found in the css directory of my template.
4. FTP in and get that file and edit it or edit it through an online CSS editor you might have on your site’s template manager. If you can, you might want to make a backup first just in case.
5. Remove the lines with width and height bits that say “auto.”
6. Save.
7. Viola! Internet Explorer images now look just fine.

Hope that helps someone!

• About
• Latest Posts

64

Amy Vansant

Voted Funniest Non-Mommy Blog by a Bunch of Moms I Got Really Drunk.Amy has been finding creative ways to make no money since high school. 64

Latest posts by Amy Vansant (see all)

• Why are Internet Explorer Images HUGE? – October 17, 2013
• Trip Advisor Parody – Jefferson University Hospital Hotel, Philadelphia PA – October 16, 2013
• Vintage 80s Clothing from Hipster Wolverine – October 15, 2013