Question

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;
}

Answer 1

Got acceptable margins, but still not perfect cross browser. Just spent time manipulating margin sizes in pixels until it didn’t look terrible.