Menu
I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT
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.
393
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.
58
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
