Css Background disappearing on certain block elements

css, background, disappear

[greenbingo]

Hey All,

I'm building a purely css laid out site, and for some reason I cannot figure or find out why the background will not display on a certain heading tag in the body of text.

I've tried applying backgrounds and borders and the bugger will still not display anything besides the text. However, further down the page the same element will work fine. Even if I place some open p tags (without bg) before it it works fine, but not as the first element in the div.

Heres a snippet of the html:
<div id="container">
<div id="pageHeader"></div>
<div id="header"></div>
<div id="utilLink"></div>
<div id="copySection">
<div id="explanation"><h1>Web Hosting <!-- this one--></h1>
<p id="openP"> ..etc.

Any suggestions?

[cmatcme]

You're trying to display background using css but sometimes it works and other times it doesn't. Yes?

Can we see your css and the part of the body where the css does work.

cmatcme

[greenbingo]

Thanks for your reply cmatcme,

Yes, the background wont appear on the first heading element of the explanation div. The backgrounds wont work whether its an image, solid colour, etc. In fact a border wont work either. The text itself still appears fine

to continue the code onward,
<p id="openP">Lorem Ipsum...
<h1>Next heading - which works fine</h1>

Maybe the CSS might help, excuse thats its a bit rough, but its a work in progress.

h1 {
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:15px;
color:#098703;
margin: 0px 6px 0px 4px;
padding: 0px 0px 0px 6px;
background-color: #FFFFFF;
}

#container {
margin:0 0 0 45px;
background:#FFF url(_img/bg_container.gif) repeat-y top left;
width: 552px!important;
width /**/:552px; /* IE5/Win */
padding:0 0px;
position:relative;
font-size:110%;
}

#pageHeader {
width:552px;
height:84px;
background:#FFF url(_img/header.gif) no-repeat top left;
}

#header{
position:relative;
top:0;
left:0;
height:126px;
width:552px;
background:#ffffff url(_img/bg_header.gif) no-repeat top left;}

#copySection {
margin-right:146px;
padding:0px 10px 0px 10px;
}

#utilLink{
width:100px;
position:absolute;
top:80px;
left:400px;
margin: 0px;
padding-top: 25px;
padding-left: 32px;
}

Any thoughts?

[cmatcme]

The p part doesn't work. Yes?

<p id="openP">Lorem Ipsum...

Try <p name="openP">. Your <h1> tags should work fine.

cmatcme

I can't find openP in your css document. Could that be it? ;)?

[greenbingo]

Thanks cmatcme,

But the openP paragraph isnt the problem in this case, that works fine.. where the problem lies is with the first element inside the explanation div the background will not be displayed (in IE only).

One thought I had was that it could be something to do with the height of the divs above interfering with the bg due to an overlap, but Im not sure whether I have eliminated that possibility with the aforementioned css.

On a side note, an absolutley posisitoned div eliminates this problem, but is not what i would consider ideal.

Cheers.