There's always Doug Bowman's "Sliding Doors": http://www.alistapart.com/articles/slidingdoors/ It'll help you create expanding, EM width dependent tabs.
On 30/08/2006 16:03, Ross C wrote: > 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/ ______________________________________________________________________ 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/