CSS messed up in IE9, Mozilla & iPhone

fa_dy · 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 :wtf: )

And this is on iPhone's Safari browser.

Please help me guys, thanks.

fa_dy · 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.

Sign In

CSS messed up in IE9, Mozilla & iPhone

Recommended Posts

fa_dy

Link to comment

Share on other sites

fa_dy

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information