The code is below for page.
----------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoundedCorners.aspx.cs"
Inherits="CoolUI.RoundedCorners" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="Styles/CoolUI.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript" language="javascript">
$(function() {
$('#divchi').mouseenter(function() {
$('#divpar').css("background-color", "#FF0000");
});
$('#divchi').mouseleave(function() {
$('#divpar').css("background-color", "#FFFFFF");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divpar" class="divpar" style="height: 204px; width: 204px;">
<div id="divchi" class="divchi" style="height: 200px; width: 200px; position: relative;
top: 2px; left: 2px">
<table cellspacing="2" cellpadding="2" width="100%">
<tr>
<td>
<span class="spntitle">Welcome</span>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.Donec eu libero sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.Donec eu libero sit amet. egestas.Donec eu libero sit amet ristique senectus et netus </p>
</td>
</tr>
<tr>
<td>
<span class="spnfoot">All right reserved.</span>
</td>
<td>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
The ccs for the page is
--------------------------
body
{
background: #CCCCCC;
font-family: Verdana;
font-weight: lighter;
font-size: 11px;
}
.divpar
{
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
}
.spntitle
{
font-family: Verdana;
font-weight: lighter;
font-size: 12px;
color: #CCCCCC;
}
.spnfoot
{
font-family: Verdana;
font-weight: lighter;
font-size: 12px;
color: #CCCCCC;
}
.divchi
{
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
}
Testing it in different browsers
1. Google Chrome
2. Internet Explorer
--------------------
3. Mozilla Firefox
------------------
---------
When you hover your mouse over the content the
border gets highlighted.
Display in opera.
At the time of this article the browser versions are
1. IE 7.0
2. Opera 11.01
3. Firefox 3.6.13
4. Google Chrome 8.0.522.
Once css3 is completely supported in all the browser the display will be
uniform across browsers.
Till then have fun.
Post it in jsfiddle.net and post the link
ReplyDeletehttp://jsfiddle.net/hURvZ/
ReplyDeleteThanks speed bond. I just wrote an article about jsfiddle and posted the code too. jsFiddle is awesome.
ReplyDelete