I agree with James that you might need to re-look at the way you are doing this, but I think a better way to accomplish it would be to style a list. Therefore you won't run into any adjacent link problems with accessibility validation - (WCAG 1.0 AAA - point 10.3)

 

Anyway here’s a link to a page I quickly made, hope this helps you.

http://www.accessibility1st.com.au/tutorials/image_gallery.html

 

Cheers

 

Jeff Lowder

Website: www.accessibility1st.com.au

 

 

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Ellis
Sent:
Monday, 22 March 2004 3:09 PM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] mysterious space

 

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="" src="" width="85" height="85" alt=""></a></span>

      <span class="pic"><a href="" src="" width="85" height="85" alt=""></a></span>

      <span class="pic"><a href="" src="" width="85" height="85" alt=""></a></span>

      <span class="piclast"><a href="" src="" 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="" src="" width="85" height="85" alt=""></a>

      <a href="" src="" width="85" height="85" alt=""></a>

      <a href="" src="" width="85" height="85" alt=""></a>

      <a href="" src="" 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="" src="" width="85" height="85" alt=""></a><a href="" src="" width="85" height="85" alt=""></a><a href="" src="" width="85" height="85" alt=""></a><a href="" src="" 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

*****************************************************

 

Reply via email to