Why is this span bold in every browser except Firefox?

Question

A page I am working on displays a span inside a div in bold sometimes, while in others it displays it unboldened with the same markup.

Good (Product Details is bold) - Screenshot

<div class=infoPanel><span>Product Details</span><br /><ul><li>7.7% APR for loans between &pound;7,500 to &pound;14,999 for up to 5 years</li><li>Available if you are a main FlexAccount customer</li><li>No obligation quotes</li><li>Quotes tailored to your individual circumstances and the amount you would like to borrow</li><li>Quick decision on your loan application</li><li>Between 1 and 7 years repayment terms available</li><li>A fixed rate for the term of your loan</li><li>No hidden fees or charges</li><li>For the first month no repayments have to be made</li></ul></div>

Bad (Product Details is NOT bold) - Screenshot

<div class=infoPanel><span>Product Details</span><br /><ul><li>Easy to apply and you will get a decision in minutes</li><li>Receive your cheque in 24 hours</li><li>Protect your personal loans against the things that worry you </li><li>Apply for an instant personal loan online today</li></ul></div>

The actual page is here.

This only happens in Firefox. In all other browsers, both instances of "Product Details" are bold. I don't see any surrounding parent HTML elements that could be affecting styling.

Any ideas why this would happen?

Answer 1

I checked it with FF 3.6.2 and noticed that even in that the second listing does not come out to be bold while third one does. It means there is some problem in your markup. Make sure you have specified the correct markup in all cases.

You may also try this css:

div.infoPanel span{
  font-weight:bold;
}

Answer 2

I've found the problem, but its not pretty. I don't know what Javascript voodoo you are using, but conjuring up code this bad takes some serious mojo.

<div style="position: absolute; z-index: 1010; left: -250px; top: 0px; width: 250px; visibility: hidden;" id="tOoLtIp032">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#666666" width="250" style="background: none repeat scroll 0% 0% rgb(102, 102, 102);"><tbody><tr><td><table cellspacing="2" cellpadding="5" border="0" width="100%">
<tbody><tr>
<td bgcolor="#ffffff" align="left" style="text-align: left; padding: 5px;"><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
</font>
<div class="infoPanel"><span>


<font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">Product Details</font>


</span><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
<br></font><ul><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
<li>7.7% APR for loans between £7,500 to £14,999 for up to 5 years</li><li>Available if you are a main FlexAccount customer</li>
<li>No obligation quotes</li>
<li>Quotes tailored to your individual circumstances and the amount you would like to borrow</li><li>Quick decision on your loan application</li>
<li>Between 1 and 7 years repayment terms available</li><li>A fixed rate for the term of your loan</li><li>No hidden fees or charges</li>
<li>For the first month no repayments have to be made</li></font></ul></div><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
</font></td></tr></tbody></table></td></tr></tbody></table></div>

Yup. That's how the tooltip box looks like in code. That would be two, I repeat, two nested tables generated by your evil script. Now the problem is pretty obvious: the span in question is wrapped in a font tag (shivers) with a font-weight: normal style attribute.

Now leave me alone while I contemplate what I've I done to deserve this. Shiver