|
| |
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
 |
Why 3 images have spaces between? - 3/21/2007 7:19:37
Why do I get a space between each of my 3 images, which I've attempted to place in a single line without any spaces between (with zero margin and padding)? (I've tested in IE6 and Firefox). Also there seems to be a little space beneath each image above the footer which I'd rather not have.
This is the sample page.
This is the stylesheet.
Background to question:
1. Using XHTML 1.0 strict.
2. The 3 images, within the span class of tabpicbot, have margin and padding as zero. (style applied to .tabpicbot and .tabpicbot img)
3. I don't have this space between images problem when I put the images into the cells of a table and have cellpadding and cellspacing as zero. However, the problem of using a table is that in IE6, the table gets pushed down below the end of the sidebar content (question previously raised by me in another question but no answers).
Any inspiration much appreciated!
Regards,
spinningjennie
< Message edited by spinningjennie -- 3/21/2007 7:28:25 >
|
|
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
|
RE: Why 3 images have spaces between? - 3/22/2007 18:06:47
Many thanks Spooky, Jaybee and Donkey,
I tested the 3 methods and Jaybee's float:left method for the images seems to have given me the best result in IE6 and Firefox, though the others were close.
Results of 3 methods on testing:
1. Spooky suggestion of putting all image code on one line:
i)In FF space between images disappeared as desired but a little space remained beneath the images and above footer
ii)In IE6 space between images disappeared but not all images fitted on the 1 'row'
2. Donkey suggestion of having a right margin of negative 4 px on the images:
i)In FF space between images disappeared and images fitted in 1 'row' but a little unwanted space remained beneath images and above footer
ii)In IE6 - same result as for FF
3. Jaybee suggestion of left float on images:
i) In both FF and IE6 the space between images disappeared as required.
ii) In IE6 only, the blue 'stripe' at the bottom of the sidebar then disappeared (ok in FF). I solved this by left floating the #contentandsidebar div that contained the left floated .tabpicbot img
To all, thanks a lot! This is a great relief!
spinningjennie
| |
|
|
|
spinningjennie
Posts: 309
Joined: 2/20/2002
From:
Status: offline
|
RE: Why 3 images have spaces between? - 4/11/2007 8:47:14
Thanks for your thoughts pageoneresults. I'm afraid however that my explorations with this approach haven't got me anywhere.
As an exploratory exercise I changed the doctype to transitional, and changed the stylesheet to include the .tabpicbot img {display:block;} but the image spaces didn't disappear in IE6 until I went back to using the float:left; on the images.
Thanks anyway.
spinningjennie
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
k¥ 
