Re: [WSG] mysterious space

[James Ellis]

Peter

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">&nbsp;</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
*****************************************************