rounded corner

csckid · May 15, 2009

I managed to create a rounded corner div using jquery. But, when i use the code

$("#expansion").show("slow");

rounded corner shape get distorted in IE. In rest of the browser it works well.

If i use the code

$("#expansion").animate({ height: 100}, "slow");

it works well in all browser....

Q) how can i get rounded corner div in IE ann using code

$("#expansion").show("slow");

??

plz help

here is the full code


<html>
<head>

<title>Home</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gradient.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

<script type="text/javascript">
$(function () {

$("#write").corner();	


} );

</script>


<script type="text/javascript">
$(function () {



$("#expansion").hide();


} );
</script>



</head>

<body >

<div id="container">


		<table width="100%">
			<tr >
				<td >


						<div style="float:right; padding-right:20px;padding-top:10px"> 
						   <font size="-1" >
						   
						   					<span id="expand" >Expand&nbsp&nbsp&nbsp&nbsp	 </span>	
						   					<span id="contract" >Contract           </span>
						   
						  </font> 
						</div>

				</td>

			</tr>
			<tr>
				<td >
					<div id="expansion" >
				    
					<form><textarea rows='7' cols='60'></textarea></form><div id='write' style="width:110px; height:30px; background-color:#999999" onMouseOver='commentsover(this.id)' onMouseOut='commentsout(this.id)'>&nbsp&nbsp&nbsp&nbsp Comments</div>

					</div>
				</td>
				<!--end of expansion-->
			</tr>

		</table>




</div><!--end of container-->




<script type="text/javascript">
		function commentsover(name){
			document.getElementById(name).style.backgroundColor='#036400'
		}
		function commentsout(name){
			document.getElementById(name).style.backgroundColor=''
		}


		$(function () {
			$("#expand").click(function () {




						$("#expansion").show("slow");
						//document.getElementById("expansion").innerHTML="";



			});		



			$("#contract").click(function () {


						 $("#expansion").hide("slow");

			});		



		} );

</script>

</body>
</html>

Sign In

rounded corner

Recommended Posts

csckid

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information