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
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.)