[macgyvr64]

I just read the (old) CSS Sliding Doors article on A List Apart, and I'd like to use the idea to make growable tabs using background images, but the main bug they leave really bothers me. In their examples, there's a dead space to the left of the tab that's highlight-able, but isn't part of the link. I understand why it's there, but I'm not sure how to go about undoing it. Is there even a way to make tabs that don't have a dead spot? Any ideas would be greatly appreciated!

[macgyvr64]

I found my answer after some more searching! Instead of putting the left image in the "LI" tag and the right image in the "A" tag, create a "SPAN" inside the "A", and shift everything over: "A" gets the left image, and the "SPAN" gets the right image, and is thus inside the "A" tag and is clickable. Exactly what I wanted.

See some code

[arcticmac]

Originally Posted by macgyvr64

I found my answer after some more searching! Instead of putting the left image in the "LI" tag and the right image in the "A" tag, create a "SPAN" inside the "A", and shift everything over: "A" gets the left image, and the "SPAN" gets the right image, and is thus inside the "A" tag and is clickable. Exactly what I wanted.

See some code

There are two ways you could do it without the spans.
First note that, if you read the part one of the initial article, it says you can switch the order, putting the left image on the anchor and the right on the list item IF you are using tabs without a transparent background, which you are doing, so that would be an easy fix. However, even if you want transparency, there's another way... do like that (i.e. left image in the anchor, right in the list item), and then give the anchor a left margin that's negative, effectively moving it outside the li, meaning that the right image won't show through it. give the anchor some left padding so that the text is centered when you're done.

Here's the CSS:

Code:
#navigation ul li a {
	background: url("tab-left.gif") no-repeat;
	color: #06C;
	padding: 5px 0 5px 10px;
	margin-left: -9px;
	text-decoration: none;
}

#navigation ul li {
	background: url("tab-right.gif") no-repeat 100% 0;
	padding: 5px 10px 5px 0px;
}

I had to sacrifice left and right padding on the tabs being in ems, but I actually like it better fixed anyway, so...

also, you can kill the .last thing... just do like this:

Code:
#navigation ul li {
	display: inline;
	margin-left: 10px;
}

#navigation ul li + li {
	margin-left: 1.75em;
}

The margin on the first li is to keep the set centered, and then every one after that gets extra to keep them separated. (I dunno if the + selector works right in stupid IE, but I'll let you test that)

[macgyvr64]

Thanks, I'll have to give that a try, as well!