I found this css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.box { float: left; width: 100px; height: 100px; }
#boxContent { border: none; background: #9FC; }
#boxContent { position: relative; left: -2px; top: -2px; }
#boxContainer { position: relative; background: #666; margin: 4px; }
</style>
</head>
<body>
<div class="box" id="boxContainer">
<div class="box" id="boxContent">
A drop shadow around a box
</div>
</div>
</body>
</html>
This works perfectly.
I am curretly useing this css
body{background-color: #E6ECF0;}
div#tor{background: #C0D5E8;}
.div#tor{background: #C0D5E8;}
b.rtop, b.rbottom{display:block;background: #E6ECF0}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #C0D5E8}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}
does anybody know how to add shadow effect to the css that I have?
thankscould you post your markup as well?<table width="100%" id="mainTable" cellpadding="0">
<tr>
<td>
<div id="torg">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<table width="100%">
some html goes here
</table>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</td>
</tr>
</table>
thanksIt is easier to use image for shadow effect.
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web siteyep, and you're code is a messwhy my code is a mess?nested tables and some unknown <b> markup, I think.exactly!ok,
but it works!aha! here is it, that excuse is so predictable!yeah, but you can't argue with that
yes i can!
ok it works but it wasn't how it is supposed to be, and not in a good wayNested code may works, but is hard to debug (if something goes wrong)
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web site
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.box { float: left; width: 100px; height: 100px; }
#boxContent { border: none; background: #9FC; }
#boxContent { position: relative; left: -2px; top: -2px; }
#boxContainer { position: relative; background: #666; margin: 4px; }
</style>
</head>
<body>
<div class="box" id="boxContainer">
<div class="box" id="boxContent">
A drop shadow around a box
</div>
</div>
</body>
</html>
This works perfectly.
I am curretly useing this css
body{background-color: #E6ECF0;}
div#tor{background: #C0D5E8;}
.div#tor{background: #C0D5E8;}
b.rtop, b.rbottom{display:block;background: #E6ECF0}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #C0D5E8}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}
does anybody know how to add shadow effect to the css that I have?
thankscould you post your markup as well?<table width="100%" id="mainTable" cellpadding="0">
<tr>
<td>
<div id="torg">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<table width="100%">
some html goes here
</table>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</td>
</tr>
</table>
thanksIt is easier to use image for shadow effect.
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web siteyep, and you're code is a messwhy my code is a mess?nested tables and some unknown <b> markup, I think.exactly!ok,
but it works!aha! here is it, that excuse is so predictable!yeah, but you can't argue with that
yes i can!ok it works but it wasn't how it is supposed to be, and not in a good wayNested code may works, but is hard to debug (if something goes wrong)
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web site