Topic: CSS (possibly) problem with hover menu (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22906" title="Pages that link to Topic: CSS (possibly) problem with hover menu (Page 1 of 1)" rel="nofollow" >Topic: CSS (possibly) problem with hover menu <span class="small">(Page 1 of 1)</span>\$

crip Bipolar (III) Inmate From: iasi, romania Insane since: Apr 2002	posted 08-12-2004 14:01 I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag. So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file. The url is this. The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js. If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites. And it's annoying. Can some one give me a hint please? I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing... Thanks in advance... Curiously yours, crip
crip Bipolar (III) Inmate From: iasi, romania Insane since: Apr 2002	posted 08-12-2004 17:15 well, i guess i fixed the problem, i had the level 2 and level 3 layers hidden with display:none and i was making them visible with display:block And that block attribute was causing that little divide between items. I replaced it with inline and all goes well if i remove the doctype declaration in the beggining of the document... When that is present, the items in the menu get clustered togeather, cos thge browser is trying to display them as a single line. Is there something i can change in this: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> so that i can still keep a doctype and the menu working? Curiously yours, crip
Cameron Paranoid (IV) Inmate From: Brisbane Insane since: Jan 2003	posted 08-12-2004 18:40 Not sure if this'll work, but try removing the whitespace inbetween the actual markup, when using a valid doctype I believe white space is still treated as an actual text element and not automatically stripped (at least it's usually not in the gecko based browsers).
crip Bipolar (III) Inmate From: iasi, romania Insane since: Apr 2002	posted 08-12-2004 23:22 Are yuo reffering to any certain white space, or whitespace in general? Curiously yours, crip
Cameron Paranoid (IV) Inmate From: Brisbane Insane since: Jan 2003	posted 08-13-2004 02:02 White space as in: code: <ul> <li> Some text </li> </ul> to become: code: <ul><li>Some text</li></ul> But again, I'm nor sure if that's the actual problem you're having. Also be sure to zero any margin or padding values you aren't explicitly using. ie: .menuClass{margin: 0 0.5em 0 0; padding: 0 0 0 0.5em;} as the default for lists seems to vary quite a lot between different browsers. Parhaps you could work on the CSS for this with all of the elements set to visible (or just not set to display:none), once you have that working all should be dandy.

Topic: CSS (possibly) problem with hover menu (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22906" title="Pages that link to Topic: CSS (possibly) problem with hover menu (Page 1 of 1)" rel="nofollow" >Topic: CSS (possibly) problem with hover menu <span class="small">(Page 1 of 1)</span>\$

crip
Bipolar (III) Inmate

From: iasi, romania
Insane since: Apr 2002

posted 08-12-2004 14:01

I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag.
So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file.
The url is this.
The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js.
If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites.
And it's annoying.
Can some one give me a hint please?
I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing...
Thanks in advance...

Curiously yours, crip

crip
Bipolar (III) Inmate

From: iasi, romania
Insane since: Apr 2002

posted 08-12-2004 17:15

well, i guess i fixed the problem, i had the level 2 and level 3 layers hidden with display:none and i was making them visible with display:block
And that block attribute was causing that little divide between items. I replaced it with inline and all goes well if i remove the doctype declaration in the beggining of the document...
When that is present, the items in the menu get clustered togeather, cos thge browser is trying to display them as a single line.
Is there something i can change in this:

<!DOCTYPE html
PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

so that i can still keep a doctype and the menu working?

Curiously yours, crip

Cameron
Paranoid (IV) Inmate

From: Brisbane
Insane since: Jan 2003

posted 08-12-2004 18:40

Not sure if this'll work, but try removing the whitespace inbetween the actual markup, when using a valid doctype I believe white space is still treated as an actual text element and not automatically stripped (at least it's usually not in the gecko based browsers).

crip
Bipolar (III) Inmate

From: iasi, romania
Insane since: Apr 2002

posted 08-12-2004 23:22

Are yuo reffering to any certain white space, or whitespace in general?

Curiously yours, crip

Cameron
Paranoid (IV) Inmate

From: Brisbane
Insane since: Jan 2003

posted 08-13-2004 02:02

White space as in:

code:

<ul>



	<li> Some text </li>



</ul>

to become:

code:

<ul><li>Some text</li></ul>

But again, I'm nor sure if that's the actual problem you're having.

Also be sure to zero any margin or padding values you aren't explicitly using. ie: .menuClass{margin: 0 0.5em 0 0; padding: 0 0 0 0.5em;} as the default for lists seems to vary quite a lot between different browsers. Parhaps you could work on the CSS for this with all of the elements set to visible (or just not set to display:none), once you have that working all should be dandy.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: CSS (possibly) problem with hover menu (Page 1 of 1)

Insert Slimies »

Insert UBB Code »