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’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