CSS attribute 'max-width' makes image collaps in Internet Explorer 8

Question

I created an image gallery which looks fine when watched with FF 17.0.1, Chrome 23.0.1271.97 or Safari 5.0.3. The tool "IETester" shows the page also correctly for the IE 9. When viewed in compatibility mode in IE8 it also renders fine, but not in default mode.

The CSS file "core.css" adds the following rule:

/* Image ---*/
img {
  max-width: 100%;
}

I don't know, if I can change this rule as it is one of so many of a third-party template. This rule seems to collapse the images of my gallery for the IE8. Setting the additional rule 'width:auto' is not an option, as the images are not always shown in original size.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >

    <head>
      <title></title>
    <link rel="stylesheet" href="/media/plg_fancybox2/css/aobgallery.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/reset.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/core.css" media="all" />

    </head>
    <body>


    <p><script type='text/javascript'>var tlist = ['/images/showroom/playground/displaced/Disp_7b1.jpg','/images/showroom/playground/displaced/dispm_6.jpg','/images/showroom/playground/displaced/dispm_9.jpg','/images/showroom/playground/displaced/dispm_9b.jpg','/images/showroom/playground/displaced/dispm_9c.jpg','/images/showroom/playground/displaced/dispm_10a.jpg','/images/showroom/playground/displaced/dispm_12b.jpg','/images/showroom/playground/displaced/dispm_12d.jpg','/images/showroom/playground/displaced/dispm_12e.jpg','/images/showroom/playground/displaced/dispm_12f.jpg'];

    </script><div id="fancycontainer">
    <div class="fancyitem"><a href="/images/showroom/playground/displaced/Disp_7b1.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 0,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/Disp_7b1.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_6.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 1,helpers : { title   : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_6.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 2,helpers : { title   : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 3,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9b.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9c.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 4,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9c.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_10a.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 5,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_10a.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 6,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12b.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12d.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 7,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12d.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12e.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 8,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12e.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12f.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 9,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12f.jpg" /></a></div>

    </div></p>



    </body>
    </html>

This is the css used to format the gallery: aobgallery.css

#fancycontainer
{
    list-style: none outside none;
    margin: 8px auto !important;
    overflow: hidden;
    padding: 8px !important;
    border:1px solid #000000;
}

.fancyframe
{
    display: block;
    float:left;
    font-size: 11px;
    font-weight: bold;
    left: 0;
    padding: 5px;
    right: 0;
    text-align: left;
    top: 0;
}


.fancyframe:hover
{
  background-color: #333333;
}

Why does the attribute 'max-width' set to 100% collapse the image in IE8? Can I adapt my html to prevent this from happening? Can I define an additional CSS rule, that will fix this?

Here is an online demo of the problem: http://demo.artonbit.com/test.htm

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

Well have you tried re-arranging css order? It seems to me that you would want to move that 'ol css reset to the front of the load order to help reset spacing crowse-browser.

This helps explain the point of css reset: What's the purpose of using CSS browser reset code?

edited May 23 '17 at 12:18

Community

1
1

answered Dec 23 '12 at 20:01

jonc

119
1
2
8

Yes, that was my first guess. Unfortunately, this does not solve the problem. Thanks for the link about the reset. I shortly removed the reset sheet fully, which gives a better result, but still very small stripes. – André Dec 23 '12 at 20:13
Have you consider including PIE.HTC in your css styles? It generally solves a lot of older IE styling issues. – jonc Dec 23 '12 at 20:21
Yes, I actually did. But I wasn't able to get it running on that joomla. That is another problem though, but in short, I think IE couldn't find the PIE.htc. I placed it at many spots in joomla (home dir, template dir ...), but I never saw something happening. Also this "relative to html file" behavior of reading the location is ... bad. I don't know if I really can use PIE therefore. – André Dec 23 '12 at 20:33
[link]http://css3pie.com/forum/viewtopic.php?f=4&t=980 has a bit about getting pie working in joomla. I think referencing it offsite or if access to .htacess, and putting in a rewrite rule exception, would be best. Hope I helped. – jonc Dec 23 '12 at 20:38
Thank you for pointing this out. I just gave it another try and succeeded in using PIE. Unfortunately, the problem remains. But the solution to PIE was to also include the "http://", I already tried the full url, but not with protocol. – André Dec 23 '12 at 20:52

score 0 · Accepted Answer · answered Dec 23 '12 at 22:42

0

This is a bug in IE8 where the container will shrink to the width of the image. I'm on the road and can't look it up in my bug list right now but I'm sure you can Google for it if no one else comes up with the full description.

The fix could be to set a div around the image and put max-width on the div. The problem is caused by replaced elements which is what the img is. (Well, the problem is actually caused by IE but I digress.)

answered Dec 23 '12 at 22:42

Rob

14,746
28
47
65

When I put a div around the img tag and I set the width of the div to the width of the image it contains, it seems to work. – André Dec 23 '12 at 23:58

CSS attribute 'max-width' makes image collaps in Internet Explorer 8

2 Answers2