CODEWITHSUNDEEP
htmlinternet-explorer-6cssrounded-corners
Josh
Josh

Reputation: 1819

css3 IE 6 issue

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

Upvotes: 1

Views: 480

Answers (9)

Ciranjeeb Debnath
Ciranjeeb Debnath

Reputation: 17

You can use .htc( eg: css3.htc ) files for ie6 css3 hacks as an alternative option which forces the css3 feature in ie6.Just include it like border-radius:3px;behavior:url(css3.htc); You just have to download this file and include it in your static-code-base.But using .htc is a bad approach as it slows down page performance and causes confliction to other features.

Upvotes: 0

Realto619
Realto619

Reputation: 301

I realize that this isn't a current thread any longer, but I thought that this might be helpful to someone with a similar question in the future...

If you're looking for a way to bring CSS3 support to IE 6-8, I highly recommend using a solution called CSS3 PIE ( http://css3pie.com/ ). It's the best solution for rounded corners (border radius) that I've found and it works and plays well with others. It will allow you to use most CSS3 properties plus it also supports transparent PNGs. I've used it on two production sites without any problems and I don't anticipate having any issues since they've been live for over a month now.

Here's a sample page that I created to demonstrate: http://nunyabiz.freeiz.com/css3pie_test2.html

Upvotes: 1

starikovs
starikovs

Reputation: 3398

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/.

Upvotes: 0

John Czajka
John Czajka

Reputation: 183

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.

Upvotes: 3

Camilo Martin
Camilo Martin

Reputation: 37898

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.

Upvotes: 0

Derek Adair
Derek Adair

Reputation: 21925

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

Upvotes: 0

Pekka
Pekka

Reputation: 449475

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.

Upvotes: 0

Annie
Annie

Reputation: 6631

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

Upvotes: 4

Karmic Coder
Karmic Coder

Reputation: 17949

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

Upvotes: 3

Related Questions