Welcome to WebmasterWorld Guest from 54.163.39.19

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal submenu drop appearing below right column in IE

CSS dropdown menu

     
3:23 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts:1308
votes: 0


Hi I have a problem with i.e
I have an horizontal css menu 100% width.
There is 2 levels of submenus.
The submenus is onmouseover using css and csshover.htc.
In 1024 I donīt have any problems,
but in resolucion 800 in i.e the submenus comes below the images in the right column.
The menu itself is on top of 3 columns.
In firefox the submenus is above as it should be.
As I canīt put an link to the page in question this is the css:
#menu {
float: left;
width: 100%;
margin:auto;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 14.25%;
float: left;
background-color:#66CCFF;
}
#menu ul ul ul .level3{
\width: 350px;
w\idth: 325px;

}
#menu ul ul .level4{
\width: 275px;
w\idth: 235px;}
#menu ul ul .level5{
\width: 260px;
w\idth: 220px;}
#menu ul ul .level6{
min-width: 145px;
width:expression(document.body.clientWidth < 780? "145px": "auto" );
}
#menu p {
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000099;
text-align:center;
background:url("background5.gif");
font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight:bold;
}

#menu ul ul .level2{
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
color: #000099;
background: #FFFFFF;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px;
text-decoration:none;
\width: 200px;
w\idth: 160px;}

#menu a{
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
color: #000099;
background: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px;
text-decoration:none;
}

#menu a:hover {
color: #000099;
background: #FFFF66;
}
#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
width: 100%;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

.area {font-family:arial, helvetica; font-size:10px; color:#000000; width:105px;}
.duermen {font-family:arial, helvetica; font-size:10px; color:#000000; width:40px;}
.tipocasa {font-family:arial, helvetica; font-size:10px; color:#000000; width:80px;}
.mes {font-family:arial, helvetica; font-size:10px; color:#000000; width:90px;}
.dia {font-family:arial, helvetica; font-size:10px; color:#000000; width:40px;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%; }
#menu ul li a {height: 1%;}

#contentindex {margin-left:169px; margin-right:169px; margin-top: 50px;

</style>
<![endif]-->

Anybody could help?

4:06 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi Helen,
do I recognise my own menu/code? ;)

I think it is so my first suggestion is to try changing the placement of the z-index value

#menu li {position: relative;}

to

#menu li {
position: relative;
z-index: 500;
}

also there is an error at the end of that code, but it's possibly just a typo and not sure it relates to this anyway.

#contentindex {margin-left:169px; margin-right:169px; margin-top: 50px; }

</style>


there's no closing curly bracket

if the first suggestion doesn't help, is the right column (where the menu is dropping behind) an iframe or is it absolutely positioned..?

z-index tweaking should help, except if it's an iframe, but as it's working in FF I'm guessing no iframes

Suzy

5:36 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts:1308
votes: 0


Hi Helen,
do I recognise my own menu/code? ;)

I donīt know, its from an tutorial "Tutorials provided by Claire" and I changed it to 100% width and 2 levels so it changed a lot.

I tried to put z-index: 500; everywhere and nothing still the same.
The right column is absolute.
Here is the relevant css for the page layout:
#container
{
position:relative; min-width:775px; height:inherit; width: 100%;
margin: 0px 10px 10px 10px auto;
}
#leftindex { position:absolute; top:230px; left:2; width:155px; height:100%; }
#top {
height: 115px; white-space: nowrap;
}
#contentindex {margin-left:184px; margin-right:154px; margin-top: 55px; padding-left:10px;
}

html>body div#Central { margin-left:186px; margin-right:156px; }
div#derecha { position:absolute; top:230px; right:0; width:170px; height:100%; padding-right:3px;}

6:43 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Helen, yep that's me :)

The only impossibility with this (and other CSS) menu code is to get it to appear over the top of an iframe in FF, Opera, so this should be fixable.

It will be a z-index, stacking order issue because of the absolute positioning of the right column.. however without the HTML I cannot reproduce exactly which stacking context you have.

Try changing (from your original post) the

#menu li {position: relative;}

to

#menu li:[b]hover[/b] {
position: relative;
z-index: 500;
}

also remove the z-index from:

#menu ul ul {
position: absolute;
z-index: 500;
width: 100%;
}

and you could try adding a low z-index to the right div (derecha?) ~ although I think that might cause FF problems even if it works in IE :o

if that doesn't help then post a bare-bones example of your HTML markup, i.e. the order that the container, content, left, right and menu divs are marked up/nested in, please.

IE treats relative/absolute positioning differently than FF

Suzy
aka Claire

11:53 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts:1308
votes: 0


Doing the changes you said and adding z-index: -10 to the right column maked it work in i.e, but in FF the right column just disappeared, so I added it to the <!--[if IE]> style. So that is perfect, thanks a lot.

I just discovered that in FF when mouseover the submenus where I mouse over blinks once, disappears than appears again.
On your menu that donīt happen.

11:58 pm on Dec 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts:1308
votes: 0


the blinking thing is fixed,
was due of deleting this:
#menu li{
position: relative;
}
11:27 am on Dec 31, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Great Helen, glad it works for you now,

and many thanks for letting me know about the FF flicker thing.. I'll try to remember that now too ;)

I think the

li:hover 
trick is more applicable to the vertical menu, but I'm sure I've not seen all possible scenarios yet

Happy New Year!

Suzy

12:36 pm on Dec 31, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts:1308
votes: 0


Happy new year to you as well,
and thanks a lot.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members