Question

I have html nested like so

<div id="content">
    <div id="asection">
        <h1>Some Text</h1>
    </div>
</div>

With css properies as follows

h1 {
color:#873C62;
font-size:32px;
line-height:26px;
}

#asection {
width:430px;
height:100%;
color:#666666;
font-size:12px;
line-height:17px;
}

#content {
width:968px;
clear:both;
padding:30px;
height:1%; overflow:hidden; 
}

This displays as intended in all browsers except Internet Explorer 7/8

I’m still getting the hang of CSS and browser compatibility so any extra eyes/expertise is greatly appreciated. Thank you!

EDIT:
I made a property

#asection .h1 {} 

and put the same things from the original h1 and it worked.
I corrected a typo I made with h1 and h7 as well, that was my mistake when i was trying to make my markup generic.

Answer 1

no need for the . just put a space before h1 the dot points to a class and unless you have a class named h1 i.e. class="h1" then this will not work as intended,

so if you are trying to target the h1 within #asection here’s the code:

#asection h1 {}