CSSPLAY
Doing it with style
Doing it with style
Vertical divide lines from previous links showing next to the :hover sliding doors graphic, spoiling the look of the menu
The vertical divide line is now covered by the sliding doors graphic giving a much better look to the menu.
I have seen this happening on several sites recently and think that the vertical divide line next to the button hover spoils the look of the menu, so with a fairly simple change of style this can be avoided.
All that is needed is to style the list element with display:inline; instead of float:left; (for IE6). Then add a negative 1 pixel left margin to the link and an extra 1px of padding to the <b> element to keep the menu the same width as in the previous version.
Now when hovering over the link, the sliding doors graphic is positoned left by 1 pixel and it covers the previous vertical divider graphic.
You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
