Hello all, having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE7 troubles. Trying to avoid using conditional statements, but although I can get it displaying perfectly in Firefox 3.5, IE looks to be creating a larger margin on the right and left of my login button. It could be that I'm not structuring this the best way possible, so looking for a little insight from the community. Most of my problems began after trying to round to corners using the method shown. My goal is IE6/7 compatibility.
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}