RE: [WSG] mysterious space
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 :
Feature Gallery
Click on thumbnail for larger
images
Try this
Feature Gallery
Click on thumbnail for larger
images
CSS:
.gallerygrid a img
{
float :
left;
}
.break
{
clear :
both;
}
---
You may also need to do this in IE:
Feature Gallery
Click on thumbnail for larger
images
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
*
RE: [WSG] mysterious space
> Universal Head wrote:
> 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,.
> http://www.cinema4duser.com/tech_feature01.html
Try adding font-size:0; to your clearer style
You have also specified a 5px margin at the bottom of the images in both
pic and piclast classes
.pic {
margin: 0 5px 5px 0;
}
The order is: top right bottom then left
Regards
Jason Turnbull
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] mysterious space
James, I greatly appreciate you getting stuck into this. I'll let you know how it goes.
Thanks again
Peter
On 22/03/2004, at 3:09 PM, James Ellis wrote:
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 :
Feature Gallery
Click on thumbnail for larger images
Try this
Feature Gallery
Click on thumbnail for larger images
CSS:
.gallerygrid a img
{
float : left;
}
.break
{
clear : both;
}
---
You may also need to do this in IE:
Feature Gallery
Click on thumbnail for larger images
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
*
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
Re: [WSG] mysterious space
Peter I'd try neutralizing the default for the span tags that you're using in the html in place of list items. Set a rule for those specific spans to margin 0 because IE screws the rendering in default. And to be safe 0 the padding as well. Leo On Sunday, March 21, 2004, at 10:24 PM, 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
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 :
Feature Gallery
Click on thumbnail for larger images
Try this
Feature Gallery
Click on thumbnail for larger images
CSS:
.gallerygrid a img
{
float : left;
}
.break
{
clear : both;
}
---
You may also need to do this in IE:
Feature Gallery
Click on thumbnail for larger images
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
*
Re: [WSG] mysterious space
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
Re: [WSG] mysterious space
The space is *within* the border (ie padding), not outside it (ie margin). These margins allow the floated thumbnails to stay 5px from each other. Thanks anyway! Peter On 22/03/2004, at 1:50 PM, Maureen Beattie wrote: I am not sure Peter if this is what you mean but you have specified margin: 0; in .gallerygrid but in .gallerygrid .pic and .gallerygrid .piclast you have specified the margins as - margin: 0 5px 5px 0; and margin: 0 0 5px 0; and as the margin shortcut goes top right bottom left these rules add a 5px space at the bottom. 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
Re: [WSG] mysterious space
you said .. 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 am not sure Peter if this is what you mean but
you have specified margin: 0; in .gallerygrid but in .gallerygrid .pic and
.gallerygrid .piclast you have specified the margins as - margin: 0 5px 5px 0;
and margin: 0 0 5px 0; and as the margin shortcut goes top right bottom
left these rules add a 5px space at the bottom.
.gallerygrid .pic {
float: left;
width: 85px;
height: 85px;
margin: 0 5px 5px 0;
border: 1px solid #c1c3ce;
padding: 0;
}
.gallerygrid .piclast {
float: left;
width: 85px;
height: 85px;
margin: 0 0 5px 0;
border: 1px solid #c1c3ce;
padding: 0;
}HTH - Maureen
Re: [WSG] mysterious space
On Mar 21, 2004, at 6:20 PM, Universal Head wrote: 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 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
