7

I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT

  1. if you open a new tab and then come back to the page
  2. if you go to another tab, click a link, then come back to the page
  3. if you hover over a javascript-executing div / menu (I think).

The rounded corners are replaced with horizontal lines, and text within the td tag is pushed down. Once the page is refreshed, however, the rendering is back to normal. In all cases it works perfectly in Firefox.

Any ideas?

For reference, the Javascript code I'm using is as follows (it's a MOSS 2007 page):

$(document).ready(function(){
   $("table.ms-navheader td").corner("top"); 
});

Here's a sample HTML page that displays the problem perfectly:

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery.corner.js"></script>
        <script type="text/javascript">
          <!--

            $(document).ready(function()
            {
                $("div").corner("top");
                $("td").corner(); 
            });

          //-->
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td style="background-color: blue">
                    TD that will be messed up.
                </td>
            </tr>
        </table>
        <div style="background-color: green">
            divs don't get messed up.
        </div>
    </body>
</html>

In the above code, the TD will be messed up once you open up a new tab, but not the div. I don't have much control over the HTML emitted by MOSS, otherwise I might have bitten the bullet and used DIVs here instead of a table.

1
  • There are multiple jquery.corner.js-plugins. A link to which one you are using would be helpful. :) Oct 21, 2008 at 10:17

9 Answers 9

5

In IE I had better results with the DD_Roundies library. Only works in IE though. For Firefox you need to add -moz-border-radius styles.

4
  • you don't need to add anything to Firefox/Webkit, the script adds is by itself, it works cross-browser
    – vsync
    Oct 3, 2009 at 22:14
  • 1
    This one works the best by far. All of the other ones had a little nit that just wasn't quite right. Jan 18, 2010 at 21:05
  • The DD_Roundies idea is sound, but its IE8 support is sketchy and slow (the author says so on the site), which makes it a non-starter for me. Jun 30, 2010 at 21:03
  • Be warned that there is an issue with this library (and any other IE library that uses VML) that jQuery may crash in certain cases in the page in which this library is included. github.com/jquery/jquery/pull/13
    – Niyaz
    Oct 12, 2010 at 5:15
4

I agree with RichH, I think that all of the popular JavaScript libraries leave something to be desired when trying to created rounded corners.

I always find myself using cornershop: http://wigflip.com/cornershop/, it is an image / css generator that takes the pain out of making rounded edges manually.

1
  • Personally, I'm glad they don't add a bunch of extra images, tags, CSS or whatever is need to create the rounded corners for browser that don't support the CSS properties. I'd rather just not have rounded corners (in most cases) when it isn't supported. Jun 18, 2010 at 23:45
3

You might want to try this plugin instead jquery.curvycorners.js.

We use it on our project with no problem at all - you may need to append/prepend with spans but it's very straightforward.

Best thing -> anti-aliased by default.

http://blue-anvil.com/jquerycurvycorners/test.html

2
  • This thing is great. I had problems with the other plugin as well. Jul 31, 2009 at 22:47
  • 1
    Works awesome but crashes in IE8! Sep 14, 2010 at 3:43
2

I've had nothing but trouble with rounded corners Javascript libraries (especially with IE6 and 7)

In the end I've reverted to more traditional approaches involving images. A bit more of a chore to setup, but works perfectly.

2

curvycorners.js and jquery.curvycorners.js only work if you don't want to use any transitions.

if you have an accordion or fade in/out tab effect, the element with the rounded corners doesn't render correctly after change.

1

to make jquery curvy corners work in IE simply give the element a background color. No sure why it's so...just works like magic!

0

It's a bit hard to visualize the issue you're having, a link would be really helpful. Make sure your height and width properties are defined for each cell of your table. It could potentially be a hasLayout issue.

0

I've searched and haven't found a solution to rounded corners in jquery UI tabs. The jquery themeroller supports rounded corners, but the documentation says they don't work in IE.

Here is a good page with 25 different rounded corner methods http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

0

I've had similar problems, even in firefox, I found that if you apply 'corners' to a element which has a class which sets a background color the corners never get applied. In my case I add a class called 'selected' which gives a different background colour to the selected 'tab' in a UL. To prevent this I apply the background colour using js instead of css after I have added the corners:

$('.selected').css('background-color', '#3296C0');

Also it you add a :hover which changes the background colour the corners are squared back off on hover. The solution I have so far is to use a onhover event which reapply the corners (you could set the color here as well).

 $('#top-nav li a').hover(function(){
        $(this).corners('top');
    });

As for IE6 - a nightmare - it would not be so bad if I could detect IE6 and just not add corners leaving them squared. Not even tried IE 7 yet...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.