Everything on my webpage looks great in Safari, Chrome, Firefox, and even degrades gracefully in IE8. However, my client insists on compatibility with IE7 as well.
The only issue I'm facing is with my H3 element. Oddly enough, my H2 works perfectly fine. It's not a matter of losing style; the H3 just doesn't appear at all! Despite trying various solutions like adding zoom:1, the problem persists. My theory is that it might be related to the nested divs...
I've experimented with different doctypes without success:
<!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), with a section provided below: http://jsfiddle.net/cathi/2Kkh2/18/ (strangely, it seems to function properly here - unfortunately unable to access jsfiddle on the machine running IE7. Strange...)
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 structure (reproduced partially):
<div class="content-intro">
<h2>This is where my functioning H2 resides in IE7</h2>
<p>An introductory paragraph goes here</p>
</div>
<div class="content-checklists">