I have created a horizontal main menu that exploits Douglas Bowman's 'Sliding Doors' technique to create variable width tabs, as modified by Christophe Geers for application to the ASP:Menu control (using the CSS Friendly Control Adapters). The menu is also horizontally centred using techniques described by Matthew James Taylor. My markup and CSS is shown below.
Among other differences, the selected tab is taller than the others, and the text colour changes to black instead of blue. If you move the mouse over the middle of an unselected tab, then this tab also rises up and the text colour changes to black. It is also clickable. That is the desired behaviour.
My problem is that unselected tabs are not fully sensitive to a mouseover across their full width.
This problem happens when the mouse is moved over the left edge of an unselected tab (within 4 px of the edge, this being the width of the left hand tab graphic). The tab moves up as expected but the text on the tab remains blue and the tab is not clickable. This behaviour occurs with all tabs when in the unselected state and is the same in both IE8 and Safari 4.0.2.
Are there any CSS gurus out there who can suggest a fix?
View Complete Post