fa_dy Posted May 17, 2012 Share Posted May 17, 2012 Hello guys, hope you are doing good. I urgently need your help at a point where I am stuck. I have created this form and applied some css to it. If I am viewing that form using Google Chrome, it looks perfectly fine but when I am viewing it using IE9 or Mozilla or viewing it on my iPhone, the whole border, button etc. gets messed up. Anybody knows how I can fix this so that it looks completely fine no matter if one is viewing it using any browser? The form can be viewed over here http://sigmalogistix.com/index3.php and this is the code: <html> <head> <title>Login - Sigma Logistics</title> <style type="text/css"> form { padding:5px 450px; } img { padding:20px 521px; } a:link { color:#43759b; text-decoration:underline; } a:visited { color:#43759b; text-decoration:underline; } a:hover { color:#43759b; text-decoration:underline; } a:active { color:#43759b; text-decoration:underline; } a.otherLink:link { color:#43759b; text-decoration:none; } a.otherLink:visited { color:#43759b; text-decoration:none; } a.otherLink:hover { color:#43759b; text-decoration:underline; } a.otherLink:active { color:#43759b; text-decoration:none; } label { width: 12.2em; float: left; text-align: right; margin-right: 0.5em; display: block } .submit input { margin-left: 10.5em; } input { color: #47596e; background: #fee3ad; border: 1px solid #47596e; margin-left: 3.6em } .submit input { color: #000; background: #ffa20f; border: 2px outset #d7b9c9 } fieldset { border: 2px solid #47596e; width: 21em -moz-box-shadow: 0px 5px 12px #cdd0cc; box-shadow: 0px 5px 12px #cdd0cc; } legend { color: black; background: #ffa20c; border: 2px solid #47596e; padding: 2px 6px } </style> </head> <img src="http://sigmalogistix.com/wp-content/uploads/2012/02/Untitled-22.png" /> <form action='login.php' method='POST'> <fieldset> <legend>Track & Trace</legend> <p><label for="username"><font face="Arial" size="2">Username</font></label> <br><input type="text" name="username" size="35" /></p> <p><label for="password"><font face="Arial" size="2">Password</font></label> <br><input type="password" name="password" size="35" /></p> <p class="submit"><input type="submit" value="Log in" /></p> <a href='http://www.sigmalogistix.com'>← <font size="2" face="Arial">Back to Sigma Logistics</font></a> </fieldset> </form> </html> This is how it looks when I view it using Google Chrome 19 (everything's perfect). This is how it looks when I view it using Firefox 12 (notice that the shadow behind the form is misaligned). This is how it looks when I view it using IE9 (everything's misaligned ) And this is on iPhone's Safari browser. Please help me guys, thanks. Quote Link to comment Share on other sites More sharing options...
fa_dy Posted May 18, 2012 Author Share Posted May 18, 2012 I have fixed it on IE9 but there are still some problems viewing it on Firefox 13 and Safari. Please help me. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.