Why 3 images have spaces between? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

spinningjennie -> 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



Spooky -> RE: Why 3 images have spaces between? (3/21/2007 7:31:23)

Just a theory, try removing the white space so the images are all on one line of code?



jaybee -> RE: Why 3 images have spaces between? (3/21/2007 7:45:34)

That works or

.tabpicbot img {
margin:0;
padding:0;
float:left;
}



Donkey -> RE: Why 3 images have spaces between? (3/21/2007 8:48:27)

or the alternative using marginally less css 

.tabpicbot img	{
	margin:0 -4px 0 0;
	padding:0;
}



jaybee -> RE: Why 3 images have spaces between? (3/21/2007 10:12:10)

Float left is better as the browser will adjust itself.



Donkey -> RE: Why 3 images have spaces between? (3/22/2007 7:05:49)

But in this case its a fixed-size layout, so the browser doesn't have to adjust does it?



jaybee -> RE: Why 3 images have spaces between? (3/22/2007 7:20:40)

No but individual browsers render things slightly differently so if you let the browser handle it there's less chance of it screwing your fixed sizes up.



spinningjennie -> 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



pageoneresults -> RE: Why 3 images have spaces between? (4/4/2007 17:44:26) 

img{display:block;}

Your DOCTYPE will determine what happens with that space.



spinningjennie -> 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




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375