I hope somebody can help me...

While making resizable box with background image and two pictures on the top and the bottom of the box I can't get rid of a piece of the background at the bottom of the box. There is no padding at the bottom and I don't know what could cause this problem.

Could anyone advise what to do with it?

P.S. Sorry for bad english

Can you post a link to the page in question, or your HTML/CSS? Without seeing these, there is no way to see how we can help

Can you post a link to the page in question, or your HTML/CSS? Without seeing these, there is no way to see how we can help

Link to the page is: www.vanklikmedia.co.uk . After I changed the height of the bottom picture in Dreamweaver the problem disappeared in IE but it is still there in Firefox.

HTML:

<div id="packages">
<img src="img/box_top.gif" alt="packages" height="55" width="255">
<p class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel pede a risus auctor accumsan. Sed posuere tellus.</p>
<img src="img/box_bottom.gif" alt="packages" height="65" width="255" style="margin-bottom:0; padding-bottom: 0;"></div>

CSS:

div#packages {
width: 255px;
background-image: url(img/bg_box.gif);
background-repeat: repeat-y;
float: right;
margin: 20px;
}
p.box {
margin: 0px 35px;
text-align: justify;
}

 

Thanks!

It's caused by the bottom image. In FF and I think IE, there is an automatic margin underneath images or so I have experienced. You would be better of placing divs at the top and bottom and setting the images as backgrounds in the CSS.

 

For example:

 

<div id="package">
<div class="top"></div>
<div class="content">
Blah blah content here
</div>
<div class="bottom"></div>
</div>

#package {
background: url('img/bg_box.gif') repeat-y;
float: right;
margin: 20px;
width: 255px;
}
#package .top {
background: url('img/box_top.gif') no-repeat;
height: 55px;
}
#package .content {
padding: 0 10px;
}
#package .bottom {
background: url('img/box_bottom.gif') no-repeat;
height: 65px;
}

Give it a try,

Dan

It worked for me. Thank you!!!