My page looks great in safari, chrome, ff, and degrades gracefully in IE8, but my client requires IE7 as well.
The one little thing that isnt' working is my H3. Strangely, my H2 works fine. It's not a matter of losing style, which seems to be a more common issue seen; the H3 just doesn't show up at all! I've researched this a good bit and tried many things I've seen recommended for missing styles (including the zoom:1), but I haven't been able to fix this issue. My best guess is it has something to do with the nested divs...
I've also tried various doctypes, to no avail...including:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
Here's my fiddle (with more complete code), along with a portion below: http://jsfiddle.net/cathi/2Kkh2/18/ (of course it seems to work fine here - can't bring up jsfiddle on the machine with IE7 here. hmm...)
h2 {
color:#007cc0;
font-size:1.4em;
line-height:1.9em;
font-family:'Tahoma',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-left: 35px;
padding-right: 8px;
padding-bottom:0;
font-weight:normal;
}
h3 {
color:#ea752e;
font-size:1.4em;
line-height:1.9em;
font-family:'Tahoma',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0px;
padding-top:0;
padding-left: 35px;
padding-right: 8px;
padding-bottom:0;
font-weight:normal;
}
and, the html (copying some, but not nec all of the divs)
<div class="content-intro">
<h2>Here is my H2 that shows up fine in IE7</h2>
<p>A paragraph of intro copy here</p>
</div>
<div class="content-checklists">