style the item left of active / hover

i’m new to wayfinder / html / css

i have a horizontal list of items generated by wayfinder

i already styled the active and hover item

now i need to style the item left of hover/active

i use the right border of the list items to draw littel lines to seperate the menu items

but now i need to turn the border off if the item next (on the right) to it is active or hover-ed over.

My first thought: Why don’t you use a left border instead of a right one to seperate the items? So you could easily leave it out in the active/hover state.
This thread could be of your interest, too:
http://modxcms.com/forums/index.php/topic,60416.msg343587.html#msg343587

left or right side is all the same.
then the line will be shown on the right of the hilite or hover item.
i change the background color of the list items to indicate hover and active item.

if there would be a way to know what item would be left of hover and active item ,
i could tell my css style sheet to hide the right border of list items on the left of hover and active item.

see attachement,
the red arrow points where you see the line still visible on the left of the hilited item.

left or right side is all the same.

Of course.

As far as I know there is no way to identify the item left of the active one.

You could try to change the design so that the menu items don’t have a padding-bottom - the seperating line then will be as long as the height of the active item and so less disturbing.

Found a better solution, via CSS.
You could use style definitions similar to these:

Giving the active [tt]li[/tt] element a negative [tt]margin-left[/tt] it will overlap the right border of the item left to it. (Of course you have to adapt the value to your needs.)

hi,

well, left or right isn’t exactly the same, let’s have a look at why

assuming you are accepting things to degrade a little bit in ie6 as you seem to be using the li:hover it doesn’t understand, i would advise you to set you a border-left except for the first one (use wayfinder first class the way you probably used its last one) and then
(let’s say your border is white and dark background is gray)



and that’s all !
the only thing is, as i said, ie6 doesn’t understand this and it will keep your white border... is it that terrible considering all the things it doesn’t understand, beginning with li:hover ?

hope it helps
have swing

If the border is (like in my proposal before) assigned to the [tt]li[/tt] , not to the [tt]a[/tt] element, it becomes even simpler:

Solved

the combined

#menu li:hover, #menu li.active
{

plus the

margin-left: -1px;

did the trick

thanks for all your advice

greets from Amsterdam

Remko