My HTML is structured like this:
<div id="content">
<div id="asection">
<h1>Some Text</h1>
</div>
</div>
The CSS properties I'm using are 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 setup works correctly in most browsers, except for Internet Explorer 7/8.
I'm still learning about CSS and browser compatibility, so any additional feedback or expertise would be greatly appreciated. Thank you!
EDIT: I added a property
#asection .h1 {}
and copied the same styles from the original h1 declaration, which resolved the issue. I also fixed a typo where I mistakenly used h7 instead of h1, that was my error when trying to keep my markup generic.