CODEWITHSUNDEEP
htmlcssinternet-explorercss-selectors
Ryan
Ryan

Reputation: 1395

CSS class not being applied at all in IE7-8

<!DOCTYPE html> has been set, and html5shim.js has been included in the <head> of each page.

I have the CSS:

.height_fix_container > * { margin:0; background:#fff url(../images/bg.jpg) top left no-repeat; min-height: 400px; }
.height_fix_container > *:first-child { background:#fff; } /*Good eye! But the problem still exists*/

...being applied to this code in the middle of the page:

...
<div class="height_fix_container">
    <div>Content box 1</div>
    <div>Content box 2</div>
</div>
...

In every browser other than IE7 and 8, the CSS selectors work great. However, in IE Content box 1 recognizes the selector but Content box 2 completely ignores it. I'm checking this with the built in Developer Tools in IE.

Why might this be happening?

Upvotes: 0

Views: 1288

Answers (4)

Victor
Victor

Reputation: 3818

http://jsfiddle.net/a256R/ - similar selectors - work in IE7 and IE8 (first div is green, second is red). Problem is somewhere else (background image url, other rules etc.).

Upvotes: 0

Cory Danielson
Cory Danielson

Reputation: 14501

In IE you need to have a DOCTYPE declared in order for it to recognize the first-child selector.

<!DOCTYPE .......>

You're also missing a # infront of the 'fff' in the second class definition. It doesn't affect the code at all, just a syntactical edit.

http://www.w3schools.com/cssref/sel_firstchild.asp

Upvotes: 3

thirtydot
thirtydot

Reputation: 228162

Your page is being displayed in Quirks Mode. Your description and CSS is making me quite certain.

The most likely cause is that you don't have a valid doctype as the very first line. Add this:

<!DOCTYPE html>

If you do already have a doctype, there are other things can cause Quirks Mode.

Once you fix this, background:fff will no longer work. You need background:#fff. The # is important.

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

IE7 is very particular with :first-child and might be choking on the * before it.

Perhaps you can add another style to the sheet:

 .height_fix_container > div:first-child { background:#fff; }

Untested

Upvotes: 1

Related Questions