IE glitch #999,999,001

I’m helping create the design for the customer service site a pharmaceutical company, and right now I’m mocking up the splash page. I have to stay within the guidelines of their overall company website (use their header and footer, keep navigation style the same), but I was playing with the login box. Everything is hunky-dorey in Firefox, but IE mucks it up.

firefox screenshot
Form Display in Firefox
IE screenshot
Form Display in IE

As you can see, the form elements are moved to the right in IE, despite how it is coded in both XHTML and CSS:

XHTML

<form>
<fieldset><legend>Login</legend>
username<br /><input name="username" type="text" tabindex="1" title="username" dir="ltr" value="" size="18" maxlength="24" />
login <br /><input name="pw" type="password" tabindex="2" title="password" value="" size="10" maxlength="10" />
</fieldset>
</form>

CSS


fieldset {
color:#CC0000;
font:0.7em arial,helvetica,sans-serif;
font-weight:bold;
width:60%;
}

I just can’t figure this one out – I’ve tried moving the
tags (which actually aren’t necessary and I’ll be removing anyway), changing size, removing parts, adding parts, but no change. I just can’t figure out what IE is doing here.

in other news…

• Congrats to Jody on winning Screen Grab Confab IV on Cameron Moll’s website. Way to go, Jody. I’m more than just a little jealous, by the way.

Facebooktwitter

Leave a Reply