I'm currently working on implementing rounded corners in a login form for the first time. Right now, I am focusing on getting the layout correct, but I've run into some issues with IE7. I'm trying to avoid using conditional statements and while I can get the form to display perfectly in Firefox 3.5, Internet Explorer seems to be adding a larger margin on the right and left of my login button. I suspect that my structure might not be the most efficient, so I'm seeking some advice from the community. The problems started when I attempted to round the corners using the method shown. My ultimate goal is to achieve compatibility with IE6/7.
<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;
}