I have a problem that I'm not sure how to solve. I am attempting to
create tabs with a small corner "cutout". I know hot to place the small
corner image and get the rollover colors to work, etc.
The problem I'm having is that the 1px border I need on the top, left,
and right of each tab is showing around the image, so I turned border
off and am looking for a solution to create the borders I need.
Is there a way to specify a length for a border? For instance, if my
tabs are 30px wide and 20px high, and my corner image is 5px square, can
I specify the top border to only be 25px in length, and my right border
to be 15px high?
If not, is there a workaround for this?
Thanks for any help you can give.
My current code:
#newsTabs ul{
list-style-type: none;
margin: 0;
padding-bottom: 24px;
font: bold 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
float: left;
}
#newsTabs li {
float: left;
height: 20px;
color: #000000;
padding-bottom: 0px;
margin: 2px 2px 0 2px;
/*border-top: 1px solid #9b988f;
border-left: 1px solid #9b988f;
border-right: 1px solid #9b988f;*/
background: url(/images/tabcorner.gif) 100% 0 no-repeat white;
}
#newsTabs a:link, #newsTabs a:visited {
display: block;
color: #000000;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
#newsTabs a:hover {
color: #000000;
background: url(/images/tabcorner.gif) 100% 0 no-repeat #dde2dc;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
