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.
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:
SOLUTION TO THE INTERNET EXPLORER IMAGES ISSUE
- View the site in Chrome.
- 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.
- 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.
- 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.
- Remove the lines with width and height bits that say “auto.”
- Viola! Internet Explorer images now look just fine.
Hope that helps someone!