2.12.2013

Flexible Image and IE

I was working on a top-secret project when I struck a conundrum. You see, I needed a flexible-width image that would work in all browsers.

The typical method of achieving this is the either use the Flexible Image action by Softpress, or to open the extended dialog and enter this:
These seem fine and dandy: Safari, Chrome, and Firefox on a Mac? Check. Chrome and Firefox on Windows 7? Check. IE8 and IE9 on Windows 7? Uh...Not cool.


Here is the mobile version of spokanecivilwar.com in Chrome on Win 7:
And here it is in IE9:

See any difference? The image, when using height:auto; flattens to a 1 pixel high pancake in IE. On a mobile-only site I wouldn't worry about this, as all the mobile browsers are fairly advanced and display the image properly. When this is being implemented on a desktop website however, it's really important that your images don't do this! Remember, IE8 and IE9 account for almost 50% of all browser usage!

How do we work around this predicament? Simple. Right-click on the image in question, and click on "extended" in the menu. Now, go to the ing style tab, and click "add". In the name field, enter width and for the value use auto. Now, do the same for height: auto; and max-width:100%;. It should look like this:
As always, test it out to verify that it's working. You now should have a IE friendly flexible-width image! Do you have another method that works well, or did this help you? Let me know in the comments below!

No comments:

Post a Comment

I'm Caleb Grove

Yep, that's me. I'm a 17 year old web unicorn and own OnRamp Web Design. My skill base is quite broad, though my real focus lies in UX and UI design for the web. When it comes to designs, I'm a perfectionist, scooting 1 pixel at a time.

My main blog captures all my web-related thoughts that exceed 140 characters. Anson S is my personal blog, where I pander in politics and religion. You can tweet me on Twitter at @SirCalebGrove, circle me on , or friend me on Facebook.

About this site

This is my playground. CalebGrove.com harnesses the power of HTML5 and CSS3. It was built using my web design weapon of choice, Freeway Pro, using a inline flexible system. Responsiveness was hand-coded. The blogs are hosted by Blogger, whose template code was generated by the Blogger actions. Website hosted by GJX Hosting. Creativity provided a disturbed mind, and not much else.

No unicorns where harmed in the making of this website, except through caffeine overdose.