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 *
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. x-tad-bigger /x-tad-biggerUniversal 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
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 x-tad-bigger /x-tad-biggerUniversal 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 :
div class=gallerygrid
h1Feature Gallery/h1
h2Click on thumbnail for larger images/h2
span class=pica href=glry_feature01_01.htmlimg src=images/features/Tfeature01_01.jpg width=85
height=85 alt=/a/span
span class=pica href=glry_feature01_08.htmlimg src=images/features/Tfeature01_08.jpg width=85
height=85 alt=/a/span
span class=pica href=glry_feature01_09.htmlimg src=images/features/Tfeature01_09.jpg width=85
height=85 alt=/a/span
span class=piclasta href=glry_feature01_10.htmlimg src=images/features/Tfeature01_10.jpg width=85
height=85 alt=/a/span
div class=clearernbsp;/div
/div
Try this
div class=gallerygrid
h1Feature Gallery/h1
h2Click on thumbnail for larger images/h2
a href=glry_feature01_01.htmlimg src=images/features/Tfeature01_01.jpg width=85
height=85 alt=/a
a href=glry_feature01_08.htmlimg src=images/features/Tfeature01_08.jpg width=85
height=85 alt=/a
a href=glry_feature01_09.htmlimg src=images/features/Tfeature01_09.jpg width=85
height=85 alt=/a
a href=glry_feature01_10.htmlimg 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
h1Feature Gallery/h1
h2Click on thumbnail for larger images/h2
a href=glry_feature01_01.htmlimg src=images/features/Tfeature01_01.jpg width=85 height=85 alt=/aa href=glry_feature01_08.htmlimg src=images/features/Tfeature01_08.jpg width=85 height=85
alt=/aa href=glry_feature01_09.htmlimg src=images/features/Tfeature01_09.jpg width=85 height=85 alt=/aa href=glry_feature01_10.htmlimg 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
*
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
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 :
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
*
x-tad-bigger
/x-tad-biggerUniversal 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
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
*
