Firefox background image in header not fully visible

I am working on a website that has a header photo at the top, followed
by the company logo and tagline underneath. I have a border that wraps
around the entire content (header, 3 column divs), but the top right
of the border is an image, as it is curved.

I have currently set this top right curve as a background image in a
div, that wraps around the header div. My problem is that only part of
the curve is showing in both IE and Firefox. I have used the archives
here, and discovered that if I increase the padding on my header or
border wrapper divs, I can get the curve to appear in full.
But then the border is totally to the right of the page and is wonky.

I also removed the header photo 'staticBanner' and discovered that the
curve would then show in full. So I have 2 questions:

1. Why would a background image not show in full if there is a
foreground image (within a child div of the background image's div)?

2. Why does adding padding to the border's div correct the background
image problem, despite the correct height and widths being set?

(The mark up code for the header is shown below:

<body>
<!-- start of wrapper - displays curved part of border  -->
<div id="topCurvedBorder">
<!-- start of header area -->
<div id="header">
<img src="images/staticHomeBanner.gif" alt="Photograph montage showing
flats in Edinburgh" id="headerPhoto" />
<img src="images/logo.gif" alt="A Flat In Town logo" id="logo" /><p
id="tagline">Property Management and Letting Service</p>
</div>
<!-- end of top curved border div -->
</div>

And here is the CSS that goes with the above divs and ids:

/*
==================================================================================================
------------------------------------   Layout Divs */
#topCurvedBorder{ /* =for firefox */
background-image:url(../images/bg_border/100505_border/topRight.gif);
background-position:top right;
background-repeat:no-repeat;
border-left:1px solid #ccc;
margin:5px 10px -10px 5px;
width:845px;
height:279px;
}

#mainBodyBorder{ /* =for firefox */
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
margin:-10px 10px 0 5px;
width:843px;
}

* html body #topCurvedBorder{
background-image:url(../images/bg_border/100505_border/topRight.gif);
background-position:top right;
background-repeat:no-repeat;
border-left:1px solid #ccc;
float:left;
margin:10px 10px 0 5px;
width:845px;
height:1%;
}

#header { /* =for firefox */
margin:5px 0 0 5px;
padding:5px 0px 0 0;
border:0;
}

* html body #header {
margin:8px 5px 0 7px;
padding:5px 0px 0 0;
border:0;
}

/*
==================================================================================================
------------------------------------ images */
#logo {
float:left;
vertical-align:bottom;
margin:5px 20px 0 0;
display:block;
}

#headerPhoto {
display:block;
}
)

PS: Am I being longwinded by using * html body for IE?

All your comments would be much appreciated,

Kind regards,
Simone
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Firefox background image in header not fully visible

Sent by Simone Hutchinson on 10 May 2005 14:02