Thanks, Ross. The expandable bg image did the trick. Exactly what I needed to get it working.
I love this list! :-) -----Original Message----- From: Ross C [mailto:[EMAIL PROTECTED] Sent: Wednesday, August 30, 2006 11:04 AM To: Poyner, Matt; css-d@lists.css-discuss.org Subject: RE: [css-d] (no subject) I saw a site a while back that had this (I'll try to find it). I believe they had a background image for the tab that was like 150px wide (and 20px high in your case) that had the borders for the top, right (or in your case the chamfered corner), and bottom, then specified li {border-left: 1px...} So it's still expandable horizontally to scale with your text length. I can see that this method would not work for everyone (for example, if your li has a fluid height), but it may work for u. -ross -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Poyner, Matt Sent: Wednesday, August 30, 2006 9:55 AM To: css-d@lists.css-discuss.org Subject: [css-d] (no subject) 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/ ______________________________________________________________________ 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/
