CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerrounded-corners
Geek
Geek

Reputation: 3329

CSS rounded corner on tabs in IE 7/8

I am using jQuery to get the rounded corner for tabs in UI. My issue is it works well in firefox and Ie9 but fails in IE7 and IE8(tab looks like a square. Is it an issue to everyone or is there a fix?

<div id="fig">
        <div id="fig-tabs">
          <strong class="tab-current">1st tab</strong> <a href="" class="tab">2nd tab</a> <a href="" class="tab">3rd tab</a>
        </div>
...</div>

and css is,

#fig-tabs { }

strong.tab-current
{
    background-color: #FFF;
    padding: 3px 8px 7px 8px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
    text-decoration: none;
}

a.tab
{
    background-color: #999;
    padding: 3px 8px 2px 8px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
    text-decoration: none;
}

a.tab:hover { background-color: #9ffff; }

Upvotes: 2

Views: 830

Answers (3)

Simon Dragsb&#230;k
Simon Dragsb&#230;k

Reputation: 2399

what about classic way of doing it using backgrounds on lays of divs

<div><!--top-->
  <div><!--repeat-->
    <div><!--bottom-->

    </div>
  </div>
</div>

Upvotes: 0

secretformula
secretformula

Reputation: 6432

To start i'd say your problem is that the code you are writing uses the <canvas> tag/element which older versions of internet explorer don't support. What you can use

Why not just use css3 border-radius properties to set up your rounding. These still won't work in internet explorer but are nicer and easier to code. Really in this day and age this sort of thing should be done using css3. There are compatibility libraries that will work for IE's before 9.

If you really want your rounded corners in the old browser versions you are going to need to use a pre created image.

EDIT: As the other answer stated you can use the internet explorer canvas library,but you will need to change you getContext call to the following as your canvas tag is dynamically generated

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

EDIT2: Now your problem is that the css3 properties are also not supported in IE 7/8. Try using a library (one of the comments recommended http://css3pie.com/ to add that support into the older browsers

Upvotes: 6

tsukimi
tsukimi

Reputation: 1645

The canvas element is not supported in IE7/IE8, you can use a library that gives it support found here. Give that a try.

Upvotes: 3

Related Questions