problems with background images in a div

[big_jimmi]

Hi guys

I hope you can help.

I have a small div called box, within the box I have a <h3> header and a <p> paragraph. I've put a background image (in css) on the bottom of the div (rounded corners) and a background image on the top of the <h3> (top corners).

My problem is that the bottom background image of the div goes above the top image if you get my meaning. This only happens in firefox though...

If you need any more info please let me know.

Many thanks in advance!

[Fotiman]

My problem is that the bottom background image of the div goes above the top image if you get my meaning.

I don't get your meaning. Could you post some code?

If this is your structure:

+- div id='box' -+ 
¦+- h3 ---------+¦ 
¦¦..............¦¦ 
¦+--------------+¦ 
¦+- p ----------+¦ 
¦¦,,,,,,,,,,,,,,¦¦ 
¦+--------------+¦ 
+----------------+ 

Then you should be able to apply a background image to box (aligned to the bottom) and a background image to h3 (aligned to the top), where box has no top padding and h3 has no top margin.

[big_jimmi]

Hi there - your image is spot on. The problem if I can try to explain better is, Im trying to get the box (div) to have curved corners. So i made a image in photoshop with rounded corners and chopped it in half. The top corners i applied as a background image for the h3 (top left no-repeat) tag and the bottom corners where applied to the div (bottom left no repeat)

The problem is that the top of the bottom image sticks out above the top image. Id post a link but I dont think you are allowed here.

Does that make it clearer? Its happening in every browser other than ie.

[SuzyUK]

try the code with background colors instead of images if it's visible with just colors then post the code for the box, the h3 and p

Suzy

[big_jimmi]

it looks like this...

__________________
¦ ¦ - this bit is the problem.
+- div id='box' -+
¦+- h3 ---------+¦
¦¦..............¦¦
¦+--------------+¦
¦+- p ----------+¦
¦¦,,,,,,,,,,,,,,¦¦
¦+--------------+¦
W----------------W

heres the code

<div id="botleftbox">
<h3 class="h3col">heading</h3>
<p class="pleftcol">blah blah blah</p>
</div>

.h3col
{
background:url(images/topcol.gif) no-repeat top left;
color:#d43947;
padding:6px 8px 4px 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
background-color: #FFFFFF;
}

.pleftcol
{
padding-left:5px;
padding-right:5px;
}

#botleftbox
{
width:213px;
float:left;
text-align: justify;
background:url(images/botcol.gif) no-repeat bottom left;
color:#FFFFFF;
background-color: #003399;
padding-bottom: 10px;

}

[big_jimmi]

¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ - this bit is the problem.
M- div id='box' -M
¦+- h3 ---------+¦
¦¦..............¦¦
¦+--------------+¦
¦+- p ----------+¦
¦¦,,,,,,,,,,,,,,¦¦
¦+--------------+¦
W----------------W

W = bottom corners
M top corners

the bit above you shouldnt be able to see - its the top of the image for the bottom corners. It has to be that big in case the user increases text size of the page

[SuzyUK]

FF is correct.. but that doesn't help does it ;)

it's the default margin on the h3. IE doesn't do default margins very well but if you explicitly specify a top margin on the h3 you will see IE does the same as FF.

anyway remove top margin and use top padding to give the h3 it's top spacing..

h3 {margin-top: 0; padding-top: to suit;}

Suzy

[big_jimmi]

Thanks Suzy that did the trick!

Cheers