Forum Moderators: not2easy
I have a photo gallery. A page displays a number of thumbnails. They can be either portrait or landscape in orientation. The images are either 60px wide, or 60px high (depending on orientation). They are rendered in a list so that the thumbnails flow when the browser is resized. Code below (i have included just 2 <li> elements:
<html>
<head>
<title>Demo</title><style type="text/css">
.photoslist
{
list-style-type: none;
padding: 0;
}
.photo-container
{
display: table;
height: 60px;
width: 60px;
position: relative;
text-align: center;
}
.photo-container-cell
{
display: table-cell;
vertical-align: middle;
}
.photoslist li
{
display: inline;
float: left;
height: 60px;
width: 60px;
}
.photo-drop-shadow
{
display: inline-table;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
text-align: center;
}
.photo-drop-shadow input[type=image]
{
background-color: #fff;
margin: -1px 4px 4px -2px;
}
</style>
</head>
<body>
<ul class="photoslist">
<li>
<div class="photo-container">
<div class="photo-container-cell">
<div class="photo-drop-shadow">
<input type="image" name="ctl00$cphMain$lvwPhotos$ctrl0$ImageButton1"
id="ctl00_cphMain_lvwPhotos_ctrl0_ImageButton1" src="2.jpg" alt="" /></div>
</div>
</div>
</li>
<li>
<div class="photo-container">
<div class="photo-container-cell">
<div class="photo-drop-shadow">
<input type="image" name="ctl00$cphMain$lvwPhotos$ctrl1$ImageButton1"
id="ctl00_cphMain_lvwPhotos_ctrl1_ImageButton1" src="2.jpg" alt="" /></div>
</div>
</div>
</li>
</ul>
</body>
</html>
Now this works fine in Opera/Firefox/Safari/Chrome.
Howver, in IE6 the drop shadow doesnt display at all (i can live with that). However in, IE7 the drop shadow container does not fit to the image.
I understand that IE7 does not recognise the display: inline-table attribute. Is there an equivelent I can use. I can't use float:left; on the shadow div as this left aligns all the images.
Thanks,
Ben
html:
<ul class="ul">
<li class="li">
<div class="img">
<div class="photo-drop-shadow">
<input type="image" name="ctl00$cphMain$lvwPhotos$ctrl24$ImageButton1" id="Image2"
src="ImageHandler.ashx?ImageID=462&size=s" alt="Graphic Design Catalog" />
</div>
</div>
</li>
</ul>
css:
.ul
{
list-style: none;
}
.li
{
display: inline;
float: left;
text-align: center;
}
.img
{
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
line-height: 60px;
} .photo-drop-shadow
{
display: inline-table;
background: url(App_Themes/Default/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(App_Themes/Default/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.photo-drop-shadow input[type=image]
{
background-color: #fff;
margin: -1px 4px 4px -2px;
}
This works fine in all browsers other than IE.
Imagine a 60 x 33 pixel image sitting in a <div> that wraps round it. The negative margin on the image then allows the background of the div to be seen (the shadow).
In IE, my shadow div just takes up the full size of it's parent container ("img") rather than wrapping round it's contents the image.
So to reiterate, the "display: inline-table" property allows me to wrap the div around the image in other (compliant browsers). So how can I do something similar in IE?
Thanks (again)
Ben
IE's inability to render pngs is not actually the problem. This is why i have
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
in my stylesheet.
The problem is simply that IE does not recognise display: inline-table which means the div that has the shadow image as it's background is not wrapping the image inside it.
I cannot use float as this float all the images left and I need to keep them centered both vertically and horizontally.
Thanks,
Ben
