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 about 10 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 about 10 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 about 10 years ago