Unwanted space between img's

Unwanted space wont go away cant find whats causing it

[darcbar]

I have a problem thats baffeled me, i have a floated container, in that container i have two boxes, with each box split in three- head,body and footer all with bckgnd img, centre img repeat.
Between these two boxes i have placed a 2px high jpeg as a divider.
But a space above the jpeg, between the jpeg and foot of
box above it keeps appearing.

Its about 5-8px and is only above the jpeg, so it doesnt affect the boxhead below it, when the jpeg is removed there is no space at all i.e thebox foot meets with the box head below it (as i havent applied any marg or padd)

So its obviously the jpeg thats causing it, i cant find any other style that would be affecting it, and have tried bieng very specific with the jpeg's style (the jpeg's .class style)

It also does exactly the same thing in another float container, floated to the opposite side.

I have tried negative margin on the foot of the box which does pull the jpeg up but id rather find out why this is happening in the first place and correct whatever that is.

I understand you may need to look at the html/css but as a newbie i wouldnt know where to display it other than placing the whole doc/s in a message, if there is a temporary place somewhere on the web i could upload it
a quick how to would be appreciated.

?.?.? Thanks ....

[simonuk]

Without seeing the code it is hard to say why. It is possible you have floated and non-floated elements which are conflicting. Likewise you may be pulling in paddings a margins from other elements.

Without seeing the code my best advice is get the FireBug plugin for FireFox and highlight the bit giving you the problems and this will instantly show you the culprit.

[swa66]

How to reduce a problem to minimal code that can be posted is in the pinned posts on top of the forum.

An easy way to see where an element is and see how large it is, is to add an outline to it (outlines take up no space).
I typically use the tools from web developer add-on in firefox to see outlines interactively when I get confused.

[darcbar]

Ive just downloaded the firebug add-on and highlighted the areas where the problem is but its not showing a highlight from either elements in the space thats not wanted, which im guessing means neither elements have taken padd or marg of another element.

Im going to post my code below,

P.s i have also added two of the same jpeg dividers to my H1 one above and one below, the same thing occurs, there is space added above the jpegs only, the centre is not flooated obvi ? ? ?

[darcbar]

HTML

<- .....LEFT FLOAT..... ->

<div class="lft_cntnt_flt">
<div class="reason_lst">
<p class="lft_flt_hd">Learn To Drive</p>

<div class="lft_flt_cntr_cntnt">
<ul><li class="tp_li_mrgn_lss">content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li><li>content</li><li>content</li><li>content</li><li>content</li></ul>
</div>

<div class="lft_flt_ft"></div>

</div>

<-.....PROBLEM JPEG.....->

<img class="smll_div_lft_flt" src="graphics/divider.JPG" width="156" height="2" alt="divider image" />

<-....PROBLEM JPEG END.....->

<img class="map" src="graphics/left_sidebar_graphs/main_area_map.PNG" width="195" height="255" alt="Covering Newbury and surrounding areas" />

</div>

<-.....LEFT FLOAT END.....->

<-.....RIGHT FLOAT.....->

<div class="rgt_cntnt_flt">
<p class="rgt_flt_hd"> content</p>
<div class="rgt_flt_cntnt_bx_cntr">
<p class="contact_name_bold">content</p>
<p class="contact_details"></p>
<p class="contact_email">content</p>
</div>
<div class="rgt_flt_ft"></div>

<-.....PROBLEM JPEG.....->

<img class="smll_dv_rgt_flt" src="graphics/divider.JPG" width="156" height="2" alt="divider image" />

<-.....PROBLEM JPEG END.....->

<p class="rgt_flt_hd"></p>
<div class="rgt_flt_cntnt_bx_cntr">
<p class="testa_coms_top"></p>
<p class="testa_coms">content</p>
<p class="testa_coms_name">content</p>
</div>
<div class="rgt_flt_ft"></div>

<-.....PROBLEM JPEG.....->

<img class="smll_dv_rgt_flt" src="graphics/divider.JPG" width="156" height="2" alt="divider image" />

<-.....PROBLEM JPEG END.....->

<p class="rgt_flt_hd">content</p>
<div class="rgt_flt_cntnt_bx_cntr">
<p class="testa_coms_top">content</p>
<p class="testa_coms">content</p>
<p class="testa_coms_name">content</p>
</div>
<div class="rgt_flt_ft"></div>
</div>

<-.....RIGHT FLOAT END.....->

<-.....CENTRE CONTENT.....->

<div class="cntr_cntnt">

<-.....PROBLEM JPEG.....->

<img class="bg_dv" src="graphics/big_divider.JPG" alt="" width="382" height="2" />

<-.....PROBLEM JPEG END.....->

<h1>content</h1>

<-.....PROBLEM JPEG.....->

<img class="bg_dv" src="graphics/big_divider.JPG" alt="" width="382" height="2" />

<-.....PROBLEM JPEG END.....->

<h2 >content</h2>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt">content</p>
<p class="ctre_cntnt"> content.</p>
<p class="ctre_cntnt">content</p>

</div>

<-.....CENTRE CONTENT END.....->

CSS
*/.....LEFT FLOAT....../*

.lft_cntnt_flt {
float:left;
width:207px;
clear:left;
margin:8px 0 0 3px;
}
.reason_lst .lft_flt_hd {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #F00;
background-image:url(../graphics/left_sidebar_graphs/box_head.PNG);
text-align: center;
width: 207px;
padding: 4px 0 5px 1px;
margin: 2px 0 0 0;
font-weight: bold;
}
.reason_lst .lft_flt_ft {
height: 31px;
width: 207px;
background-image:url(../graphics/left_sidebar_graphs/box_foot.PNG);
}
.lft_flt_cntr_cntnt {
background-image:url(../graphics/left_sidebar_graphs/box_centre.PNG);
background-repeat:repeat;
width: 207px;
}
.reason_lst ul {
list-style-type: circle;
padding: 8px 15px 0 30px;
font-family: Verdana, Geneva, sans-serif;
font-size: 9pt;
}
.reason_lst li {
padding: 8px 0 0 0;

}
.reason_lst .tp_li_mrgn_lss {
padding: 0;
}
.map {
margin: 2px 0 0 6px;
}
.smll_div_lft_flt {
padding-left: 25px;
margin: 0;

}

*/.....LEFT FLOAT END....../*

*/.....RIGHT FLOAT....../*

.windmirror_img {
float: right;
margin-top: -2px;
}
.rgt_cntnt_flt {
margin: 8px 3px 0 0 ;
width: 261px;
float: right;
clear: right;
}
.rgt_flt_hd {
width: 121px;
background-image:url(../graphics/right_sidebar_boxes/contact_card_head.PNG);
padding: 3px 95px 4px 45px;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight:bold;
color:#F00;
}
.rgt_flt_ft {
height: 23px;
width: 261px;
background-image: url(../graphics/right_sidebar_boxes/contact_card_footer.PNG);
background-repeat: no-repeat;
margin:0;
}
.rgt_flt_cntnt_bx_cntr {
width: 261px;
background-image:url(../graphics/right_sidebar_boxes/rgt_flt_bx_cntr.JPG);
}

.contact_name_bold {
padding: 10px 0 0 50px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9pt;
}
.contact_details {
padding: 5px 0 0 49px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9pt;
}
.contact_email {
padding: 5px 0 0 16px;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.testa_coms_name {
padding :10px 0 0 107px;
font-weight: bolder;
font-style: italic;
font-size: 9pt;
}
.testa_coms_top {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 10pt;
font-style: italic;
width: 208px;
padding: 7px 35px 0 18px;
text-align: center;
}
.testa_coms {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 10pt;
font-style: italic;
width: 208px;
padding: 7px 35px 0 18px;
text-align: center;
}
.smll_dv_rgt_flt {
padding-left: 50px;

}

*/.....RIGHT FLOAT END....../*

*/.....CENTRE CONTENT....../*

.theory_banner {
float: left;
margin-top: 10px;
}

.cntr_cntnt {
margin-right: 275px;
margin-bottom: 0px;
margin-left: 218px;
background-repeat: no-repeat;
background-image:url(../graphics/centre_content_main_bckgrd.PNG);
width: 446px;
margin-top: 97px;
}
h1 {
font-weight: bold;
text-align: center;
padding: 8px 20px 0 20px;
width: 406px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;

}
h2 {padding: 4px 20px 0 20px;
width: 406px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
text-align:center;

}
.ctre_cntnt {
padding: 8px 20px 0 20px;
width: 406px;
list-style:none;
font-weight:normal;
}
.caps_hd {
font-weight:normal;
text-transform: uppercase;
font-weight:bold;
}
.cntnt_dent_hds {
text-align:left;
padding-top:18px;
}
.cntre_algn_8pt_bold{
font-size:11pt;
font-weight:bold;
text-align:center;
padding: 12px 20px 8px 20px
}
.ctre_cntnt_top_para {
padding: 20px 20px 0 20px;
}
.bg_dv {
width:382px;
padding:0 32px 0 32px;
}

*/.....CENTRE CONTENT END....../*