IE8 disappearing images bug - cannot use max-width: 100% and declare width attribute on image elements [#1393534]

Comment #1

Jeff Burnz CreditAttribution: Jeff Burnz commented 4 January 2012 at 11:22

You have to do better than that if you want some help - as in show me a live example.

Log in or register to post comments

Comment #2

magpie5212 CreditAttribution: magpie5212 commented 4 January 2012 at 11:39

Sorry, the a examples were in the previous problem.

See http://www.southamonline.org.uk/node?page=3

I have checked the source on IE8 and the image references are being included. However there just seems to be a grey frame where the image should be.

 <figure class="field-item" rel="og:image rdfs:seeAlso" resource="http://www.southamonline.org.uk/sites/default/files/styles/thumbnail/public/Cardall.jpg">
        <img typeof="foaf:Image" src="http://www.southamonline.org.uk/sites/default/files/styles/thumbnail/public/Cardall.jpg" width="100" height="69" alt="Mayor and Mayoress of Southam, Mike Gaffney  and Gwenda meet Bernard Cadogan" title="Mayor and Mayoress of Southam, Mike Gaffney  and Gwenda meet Bernard Cadogan" />                             
                                    </figure>

If IE is set to 'no style' then the picture shows, also if you set compatibility mode.

Log in or register to post comments

Comment #3

Jeff Burnz CreditAttribution: Jeff Burnz commented 4 January 2012 at 18:00

Cheers, intersting thing is If IE is set to 'no style' then the picture shows, I can't get to this for a couple of days I'm afraid, I need to get my virtual machines sorted out due a change of work station etc, this can't happen possibly until Monday.

Log in or register to post comments

Comment #4

Valeratal CreditAttribution: Valeratal commented 5 January 2012 at 17:48

I have this problem. I tested IE8 in "IE Tester"

Code

<DIV><SPAN class=difield><A href="/article/korporativnaya-kultura-protiv-progulov"><IMG title="Корпоративная культура против «прогулов» на работе" alt="Корпоративная культура против «прогулов» на работе" src="http://auto.hr-portal.ru/files/styles/60x40/public/mini/96572552.jpg" width=60 height=40 typeof="foaf:Image"></A></SPAN> </DIV>

IE7 and IE9 - OK (in IE tester)

Log in or register to post comments

Comment #5

Jeff Burnz CreditAttribution: Jeff Burnz commented 5 January 2012 at 19:17

Valeratal - how are you adding those images?

Log in or register to post comments

Comment #6

Valeratal CreditAttribution: Valeratal commented 6 January 2012 at 09:18

This image upload by drupal. (in field)

Log in or register to post comments

Comment #7

Jeff Burnz CreditAttribution: Jeff Burnz commented 7 January 2012 at 19:24

Valeratal - something is modifying the output, the correct markup is as per #2, the markup in your example is not what this theme produces.

I have my virtual machine up and running again so can take a look at this as soon as I have some time. Should be shortly. I like to run IE8 etc native and not use IE tester (its ok, but not the same since IE8 on IE tester is a very early beta).

Log in or register to post comments

Comment #8

Valeratal CreditAttribution: Valeratal commented 8 January 2012 at 09:02

another example (its not my site)

_http://kazanbuilder.ru/

Log in or register to post comments

Comment #9

MStrzelecki_ CreditAttribution: MStrzelecki_ commented 4 February 2012 at 16:04

masybe it is something related to http://www.456bereastreet.com/archive/201202/using_max-width_on_images_c... ?

Remove the img element’s width attribute from the markup

Give the floated element an explicit width

Give the problematic image a width:auto or max-width:none declaration

Log in or register to post comments

Comment #10

Jeff Burnz CreditAttribution: Jeff Burnz commented 4 February 2012 at 16:09

Yeah, that example shows it very well, I will read the article and see if I can find a better solution than the one proposed (its not exactly feasible for us to remove width attributes for only IE8 in Drupal).

Log in or register to post comments

Comment #11

Jeff Burnz CreditAttribution: Jeff Burnz commented 4 February 2012 at 19:17

Title:	Images do not show on IE8 running on Windows XP	» IE8 disappearing images bug - cannot use max-width: 100% and declare width attribute on image elements
Status:	Active	» Fixed

This issue was not picked up earlier because it did not exist until Drupal 7.9 when "Restored height/width attributes on images run through the theme system." was added. Previous to this image height and width attributes did not exist in D7 for performance reasons.

As per the article on 456bearastreet the bug is triggered when combining the image width attribute with max-width: 100%;. This is exactly what Adaptivetheme does so we have the bug.

There are two clear solutions:

1. Remove image width attributes for IE8, needs JS, not very attractive but would retain flexible images for IE8.
2. Use CSS, loose flexible images in IE8 but keep the browser performance benefit of printing the width attribute.

I have gone for the CSS solution. Its easy, lightweight and works. I do not think loosing flexible images in IE8 is really a big deal either.

You can hack this into any sub-theme or add directly Adaptivetheme core, at.base.css on line 71: