IE9 is wrapping text and ignoring font styles

[marjwyatt]

I've spent the last couple of days rendering a PSD to WordPress and thought that i was done but my client, who uses IE9 (gasp) has noticed differences in the layout that I'm not seeing in Chrome, Firefox 13, Opera 21, IE8, or Safari.

The link is here
http://www.simplestepstowellness.com

The problem is with the optin form on the right middle of the page. I started with an Aweber form and laid in styles to force the positioning. Nothing too elegant ... just padding and margins.

What I can't figure out is why IE9 is forcing a larger font size that is subsequently causing the text beside the check boxes to wrap. I also can't figure out why the on focus text in the form is times roman when the default styles for the site are san serif.

I'm unable to install IE9 on my computer as it is not a 64-bit machine so this is a bit of a quandary. I've never run into this problem with any other site.

I did find this link that seems to suggest a solution:
http://requiem4adream.wordpress.com/2011/11/13/ie9-only-css-hack/

Has anyone got a solution for this?

[jimiimpact]

You have given the font-size:13 px in the below class
#af-form-456490189 . af-body label.choice-education-link

remove the font-size:13px; or make it 12px

It is overwrite in the other browsers but ie is taking. That's why the font is coming in two lines.

[jscheuer1]

That's right, and it's also two others (from the on page styles, scroll the code block to see them):


#af-form-456490189 .af-body label.choice-coaching-link{color:#333333;text-decoration:none;margin-top: -3px; padding: 0 0 3px 1px; font-family: 'Cabin Condensed', sans-serif; font-size: 13px; font-weight: 500;}
#af-form-456490189 .af-body label.choice-education-link{color:#333333;text-decoration:none;margin-top: -2px; padding: 0 0 3px 0px; font-family: 'Cabin Condensed', sans-serif; font-size: 13px; font-weight: 500;}
#af-form-456490189 .af-body label.choice-terms-link{color:#333333;text-decoration:none;margin-top: -2px; padding: 0 0 3px 0px; font-family: 'Cabin Condensed', sans-serif; font-size: 13px; font-weight: 500;}

[marjwyatt]

Thanks John! That did the trick.

I wonder why that declaration was ignored it 5 other browsers? (rofl)

[jscheuer1]

Hard to say, and harder still now that it's fixed. I would speculate though that in the browser's that rendered it the way you wanted the:

element.classname

selector isn't as dominant as the

id classname

selector.

In any case this or some other subtlety of CSS cascading/precedence/dominance is most likely responsible. And if it is, I'm not certain which browser is doing it right, though likely the majority probably are.