Strange JS Behavior

Brendan CM · Mar 3, 2006

I'm here trying to figure something out, on the new version of IE7,
this dynamic HTML menu doesn't display items properly. An example
here: http://www.abit-usa.com That same menu is being used on a game
site that I'm a developer for, I'm trying to figure out what causes the
inconsistancy on IE7. Basically, the menu pops up, but as soon as you
start moving around the menu (on abit-usa.com) you'll notice items with
spaces in their label have the second half of the text disappear.

What in reality is happening is the text is being pushed down to a line
below, and since there are items there, it looks like it disappears. I
am trying to nail down where exactly this is happening, but I can't
figure it out. I got as far as figuring out that a:hover stylesheets
seem to influence whether or not it pushes the second item in menu
down, and that changing the color of the background on the item seems
to also influence it. Anyone?

Randy Webb · Mar 4, 2006

Brendan CM said the following on 3/3/2006 4:32 PM:

I'm here trying to figure something out, on the new version of IE7,
this dynamic HTML menu doesn't display items properly. An example
here: http://www.abit-usa.com That same menu is being used on a game
site that I'm a developer for, I'm trying to figure out what causes the
inconsistancy on IE7.

Anyone?

An IE7 Beta specific group perhaps? :-x

VK · Mar 4, 2006

Brendan said:
I'm here trying to figure something out, on the new version of IE7,
this dynamic HTML menu doesn't display items properly. An example
here: http://www.abit-usa.com That same menu is being used on a game
site that I'm a developer for, I'm trying to figure out what causes the
inconsistancy on IE7. Basically, the menu pops up, but as soon as you
start moving around the menu (on abit-usa.com) you'll notice items with
spaces in their label have the second half of the text disappear.

What in reality is happening is the text is being pushed down to a line
below, and since there are items there, it looks like it disappears. I
am trying to nail down where exactly this is happening, but I can't
figure it out. I got as far as figuring out that a:hover stylesheets
seem to influence whether or not it pushes the second item in menu
down, and that changing the color of the background on the item seems
to also influence it. Anyone?

Just my thoughts:

IE 7.x supports :hover selector for all elements, not for links only.
That may introduce some CSS overlapping effects on your page. I'm not
saying it's the case - I'm just suggesting to look at.

I did no check what is the containing element for menu items (DIV,
SPAN, A itself ?) In any case you may want to have a block element
there (a natural one or forced over display property) with
white-space: nowrap;
Try to set it to see the immediate effect.

You also may want to put some DOCTYPE to switch IE into W3C box model
("CSS1Compat" by IE's terms). This will save a lot of time for
fine-tune debugging between IE and other UA's. In the most lazy case it
is sufficient to place:
<!DOCTYPE "I Love Microsoft!">
<html>
....

.... but really better to use some official DTD (Transitional, Frames or
Strict). Just remember that with Transitional you have to use the DTD
link either, otherwise it will be ignored by IE. Other DTD will be
respected with or without DTD links.

Amateur JS navbar request	6	Nov 2, 2021
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
JS querySelector addEventListenerer index getElementsByClassName parent div only	1	Jan 25, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Multi select options in a menu	1	Oct 30, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Strange classmethod mock behavior	0	Oct 25, 2011
Only one table shows up with the information	2	Mar 29, 2023

Strange JS Behavior

Brendan CM

Randy Webb

VK

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads