tags:

views:

270

answers:

7
+2  Q: 

css3 IE 6 issue

Hi

I am executing the foll code in Firefox it works fine i am basically using CSS3 for creating rounded borders.

Please tell what changes I need to make to get the same output in IE6

Below is the code

<html>
<head>
<style type="text/css">
background-color: #ccc; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; border: 1px solid #000; 
padding: 10px;
</style>
</head>
<body>
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
This is a new feature in CSS 3 </div>
</body>
</html>

Thanks

+4  A: 

IE6 does not support rounded corners directly via CSS. You will need to "fake it" with images if you want IE support.

Mike  2009-12-29 21:24:59
This is a good option for visitors whose browsers either do not support JavaScript or have JavaScript disabled. +1
lucifer  2010-08-24 09:48:45
+5  A: 

IE doesn't support rounded corners in CSS. You can use a JS library like this to do them in IE.

Annie  2009-12-29 21:25:02
+1  A: 

That issue is quickly explained: IE 6 doesn't speak CSS3, nor any of the browser-specific pseudo-properties to round corners. You'll have to work around with one of the available rounded corner solutions that fake it using images.

Pekka  2009-12-29 21:25:42
A: 

As far as using a JS library for this. Check out Jquery UI

Derek Adair  2009-12-29 21:26:43
A: 

There are several approaches but none of them as easy as with CSS3. Do note that CSS3 is not suported n MANY browsers, including IE7 and IE8.

My suggestion is; either forget about rounded corners in IE (it's not fundamental to have those CSS3 effects to have a functional design) or use the same approach for every browser. Note also that IE6 has problems with PNG, use transparent GIFs instead.

One old approach was to use tables, you can do that fairly easily with Photoshop's Slice tool and "save for web". But tables are deprecated for layout.

Javascrip libraries are a good approach.

Camilo Martin  2009-12-29 21:29:22
+3  A: 

I would avoid using a library or script to create rounded corners, it's called graceful degradation and is perfectly acceptable for IE6 not to have rounded corners.

As long as your layout isn't breaking in IE6 and the site looks pretty good, something like rounded corners are not worth sweating over.

You'll also find CSS rounded corners don't work in IE7 or IE8 as well.

John Czajka  2009-12-29 21:32:49
A: 

You should try http://code.google.com/p/curved-corner/ to curve corners in IE6+. In IE9 the CSS3 declarations will work. Here are some examples how to use htc file to curve corners http://starikovs.com/2010/08/24/css3-rounded-corners/.

Vacheslav  2010-08-24 09:46:30

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?