Flyout menu disappering in IE

wentill · 01-29-2013, 09:33 PM

Hi, last time I got really fast and working solution here so maybe someone can help me again. I have been searching for that for few hours but none of the advices actually helped.
I have a web page with vertical "flyout" menu. I have 3px margin among items both in the first level and in the sub-menu. It is working fine in Firefox or Chrome but not in IE. When I have cursor over the margin between items in sub-menu in IE the whole sub-menu immediately disappears.
Is there any way how to solve this?
Here are the codes.
Thank you.

Code:

<div id="menu">
       <ul>
      	  <li><a href="index.html"><span>Home</span></a></li>
	  <li><a href="#">Item 2</a>
            <ul>
              <li><a href="#">Sub-item 1</a></li>
              <li><a href="#">Vzdělání, kultura a sport</a></li>
            </ul>
          </li>
	  <li><a href="maps.html">Item 3</a>
            <ul>
              <li><a href="#">Sub-item 2</a></li>
              <li><a href="#">Sub-item 3</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
	</ul>
</div>

CSS:

Code:

#menu ul {
list-style:none;
padding:0;
margin:10px 15px 10px 15px;
font-family: 'Titillium Web', sans-serif;
font-size:1.1em;
z-index: 2;		
}

#menu ul a {
display:block;
color: #333333;	
text-decoration:none;	
padding:2px 5px 2px 10px;
background: rgba(255, 153, 0, 0.4);
border-left:4px solid #CC6600;	
height:27px;
}

#menu ul a:hover {
padding:2px 5px 2px 10px;
background: rgba(204, 102, 0, 1);
color: #303030;
font-weight:bold;
border-left:4px solid #333333;
}

#menu ul li {
margin-bottom:3px;
border: 1px solid #C13100;
position:relative;
}

#menu ul li:hover {
border: 1px solid #333333;
}

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

#menu ul ul {
position:absolute;
margin:0;
left:100%;
top:-1px;
display:none;
}

#menu ul ul li {
width: 215px;
background: rgba(255, 153, 0, 0.8);
margin:0px 0px 3px 3px;
border: 1px solid #aa5936;
}

#menu ul ul li a {
font-size:0.9em;
}

#menu ul ul li a:hover {
color: #303030;
font-weight:bold;
background: rgba(204, 102, 0, 1);
}

Frankie · 01-29-2013, 09:53 PM

Hey Wentill,

Which IE version? And which doctype do you have over the page?

wentill · 01-29-2013, 10:25 PM

It's in IE9 and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frankie · 01-30-2013, 12:31 PM

Quote:

Originally Posted by wentill

It's in IE9 and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Try this type:

Quote:

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

And you shouldn't use rgba colors yet -- IE8 and lower do not support that.

wentill · 01-30-2013, 02:05 PM

Thanks for answer. It seems that it works better, I have the sub-menu visible when I have the normal paragraph under, but it still disappears when I have a hyperlink in the margin. Maybe it is a simple problem, but honestly I even don't know how exactly the change of doctype has helped

And about the colors, isn't it like that if I use rgba, the IE just takes it like rgb? If not, could I use something like this?

Code:

#menu ul a {
display:block;	
padding:2px 5px 2px 10px;
background: rgb(255, 153, 0);
background: rgba(255, 153, 0, 0.4);
}

Frankie · 01-30-2013, 04:14 PM

Quote:

Thanks for answer. It seems that it works better, I have the sub-menu visible when I have the normal paragraph under, but it still disappears when I have a hyperlink in the margin.

What do you mean with that, the normal paragraph under and a hyperlink in the margin? Do you have it online already?

Quote:

Maybe it is a simple problem, but honestly I even don't know how exactly the change of doctype has helped

To be honest: neither do I. It was just checking for doctype because with a non-standards type, IE uses a different box model. Which can lead to gaps which, if hovered over those gaps, make sub menus disappear. However, I do see a lot of hover lines in your CSS code. The code can be much simpler. See the fourth tutorial on my signature page, which explains a flyout menu that is fully cross-browser.

Quote:

And about the colors, isn't it like that if I use rgba, the IE just takes it like rgb? If not, could I use something like this?

Code:

#menu ul a {
display:block;	
padding:2px 5px 2px 10px;
background: rgb(255, 153, 0);
background: rgba(255, 153, 0, 0.4);
}

No, then it will try to render the last line as well, but will fail. You will have to work with a conditional stylesheet, or use the conditional html tag class method that I used on www.conijnconsultancy.com.

wentill · 01-30-2013, 05:13 PM

Well I have it online here
But so far I have been using exactly this conditional stylesheet you are talking about and I have left out those margins which had been causing problems.
If you open it in another browser you can imagine that the submenu under the option 'Město' disappears in IE every time I cross over the margins in submenu and I have open precisely the web page which I have mentioned in the beginning of this message.

Frankie · 01-31-2013, 09:35 AM

Well, I have tested it with IE7, 8 and 9, all updated (not upgraded) real versions on old(er) machines, but it works in all of them. Does the problem still exist on your machine, and if so: how exactly do you test it?

wentill · 01-31-2013, 12:11 PM

But that is probably because I had there the conditional stylesheet

you shouldn't have seen the margins. I deleted the stylesheet for IE now so if you go on here you should see the same webpage as in the other browsers.
If I open this web page and cross over 'Město' option and then move the cursor over those four options which appear in the submenu, it disappears when the cursor is on the hyperlink 'under' this submenu. I mean in the body itself. And the hyperlink is visible because of those margins. I hope it is understandable how I said that

Frankie · 01-31-2013, 02:53 PM

OK, the submenu disappears if the pointer is between submenu items. Is that what you mean? If so, what happens if you change the doctype like I suggested and take out all the conditional stylesheets?

Another thing: hover of the left hand side of the submenu items, so left of the text links, and you will see that the submenu stays. Like I suggested, that is due to a for IE (in quirks mode) confusing set of :hover lines in the CSS.

wentill · 01-31-2013, 03:56 PM

Yes that's exactly what I mean. So I've changed the doctype and took out the conditional stylesheet for this page.
But at least in my IE the submenu still disappears. I've also noticed that while hovering over submenu items but not over the text links inside them everything is fine. So is the change of doctype the only way how to resolve those "confusing lines"? However, IE shouldn't open this page in quirk mode now, should it?

Frankie · 01-31-2013, 05:09 PM

Strange. In my code editor in IE8 Preview mode, a different doctype makes all the difference, but in a real IE8 it indeed makes no difference -- the problem stays, even with a standards doctype.

That means that, assuming you want spaces between the items, you will have to rewrite the CSS, taking out the double :hover lines. The good news is that that is really easy if you follow my tutorial, even if I say so myself. It is the last tut linked from my signature page.

Let me know when you have succeeded, if you will.

wentill · 02-01-2013, 11:23 AM

I think that in some part of making the web page I was using your tutorial even without your reference

Anyway, I simplified the css code to the state that only those lines are in:

Code:

#menu ul
#menu ul a
#menu ul li
#menu ul li:hover ul
#menu ul ul

But at least in my case the submenu still doesn't work as you can see here
Either with xhtml doctype or the standard one.

Frankie · 02-01-2013, 04:45 PM

OK, one more message, but I don't have time for more.

If you test the menu on http://www.website-laten-maken-amste...nu_vert_2.html you will see that it is cross-browser, even with huge gaps between the sub menu items. Then, if you compare my source code with yours, you will see some significant differences. You are not using relative-absolute positioning, for example.

Just rewrite your code from scratch according to my tut, and your menu will be cross-browser, too. It shouldn't take you more than half an hour. Good luck.

wentill · 02-01-2013, 06:55 PM

Well I've made a special css just for this site and take out all the lines you don't have there. I think I have it really similar. I have the inline-block and relative-absolute positioning in the same lines as you.
But that ain't matter. I'll try to think about it once more during the weekend and if I don't succeed I will use the conditional stylesheet. Hopefully not a lot of people is using IE nowadays

Thank you a lot for your time and help anyway. I really appreciate that