JQuery Rounded Corners in Internet Explorer (IE) messed up
Question
I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT
- if you open a new tab and then come back to the page
- if you go to another tab, click a link, then come back to the page
- 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.
9 answers
solution1
5 2009-09-18 10:28:26
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.
solution2
4 2008-10-20 18:23:18
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.
solution3
3 2008-10-21 10:05:12
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.
solution4
2 2008-10-20 18:15:29
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.
solution5
2 2010-05-24 13:24:05
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.
solution6
1 2011-05-15 22:04:17
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!
solution7
0 2008-10-20 18:17:07
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.
solution8
0 2009-02-12 23:48:14
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/
solution9
0 2009-06-04 12:58:03
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...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.