Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Flyout menu disappering in IE

    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);
    }

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Hey Wentill,

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

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It's in IE9 and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by wentill View Post
    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:
    <!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.
    Last edited by Frankie; 01-30-2013 at 01:19 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #5
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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);
    }

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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?

    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.

    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.
    Last edited by Frankie; 01-30-2013 at 09:00 PM.

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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?

  • #9
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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.
    Last edited by Frankie; 01-31-2013 at 03:03 PM.

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #13
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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.
    Last edited by Frankie; 02-01-2013 at 06:38 PM.

  • Users who have thanked Frankie for this post:

    wentill (02-01-2013)

  • #15
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •