Help with CSS for IE6

My site looks bad in IE6, but fine in Firefox. It seems to affect the images and boxes I have made in css.

In Firefox it looks great, "Rounded Box" and no issues but in IE6 it comes out square and is not aligned!! Plus the forms I have also come out square and the background images are gone.

td.login_bar {
    border-radius:10px;
    border:solid 1px #666;
    padding:10px;
    background-color:#efefef;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.join_input {
    border:solid 1px #CCC;
    padding:5px;
    width:250px;
    font-size:14px;
    color:#999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
}
.join_input:focus {
    border:solid 1px #666;
    font-weight:bold;
    background-image:url(../imgs/edit_small_ico.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:25px;
}

So what do I 开发者_Go百科need to do to fix this issue? Or just ban IE6? Do i need to format a new .css just for ie6+?

*UPDATE: I updated my code thanks to you guys but it still looks bad, just not as bad lol so i will keep working at it thanks guys!

The border-radius properties are not supported in IE6. If you want those elements to have rounded edges you'll most likely have to put in a fallback for the older browsers using images.

Internet Explorer didn't support border-radius until version 9 - I might recommend applying a behavior modification script like IE-CSS3, though according to W3Counter IE6 use dropped to 2.86% for April which in my opinion implies that designers can finally start disregarding it altogether. As neat as some CSS3 abilities are, many features are still not in main-steam support. An alternative is to continue using images for your rounded corners until browsers catch up.

I solved the issue, after looking though 300 forums lol i found a hack that says it works in all browsers i tried it in ie6 and yep it shows my rounded boxes now!

td.login_bar {
    border-radius:10px;
    border:solid 1px #666;
    padding:10px;
    background-color:#efefef;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

Is changed to:

td.login_bar {
    border-radius:10px;
    border:solid 1px #666;
    padding:10px;
    background-color:#efefef;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    behavior:url(../border-radius.htc);
}

I put that file on the host and it works 100%, only thing is my form fields wont style but its ok if they come out normal it still looks good.

You're using non-IE vendor-prefixed CSS extensions like -webkit-border-radius and so on. They're not going to work in IE6.

I would suggest downloading a virtual machine containing IE6 and doing some proper testing if you're dead set on supporting it properly. The way it handles CSS can be quite strange.

If necessary you can use conditional statements to include CSS for certain browsers, although it's far better to just try and make your CSS work across everything by default, if possible.

as mentioned, those -webkit and -moz and -o are mostly for bleeding edge browsers. But here is something I found quite useful myself for IE6. http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

Even Microsoft votes for "just ban IE6", after the Chinese Google Hacks that occurred in 2010:

Microsoft is aware of public exploit code published, the impact on customers to try using Internet Explorer 6 and of limited, targeted attacks using this vulnerability in Internet Explorer 6. As a result of reports which we an update to its Security Advisory 979,352 Customers alert and provide actionable guidance and tools to help with protection against use of the IE vulnerability.

Please, don't waste your time making adjustments to make your code fit in a browser that is not even encouraged to use by its manufacturer. Instead try to make your code to be compatible with modern browsers.

Source:
Hubpages: Microsoft Recommends Upgrading IE6 & IE7 Users To Upgrade Their Browsers

See also:

• After Google hack, Microsoft asks users to abandon IE6, XP
• Assessing risk of IE 0day vulnerability