Thanks again
Peter
On 22/03/2004, at 3:09 PM, James Ellis wrote:
Peter<x-tad-bigger>
Sounds like a trip on the Magical Mystery Whitespace Tour (sponsored by Microsoft). I had this problem while back with a nested list, threw things at the screen in the end to try and fix it. Luckily calmness (counted to 32768 backwards) prevailed and I ended up rejigging the complete list (all was well). :D
You have this :
<div class="gallerygrid">
<h1>Feature Gallery</h1>
<h2>Click on thumbnail for larger images</h2>
<span class="pic"><a href="glry_feature01_01.html"><img src="images/features/Tfeature01_01.jpg" width="85" height="85" alt=""></a></span>
<span class="pic"><a href="glry_feature01_08.html"><img src="images/features/Tfeature01_08.jpg" width="85" height="85" alt=""></a></span>
<span class="pic"><a href="glry_feature01_09.html"><img src="images/features/Tfeature01_09.jpg" width="85" height="85" alt=""></a></span>
<span class="piclast"><a href="glry_feature01_10.html"><img src="images/features/Tfeature01_10.jpg" width="85" height="85" alt=""></a></span>
<div class="clearer"> </div>
</div>
Try this....
<div class="gallerygrid">
<h1>Feature Gallery</h1>
<h2>Click on thumbnail for larger images</h2>
<a href="glry_feature01_01.html"><img src="images/features/Tfeature01_01.jpg" width="85" height="85" alt=""></a>
<a href="glry_feature01_08.html"><img src="images/features/Tfeature01_08.jpg" width="85" height="85" alt=""></a>
<a href="glry_feature01_09.html"><img src="images/features/Tfeature01_09.jpg" width="85" height="85" alt=""></a>
<a href="glry_feature01_10.html"><img src="images/features/Tfeature01_10.jpg" width="85" height="85" alt=""></a>
<br class="break" />
</div>
CSS:
.gallerygrid a img
{
float : left;
}
.break
{
clear : both;
}
---
You may also need to do this in IE:
<div class="gallerygrid">
<h1>Feature Gallery</h1>
<h2>Click on thumbnail for larger images</h2>
<a href="glry_feature01_01.html"><img src="images/features/Tfeature01_01.jpg" width="85" height="85" alt=""></a><a href="glry_feature01_08.html"><img src="images/features/Tfeature01_08.jpg" width="85" height="85" alt=""></a><a href="glry_feature01_09.html"><img src="images/features/Tfeature01_09.jpg" width="85" height="85" alt=""></a><a href="glry_feature01_10.html"><img src="images/features/Tfeature01_10.jpg" width="85" height="85" alt=""></a>
<br class="break" />
</div>
Russ has a thing on floats in his floatutorial - IE needs to have absolutely no whitespace between tags sometimes.
HTH
James
Universal Head wrote:
Damn - doesn't seem to work for me despite trying out several permutations! Any other ideas?
Peter
Can anyone enlighten me on this ... my thumbnail pics have
about 5 pixels space at the bottom in IE6 that I can't work
out how to remove. In the CSS I have specified height and
width, and padding is 0, so who knows where its coming from.
I ran into a similar problem last week... here's the solution that
worked for me - set the image display to "block"
http://www.alistapart.com/articles/betterliving/
see "XHTML & BROWSERS" near the bottom of the page
Josh Parrish
http://keylime.nu
*Universal Head* Design That Works.
7/43 Bridge Rd Stanmore
NSW 2048 Australia
T (+612) 9517 1466
F (+612) 9565 4747
E [EMAIL PROTECTED]
W www.universalhead.com
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
</x-tad-bigger>Universal Head
Design That Works.
7/43 Bridge Rd Stanmore
NSW 2048 Australia
T (+612) 9517 1466
F (+612) 9565 4747
E [EMAIL PROTECTED]
W www.universalhead.com
