1

I've been working on a menu and have it perfectly working in Chrome/Safari. The URL is http://www.penuli.nl/aboutvanwow.html.

But FF is giving me a hard time with the tooltip. Each time I hover over a button, all the other buttons (which are divs inside a list item) jump down to the bottom of their parent, the list item. I can't understand why they do that, since all the items are big enough to fit into each other without 'pushing' other items around.

IN THE COMMENT BOX IS A LINK TO AN ILLUSTRATION I MADE ABOUT THE MENU (i don't have enough reputation points to post images)

The thing that makes it maybe a bit more complicated (but it shouldn't got anything to do with it), is that the buttons animate into the page. This means that their position is relative.

I've found one solution thanks to you guys of Stackoverflow, reading another question, but this would mean I have to alter my animation: overflow: hidden does work when I apply it to the list item, but I have an animation after a click events which makes all the button 'fall' down the page. When nothing works I can of course cancel that animation, it's more important the site works neatly then an animation more or less, but a solution which works for both would be excellent! Thanks in advance.

Some CSS (without some lines for the start and end animation):

#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}

#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}

#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}

ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}

#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}
Galaxy Surfer
  • 84
  • 2
  • 10
  • http://www.penuli.nl/menu-Van-Wow.png a drawing of the situation (which I couldn't post directly in the question since I don't have enough points yet). – Galaxy Surfer Dec 14 '10 at 09:40

2 Answers2

0

Wow, that is pretty weird. Maybe change your list items to a collection of divs?

Spiny Norman
  • 8,277
  • 1
  • 30
  • 55
  • I rather keep my structure as clean as possible. I've read a long discussion on stackoverflow about div's versus ul/ol's, very interesting: http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div – Galaxy Surfer Dec 14 '10 at 10:53
  • Hmm, I assumed you were already using `float`, mutter mutter. Anyway, would you consider your menu to be a list (and an ordered list at that), rather than a collection of divisions? Also, that's a nice-looking website you got there, good luck finishing it. – Spiny Norman Dec 14 '10 at 11:45
0

making the list items floating can fix your problem.

in your #wrap ol#menu li rule, exchange:

display: inline-block;

with:

float:left;

(keeping the display:inline-block isn't a problem, but it is not needed anymore since the elements are floating)

Dan
  • 2,321
  • 3
  • 27
  • 40
  • Holy moly! What an elegant and simple answer, this solved my problem straight away, thanks a lot! Can you tell anything about the background of the problem or is it just something you should know? Thanks again! – Galaxy Surfer Dec 14 '10 at 10:50