IE7 Problem with sIFR when <br> is inside an H3

Question

I have a problem I just discovered when viewing certain pages in IE7. If I have a very long header that wraps to a second line, or worse, if I put a BR in the middle, that throws off the spacing.

One page to look at:

broken example1

You'll notice that the margin at the top of the page gets offset as the headings are rendered, throwing everything off.

I'm using code like this:

<h3 style="margin:0"><a href="../books/msc1.html">Middle School Confidential™<br>
Book 1: Be Confident in Who You Are</a></h3>

but repeated many times to exaggerate the problem.

I tried another test where I removed the BR and let the lines wrap naturally. This is an improvement in terms of the spacing, but it doesn't fix the problem. (Same URL but make it m1.html)

In the third example, each heading takes up only one line (m2.html)

One option would be to just split up the heading onto two lines, each with its on H tags. But since these are links, then it will appear that the first line might go to one place, and the second to another, since they wouldn't change color simultaneously as you roll over them.

So, any solutions to this?

I believe I have the current version of sIFR 3. I don't want to upgrade to IE8 until I know this is resolved.

Thanks!

Answer 1

I would guess that the issues come from IE7 not handling the relative sizing of your fonts.

try changing your css from:

.sIFR-active H3
{
 font-size: 140%;
}

and override the relative font-size and line-height with static values such as:

.sIFR-active H3
{
 font-size: 18px;
 line-height:;
}

hope that points you in the right direction.