What i am trying to achieve is for the spacing between the list items to reamin the same, but for the bullet on the right to show what is hidden (the top and bottom is clipped).
This is my source code so far :
<ul id=“navlist”>
<li id=“active”><a href=“#” id=“current”>Item one</a></li>
<li><a href=“#”>Item two</a></li>
<li><a href=“#”>Item three</a></li>
<li><a href=“#”>Item four</a></li>
<li><a href=“#”>Item five</a></li>
</ul>
#nav_container ul {
list-style-type: none;
text-align: right;
}
#nav_container ul li {
} #nav_container ul li a{
padding-right: 70px;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
letter-spacing:3px;
line-height:22px;
text-transform:lowercase;
text-decoration: none;
}
#nav_container ul li a:hover
{
}
#nav_container ul li a#current
{
background-image:url(bg_images/curl.png);
background-repeat:no-repeat;
background-position:right;
}
I have tried overflow visible but with no results. The bullet is 36px in height. Changing the height only makes the space between the list items bigger. It seams that the bullet needs to over lap it previous postion for each item???
The problem is that the background image is designed to fill the space taken up by the element, in this the #current item. The size of the #current item is defined in the CSS and by its contents, but the background image is not part of the contents, so setting the overflow property won’t help.
The only way that I can see to make this work is to set the line-height to match the height of the background image, and then use position:relative; to overlap them slightly, to retain the spacing between the text that you need. If you want to close them up by 10px, then you need to set position:relative; on all except the first one, and then put top:-10px; on the second, top:-20px; on the third, top:-30px; on the fourth, and so on.
This will give you a huge gap underneath the list, as the space reserved for the list items in their natural positions is kept, but that’s easy enough to work around.
[ot]When you’re giving blocks of code, please wrap them in the relevant tags, ie
for HTML and
```css
for CSS. It makes it easier to read than just having them as plain message text.[/ot]
Condenser yer properties, it’s just easier to deal with.
You probably don’t need that div around your UL – that or you don’t need a ID on the UL since you are inheriting off the parent in your CSS. Pick one, not both.
as mentioned, it’s not a overflow issue… background images cannot be shown larger than the size of the element they are on.
‘active’ is a bad id name (since it’s also a psuedostate) and there’s no reason to have ‘active’ AND ‘current’ PICK ONE! Also being such common words you might want to use elsewhere, I’d make those classes, not ID’s.
It helps to trap ALL the keyboard/mouse psuedostates.
you don’t need to say -type, simply list-style will suffice.
by the specification it is invalid to omit the vertical alignment from background-position. Simply saying “right” is invalid, and doesn’t work in some versions of IE. (amazingly most ‘standards compliant’ browsers interpret the wording of the specification wrong on that)
Line-height can be untrustworthy for alignment in these cases, which is why I would decrease the line-height, then up the padding to that desired 36 px, then use as Stomme-poes suggested a negative margin to decrease it back to that desired 22px. I would apply that negative margin to the top only, so you don’t have to worry about screwy behaviors after the list. Simply padding the top of the list would address that extra space.
navList is kinda vague so far as an ID is concerned. I’d probably name it something more meaningful like #mainMenu.
Another solution, though it would require extra support/ mark up for IE (aint that always the case) instead of #nav_container ul li a#current use:
#current {position:relative} #current:after{display:block;
position:absolute;
left:100%
top:0;
height: ( the height of your image)
width: (the width of your image)
background-image:url(bg_images/curl.png);
background-repeat:no-repeat;
background-position:right;
z-index:1 ( or adjust to taste)}
Actually, since you are adding an ID anyway, you could ensure IE support with a LITTLE added markup
<li id=“active”><a href=“#” id=“current”>Item one <span></span></a></li>
#current {position:relative} #current span { display:block;
position:absolute;
left:100%
top:0;
height: ( the height of your image)
width: (the width of your image)
background-image:url(bg_images/curl.png);
background-repeat:no-repeat;
background-position:right;
z-index:1 ( or adjust to taste)}
by the specification it is invalid to omit the vertical alignment from background-position. Simply saying “right” is invalid, and doesn’t work in some versions of IE. (amazingly most ‘standards compliant’ browsers interpret the wording of the specification wrong on that)
I thought it was valid, as the specs say if one is omitted, it is assumed to be “center” (and IE would not do that).
in the CSS1 example, || but the CSS2 has |
so I’d read that as truly optional.
In THEORY because of that question mark the second one should be optional not the first, meaning it would be ok to say ‘left’ or ‘right’, but not to say ‘top’ on it’s own.
I would think because whenever you put ONE dir down, it’s automatically the left|center|right value (the first value) and it’s only possible to have a second value without a first because of what the words “top” and “bottom” mean (they simply cannot refer to horizontal).
Maybe they were trying to use real-life logic to help define things. Then again, you never know with the W3C.
Even so, many older browsers choke if you omit one or the other – just like mixing metrics with named positions you can’t rely on it.
True, but of the older browsers who choke, I write CSS for exactly zero of them (I always include two units for IE, and I personally don’t mix-n-match names and numbers, but no browser I currently build for, including IE5 when I bother, screws up mix-n-match).
Off Topic:
BTW I think I’m going to steal your jQuery sig line
You would THINK so because of that – you read the TEXT in the CSS1 spec it pretty much says yes, you can omit it., but if you look at the declaration in CSS2 it’s:
[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ]
Empty/none/etc aren’t even listed as options. In THEORY because of that question mark the second one should be optional not the first, meaning it would be ok to say ‘left’ or ‘right’, but not to say ‘top’ on it’s own.
Though there are a lot of spots where the implementation syntax differs from things the text says.
CSS1 does this too:
[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Exclusive or, not a regular – The set elements aren’t listed as optional – but their EXAMPLES and text show it as optional.
Confused? No wonder the implementation is all screwy when even the documentation contradicts itself.
Even so, many older browsers choke if you omit one or the other – just like mixing metrics with named positions you can’t rely on it.
Hm, no, this isn’t an overflow issue: overflow deals with HTML elements, while this is a background image (and background images and colours are always limited by the physical area of an object).
You might need to either rethink the image (maybe it needs to be made smaller), accept a 36px line-height or height on the anchors (not sure if you could get away with pulling everyone up with a small negative top margin, but I guess you could try if you’re careful) or consider having the image on the ul itself instead. This would be a little weird… instead of a current class on the anchor, you’d have some different class assigned to the ul on each page, and each class has a different coordinate for background image.
Or, you could try an actual HTML image. It should overflow its parent (the anchor) but it could still created unwanted spacing between anchors. For alt attribute you’d have alt=“” because it’s actually decoration.
