Forum Moderators: not2easy
<a href="#"><img src="picture1.jpg"></a>
<a href="#"><img src="picture2.jpg"></a>
...
At first I tried floating everything left, which causes problems in IE5/Win. Then I thought, why not just make all the <a> and <img> inline and they will do the same thing. But I don't seem able to reliably control the vertical margins between the inline elements.
I've tried setting line-height on the <a> elements and then vertical-align on the <img> elements to place them, but IE doesn't play ball. Setting vertical margins on the <a> or <img> elements doesn't seem to work in IE5/Mac.
Does anyone have a good solution?
At first I tried floating everything left, which causes problems in IE5/Win
I think you were on to the right solution there. What problems occur in IE5?
(1) When you move the mouse over one of the <img> links in IE5/Win, the entire collection of floated links jumps down the page, doubling the height of the containing <div> and leaving the top half empty. If you scroll down and try to click again, this repeats, stretching the page again.
(2) I also find that in more recent versions of IE/Win the containing <div> is not given its full height. I have tried forced the <div> to expand downwards by including another, cleared and non-floating element. However, rather than stretching the <div> it just shifts it to the bottom, so that the floated thumbnails extend above it. I don't want to specify a height for the <div> as I need the page to expand depending on the number of thumbnails.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
ul {list-style-type:none;}
li {
float: left;
margin:10px 10px;
}
li p {
text-align: center;
}
</style></head>
<body>
<ul>
<li><img src="pic1.jpg" alt=""/></li>
<li><img src="pic2.jpg" alt=""/></li>
<li><img src="pic3.jpg" alt=""/></li>
<li><img src="pic4.jpg" alt=""/></li>
<li><img src="pic5.jpg" alt=""/></li>
<li><img src="pic6.jpg" alt=""/></li>
<li><img src="pic7.jpg" alt=""/></li>
<li><img src="pic8.jpg" alt=""/></li>
<li><img src="pic9.jpg" alt=""/></li>
</ul>
</body>
</html>
This happened to me with a set of nine floated links, that quite naturally separates into grid of three by three. Letting it do this naturally works in all browsers but IE5/Win. In IE5/Win the user has to chase the links down the page.
I solved the problem by putting each set of three links into a container div. It looks the same on the page but now works in IE5/Win. I can't, however, remember why it works. It may be something to do with protecting the floated item from going over onto a new line.
Thanks, incidentally, for remonding me of this, since I'm considering putting photo thumbnails on my site, and I'm going to have to take this into consideration. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Untitled</title>
<style type="text/css">
body {
color: #000000;
background: #ffffff;
}
.pictures {
text-align: center;
width: 80%;
border: 2px solid;
padding: 5px 0;
margin: auto;
}
.pictures img {
margin: 6px;
}
</style>
</head>
<body>
<div class="pictures">
<a href="001.html"><img src="thumbnails/001.jpg" title="" alt=""></a>
<a href="002.html"><img src="thumbnails/002.jpg" title="" alt=""></a>
<a href="003.html"><img src="thumbnails/003.jpg" title="" alt=""></a>
<a href="004.html"><img src="thumbnails/004.jpg" title="" alt=""></a>
<a href="005.html"><img src="thumbnails/005.jpg" title="" alt=""></a>
<a href="006.html"><img src="thumbnails/006.jpg" title="" alt=""></a>
<a href="007.html"><img src="thumbnails/007.jpg" title="" alt=""></a>
<a href="008.html"><img src="thumbnails/008.jpg" title="" alt=""></a>
<a href="009.html"><img src="thumbnails/009.jpg" title="" alt=""></a>
<a href="010.html"><img src="thumbnails/010.jpg" title="" alt=""></a>
</div>
</body>
</html>
If anyone wants to try it out on his local machine with his own thumbnails, I'd be interested to hear of any problems.
