Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › display: none trouble in IE6

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • October 7, 2008 at 12:31 pm #23368
    daGUY
    Member

    I have a page with a few list items. Next to each list item is a question mark icon that, when moused over, displays a tooltip in a box over the page content. The code is set up like this:

    HTML:

    Code:
  • List item 1 Tooltip
  • List item 2 Tooltip
  • List item 3 Tooltip

CSS:

Code:
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
/* more properties – fonts, colors, etc. */
}

Here’s the problem. In IE6, the <a> expands to the entire area that the <span> occupies (even when it’s not visible), rather than just the little question mark icon. So, moving the mouse over any part of the area that the tooltip occupies (when visible) causes it to display anyway. I want it to only be triggered when you mouse over the question mark icon.

"Display: none" should fully remove the <span> from the page, right? I’m not using visibility (which would hide the element from view but keep it on the page), I’m using display. Once I move the mouse out, the tooltip should be removed from the document, correct?

In Firefox, it works as expected – the <span> only appears when you mouse over the question mark icon directly.

Any ideas?

  • Author
    Posts
    • Viewing 1 post (of 1 total)