Question

I have a list of links that are using nested span elements as a rollover with extra information on hover.

See this page: http://kenbrookyouth.com/summercamp11/

So in firefox everything in that list (see the list of camps in the “Summer Camp” section of the page, just below the two descriptions; there are two lists – one of the left and the right) looks fine, including when you hover over the list items (camp names). Doing so produces the desired effect of the hidden nested spans appearing with the age info for each camp.

However in Chrome and Safari the list items have a strange jump-glitch on hover, such that it appears the hidden nested span is actually being displayed as block, but not floated as it should.

Any tips on this one?

Answer 1

The problem can be solved by wrapping the text in your links in <span> tags (for instance “Adventurers” in the first one). For some reason (don’t know the exact reason), floats behave best when other elements around them have widths or are also floating or both. Text also becomes unpredictable when it’s not immediately surrounded by a tag, so I try to keep all text in spans (or h1, h2 or any other text-appropriate tag).

Another way to fix it was to add width to the <a> tag, but you’d have to give different widths for each link, so just use the span tags.