Anonymous 0

Hello all, having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE 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 (also IE in general) compatibility.

<div id="credentials">
    <div id="credsheader"><div id="tr">&nbsp;</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">&nbsp;</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;
}

1 answer

danwellman 5600
0
points

IE6 can't display PNGs with alpha transparency natively, for background images you can use an MS filter:

div#bl{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src'images/bl.png'); etc... }

However, this will not work in other browsers so you need to either use a conditional comment for IE6:

<!-- [if IE 6] -->
  <style type="text/css">
    div#bl{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src'images/bl.png'); etc... }
  </style>
<![endif]-->

Once you have done this, you may have some positional styles to change as well, but this should get you started, and you can aways specify any IE-only positioning rules in the conditional comment :)

Answered over 7 years ago by danwellman
  • Thanks, I haven't had a chance to test in IE6 completely yet, but did hear about this. It did not, however, change my issue with the additional margin space in IE7. lush over 7 years ago
  • In your CSS you are specifying a negative margin for both the left and right edges, which could be the source of your margin problems with the button. Set the margin-left of the login buton to -12px danwellman over 7 years ago