CSS Help, Probably Really Obvious

MeatProduct

Hi Folks,

I must say I'm a bit at a loss as to what to do here. I've got a div with 3 images in it (vertically), there should be no spacing between them, however, there is a spacing of 5px between them and this is messing up the layout.

<div id="preface-right">
<img src="images/image1.jpg"/>
<img src="images/image2.jpg"/>
<img src="images/image3.jpg"/>
</div>

#preface-right {
float: left;
height: 298px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 183px;
}

Greatly appreciate any help,

Nick

tricky D

Might be trailing whitespace which would be fixed by changing the image calls to this:

<img src="images/image1.jpg"/><img src="images/image2.jpg"/><img src="images/image3.jpg"/>

Else you can do negative margin-bottoms
margin-bottom: -5px;

MeatProduct

Tricky,

Thank you for your advice. Unfortunately it didn't work but you got me thinking. I made 3 new divs, within the parent div, and put one image in each. That way I though I could use your margin-bottom: -5px trick. However they all aligned perfectly once they had their own divs without the need for any margins.

Would like to know why there were spaces in the first example though.

All the best,

Nick

<div id="preface-right">

<div id="preface-right1">
<img src="themes/acquia_slate/images/5-reasons.jpg" alt="Five Reasons to buy a Holistic House Plan"/>
</div>
<div id="preface-right2">
<img src="themes/acquia_slate/images/house-plans-video.jpg" alt="Video of House Plans"/>
</div>
<div id="preface-right3">
<img src="themes/acquia_slate/images/build-cost.jpg" alt="Cost to build our house plans"/>
</div>

</div>

#preface-right {
float: left;
height: 298px;
width: 183px;
}

#preface-right1 {
float: left;
height: 99px;
width: 183px;
}

#preface-right2 {
float: left;
height: 99px;
width: 183px;
}

#preface-right3 {
float: left;
height: 100px;
width: 183px;
}

herya

What's your doctype? XHTML strict may cause this as it treats images differently.

MC_G

What is the css for the images?

maybe

img.prefaceright {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

tricky D

The carriage return can behave like a space.

The margin-bottom would apply to the img as opposed to the container
#preface-right img {margin-bottom: -5px; etc}

MeatProduct

herya wrote: »

What's your doctype? XHTML strict may cause this as it treats images differently.

It is indeed XHTML 1.0 Strict. That must be it then. Good to know, thank you.

Nick

MeatProduct

tricky D wrote: »

The carriage return can behave like a space.

The margin-bottom would apply to the img as opposed to the container
#preface-right img {margin-bottom: -5px; etc}

Got it, I should done that right away, wasn't thinking.

Thank you,

Nick