White spaces between sliced background images

[judithm]

Hi! I am using 3 background images for a website. The one in the middle is enlarging in height as the content is long or not. There is a white space appearing in Safari and Firefox but not in IE between my images. Here is the link : Charlotte en fête

And here is my CSS :

#ColRightWrapper {
margin: 0px;
padding: 0px;
height: 100%;
}

#ColRight {
background: url(images/fond_ColRight_02.gif) repeat top;
width: 517px;
margin: 0px;
padding: 0;
top: 0px;
}
#ColRightBottom {
background: url(images/fond_ColRight_03.gif) no-repeat;
width: 517px;
margin: 0px;
padding: 0px;
text-align: center;
height: 48px;
#ColRightTop {
background: url(images/fond_ColRight_01.gif) no-repeat bottom;
height: 45px;
width: 517px;
margin: 0px;
padding: 0px;
}

#ColRightTop, #ColRight, #ColRightBottom {
margin: 0px;
padding: 0px;
}


Thanks for helping

Judithm

[sands]

Just add:

float:left;

to both #ColRight and #ColRightBottom.

[judithm]

That simple Thanks Sands.

Can you explain to me why it fixes my problem.

Judithm

[sands]

Originally Posted by judithm

That simple Thanks Sands.

Can you explain to me why it fixes my problem.

Judithm

Just the way browsers interpret code. To know more about the Float Property check out these links:
Using CSS Floats for Layout - Understanding CSS Float
Does CSS float?