CODEWITHSUNDEEP
javascripthtmlcss
Alex Zahir
Alex Zahir

Reputation: 969

CSS3 border radius and Internet Explorer 8

I am using CSS3 border-radius styles in my webpage and I want it to be cross-browser compliant across major browsers including IE8.

Therefore, I am trying to use the border-radius.htc file to achieve this. Wherever in my css styles the border-radius is used, i have coded something like:

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

Unfortunately, when I check the webpage in IE8, all the backgrounds that have border-radius behavior end up not showing at all.

The webpage is at http://www.domainandseo.com/portfolio/dominos/index.html

Any suggestions would be highly appreciated.

Upvotes: 0

Views: 19958

Answers (5)

MarcoK
MarcoK

Reputation: 6110

I don't known which "border-radius.htc" file you're using, but if you're using something like CSS3 PIE, it's a known issue. From their page:

The only way I know of to work around this is to either:

  • make the target element position:relative, or
  • make the ancestor element position:relative and give it a z-index.

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

  • One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
  • Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

Upvotes: 2

Bill Robbins
Bill Robbins

Reputation: 49

CSS3 PIE requires the path used to be relative to the HTML and not to the CSS which is different than say an image or @font-face font you're loading via CSS. You might find it works best to place the absolute URL to your PIE.htc file in your CSS.

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21191

You might be better off trying to use a JavaScript polyfill rather than trying to load an .htc file. One that comes to mind is Mike Alsup's Corner jQuery plugin, found at http://jquery.malsup.com/corner/. You could use conditional comments to only load it in IE 8 or earlier:

<!--[if lte IE 8]>
<script src="path_to_your_scripts_folder/jquery.corner.js"></script>
<script>
    $(function(){
        $('your_selector_here').corner('corner_radius_in_pixels');
    });
</script>
<![endif]-->

Upvotes: 1

Gopikrishna
Gopikrishna

Reputation: 857

Try this it will work:

#main{position:relative;}

mention this id only in IE specific stylesheets.

Upvotes: -3

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Internet explorer versions earlier than 9 do not support this property. Check the compatibility matrix. If you want rounded corners in old browsers you have to achieve them through an container carrying the rounded border image.

Upvotes: 2

Related Questions