Forum Moderators: not2easy
I was messing around trying to see if I couldn't create a shadow effect for the filter terms span elements. Figured out a reasonable solution in Firefox but, of course, it didn't work in explorer. Googled around but didn't find much so thought I'd post what I came up with and see if anybody could improve on it.
The less complicated the better and not really interested in image based solutions. Absolute positioning solutions are not useful either because the span elements will be displayed dynamically.
Here's what works in firefox...
<html>
<STYLE TYPE="text/css">
<!--
.inner{
color: black;
background: #CCFF99;
padding: 7px 5px 5px 5px;
margin: -10px 3px 3px -10px;
}
.outer{
background: #D9D9D9;
padding: 0px 3px 3px 0px;
margin: 0px 3px 3px 20px;
border-bottom : 6px solid #D9D9D9;
}
-->
</STYLE>
<body>
<span class="outer">
<span class="inner">True dat</span>
</span>
</body>
</html>
Here's the closest I got in explorer...which is not a viable solution because its fixed width and the filter criteria is variable in length.
<html>
<head>
<style type="text/css">
<!--
.outer{
margin:25px;
width: 60px;
padding:0px 8px 8px 0px;
background:#D9D9D9;
}
.inner{
margin:-8px 0px 0px -11px;
background:#CCFF99;
color:black;
padding:5px 5px 5px 5px;
min-height:0;
height:1px;
position:relative;
}
-->
</style>
</head>
<body>
<span class="outer">
<span class="inner">True dat</span>
</span>
</body>
</html>
You can just copy and paste the code into the testing editors at w3schools.
.outer {
background-color:#D9D9D9;
margin:0.4em;
}.inner {
position:relative;
top:-0.4em;
right:0.4em;
background-color:#CCFF99;
}
Adjust margin and top/right to achieve the desired "shadow" effect
