Rollover link - only works on half the link!

Get Started
1

I have three equal columns - divs that are set with the same class, and the same CSS styling on all selectors. In the first two columns, when you roll over the link - at any spot over the link - it behaves as it should, as styled by CSS (change color and font weight).

But in the third column, this behavior works properly only on the first link in the list! On all other links, the rollover behavior triggers at a spot roughly at the horizontal midpoint of the column.

It exhibits this behavior in Firefox, Safari, and Chrome on Mac, as well as IE (don’t know which flavor). Oddly enough, everything works fine in Opera.

Here’s the URL: http://www.hillphoenix.com/temp/website_rework/bakery/bakerySelfService.html

Does anybody have any idea where to begin to troubleshoot this? I’ve gone over my markup and code a dozen times, and haven’t found anything that makes a difference.

thanks in advance!

2

Okay - have localized the problem: There are two divs below the three columns. (All divs are set with position:relative; in the CSS.)

I find that when I alter the left/right position of the lower two divs, the weird rollover effect will shift as well! So apparently these bottom divs are causing some sort of interference with the upper three divs… but why this is, and how to fix it - If anyone has any insight to share, I will be quite grateful. :slight_smile:

3

Here’s a pointer:

Install the Firefox extension Firebug if you haven’t already. Set it to inspect, and point just to the left of “Products”. You’ll see that the ul, that has position:relative; and top:-285px; overlaps a considerable area of the menus above.

I haven’t time to go into any depth, but you might consider putting the upper and lower content into separate containers and then removing the top positioning on siteNav and negative top positioning on siteNav ul.

Are you sure the divs wrapping the uls are really necessary?

4

The rollovers are behaving fine in Opera, but having a look in Dragonfly I would say that it is the negative margin-top on #left .siteNav ul that is causing the problem - that div is overlaying the menus above, and there’s no need for it to be there. Sort out your ‘top’ positioning of the <div> so that you don’t need a margin-top on the <ul> and you should be OK.

5

Thanks so much for the responses. I suspect I might have to restructure my layout to fix this problem.

Victorinox, believe it or not, I’ve never used Firebug. Installed it last night. Already I see how valuable a tool this is.

I’ll let you know my progress.

thanks again!

6

Okay - so, I created a new “lowerLeft” div to contain the lower elements, then absolutely positioned those elements within the lowerLeft div. Works like a charm!

Thanks once again for your time and your insights.