My H3 wont display its background color in IE ...

An easy problem to solve...but I can't

[nightva]

Hi all

Why would the following code display correctly in every browser but IE flavors?

#wrapper #thirdTierContent h3 {
margin:0;
color:#FFFFFF;
padding-left:5px;
padding-top:3px;
padding-bottom:5px;
font-size:15px;
border-right:1px solid #FFF;
background-color: #405082;}

It should make the text white with a darkish blue background. Used in IE only the white text appears but no background. Hopefully it's something simple.

Thanks for the help.
Nathan

[bedlam]

Hiya,

It works for me. Maybe a silly question, but does your html look something like this:

<div id="wrapper">
<div id="thirdTierContent">
<h3>Header!</h3>
</div>
</div>

...because according to your css (the "#wrapper #thirdTierContent h3" part), <h3> will only display this way inside the two <div> (or other block-level element, I just assume you're using <div>s).

If you changed it to be like this:

#wrapper #thirdTierContent h3,h3

...then all <h3> will display that way...

-B

[nightva]

Well I gave your suggestion a shot but it still wont display in IE. Yes the divs are arranged like that, basically.

You say you tested it in IE and it worked? I don't understand why it won't work for me.

I've checked my code repeatedly (I wrote the CSS about 3 months ago and I still have the problem) to see if anything further along in the code states something opposite to the first rule. Nothing is doing that.

Besides it displays correctly in ALL other browsers.

Is there anything I can give you to help figure it out?

Thanks again.
Nathan

[MatthewHSE]

From what you've said so far, I'd say the problem is something extremely simple, possibly a nesting error or just an oversight. (No offense, we all do it from time to time.) Why don't you post your HTML as well as the stylesheet rule? That way we can all see exactly what's going on.

[bedlam]

Is there anything I can give you to help figure it out?

Well, you might be sure to run both your html and your css through the w3c's html validator [validator.w3.org] and css validator [jigsaw.w3.org] - they help find a lot of simple problems like typos, unclosed and improperly nested tags etc...

But, just as a quick check to satisfy yourself about the css and html I posted above, create a quick html document with just that stuff in it and test it in IE.

-B

[Bonusbana]

It might be a caching problem, clear all cache and offline content and/or rename your stylesheet and try again.

Also, this doesnt have any real effect, but you can make your css more effective by changing it to:

#wrapper #thirdTierContent h3 {
margin:0;
color:#fff;
padding: 3px 0 5px 5px;
font-size:15px;
border-right: 1px solid #FFF;
background: #405082;
}

Try adding a line-height as well, if you didnt do that in any of the parents.