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.
![form display in Firefox firefox screenshot](http://www.martytdx.com/design/blog/posts/form_firefox.jpg)
Form Display in Firefox
![form display in IE IE screenshot](http://www.martytdx.com/design/blog/posts/form_ie.jpg)
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.
![Share on Facebook Facebook](http://www.martytdx.com/zealot/wp-content/plugins/social-media-feather/synved-social/image/social/regular/96x96/facebook.png)
![Share on Twitter twitter](http://www.martytdx.com/zealot/wp-content/plugins/social-media-feather/synved-social/image/social/regular/96x96/twitter.png)