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 17
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vladdy menu problem with Mozilla

    I have joined a zip with Vladdy menu Horizontal

    it works perfectly for IE6 but not at all for Mozilla1.6 (firefox)

    onmouseover it is impossible to keep the selection if you have the menu in another div (header)

    it works because of htc file for IE

    if anyone can fix it for Mozilla ....

    it could be the best menu :-))
    Attached Files Attached Files
    Last edited by castali; 04-28-2004 at 08:05 AM. Reason: there is no javascript in this menu !!! why is it moved ?

  • #2
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is the full code .. you have just to copy paste and you can see the problem in mozilla1.6 and IE6


    <?xml version="1.0" encoding="iso-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Vladdy menu</title>
    <style type="text/css" title="">
    <!--
    html,body,form,#Header,#MenuG,#Contenu
    {
    margin:0;
    padding:0;
    border:0;
    text-align:center;
    vertical-align:top;
    }
    html,body,form
    {
    width:100%;
    height:100%;
    overflow:hidden;
    }
    body
    {
    font-family:Verdana,arial;
    font-size:10px;
    font-style:normal;
    font-weight:400;
    background:#F6F7EB;
    color:#F6F7EB;

    scrollbar-face-color:#1C516E;
    scrollbar-shadow-color:#1C516E;
    scrollbar-highlight-color:#1C516E;
    scrollbar-3dlight-color:#1C516E;
    scrollbar-darkshadow-color:#1C516E;
    scrollbar-track-color:#1C516E;
    scrollbar-arrow-color:#F6F7EB;
    }
    #Header
    {
    height:6%;
    width:100%;
    background-color:#1C516E;
    color:#F6F7EB;
    vertical-align:middle;
    z-index:2;
    }
    #MenuG
    {
    width:12%;
    height:94%;
    float:left;
    overflow:hidden;
    background-color:#1C516E;
    color:#F6F7EB;
    z-index:1;
    }
    #Contenu
    {
    width:88%;
    height:94%;
    float:right;
    overflow:auto;
    background-color:tan;
    color:#1C516E;
    z-index:0;
    }
    #mulNav li
    {
    behavior:url('IEHover.htc');
    }
    #mulNav
    {
    border:solid #1C516E 1px;
    background:ivory;
    padding:0 0 0 0.2em;
    margin:0 0.2em 0 0;
    text-align:center;
    vertical-align:middle;
    }
    .mulNavN
    {
    width:100px;
    height:auto;
    }
    .mulNavH
    {
    width:100px;
    height:auto;
    float:left;
    }
    #mulNav a
    {
    width:100%;
    display:block;
    }

    #mulNav ul
    {
    display:block;
    margin:0;
    padding:0;
    width:100%;
    text-align:left;
    }

    #mulNav li
    {
    display:block;
    list-style:none;
    padding:0.5em 0 0 0.5em;
    margin:0;
    min-height:15px;
    height:18px;
    width:98%;
    vertical-align:middle;
    }
    #mulNav->li
    {
    padding:0.5em 0 0 0.5em;
    }

    #mulNav li:hover, #mulNav li.hover
    {
    background:#E5C07A;
    }
    #mulNav ul.mulSub0, #mulNav ul.mulSub1, #mulNav ul.mulSub2, #mulNav ul.mulSub3, #mulNav ul.mulSub4
    {
    position:absolute;
    margin:-2px 0px 0px 20px;
    border:solid #1C516E 1px;
    padding:0;
    background:ivory;
    width:200px;
    display:none;
    }

    #mulNav ul.mulRoot li:hover ul.mulSub0, #mulNav ul.mulRoot li.mulHassubhover ul.mulSub0
    {
    display:block;
    }

    #mulNav ul.mulSub0 li:hover ul.mulSub1, #mulNav ul.mulSub0 li.mulHassubhover ul.mulSub1
    {
    display:block;
    }

    #mulNav ul.mulSub1 li:hover ul.mulSub2, #mulNav ul.mulSub1 li.mulHassubhover ul.mulSub2
    {
    display:block;
    }
    #mulNav ul.mulSub2 li:hover ul.mulSub3, #mulNav ul.mulSub2 li.mulHassubhover ul.mulSub3
    {
    display:block;
    }
    #mulNav ul.mulSub3 li:hover ul.mulSub4, #mulNav ul.mulSub3 li.mulHassubhover ul.mulSub4
    {
    display:block;
    }
    #mulNav li.mulHassub
    {
    background:url('plus.gif') no-repeat 94% 50% ;
    }
    #mulNav li.mulHassub:hover, #mulNav li.mulHassubhover
    {
    background:url('plush.gif') no-repeat 98% 50% ;
    }
    -->
    </style>
    </head>
    <body>
    <form name="MainForm" method="post" action="index.htm" id="MainForm">
    <div id="Header">
    <div id="mulNav" class="mulNavH">
    <ul class="mulRoot">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 1</a>
    <ul class="mulSub0">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >A 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End A 1 -->
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >B 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End B 1 -->
    <li class="mulSub"><a class="mulLink" href="#" >C 1</a>
    </ul><!-- End mulSub0 -->
    </li><!-- End A B niv0 -->

    </ul><!-- End mulRoot -->
    </div><!-- End mulNav -->

    <div id="mulNav" class="mulNavH">
    <ul class="mulRoot">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 2</a>
    <ul class="mulSub0">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >A 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End A 1 -->
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >B 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End B 1 -->
    <li class="mulSub"><a class="mulLink" href="#" >C 1</a>
    </ul><!-- End mulSub0 -->
    </li><!-- End A B niv0 -->

    </ul><!-- End mulRoot -->
    </div><!-- End mulNav -->

    </div>
    <div id="MenuG">
    <div id="mulNav" class="mulNavH">
    <ul class="mulRoot">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 3</a>
    <ul class="mulSub0">

    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >A 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End A 1 -->
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
    <ul class="mulSub1">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
    <ul class="mulSub2">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
    <ul class="mulSub3">
    <li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
    <ul class="mulSub4">
    <li class="mulSub"><a class="mulLink" href="#" >B 5</a>
    </ul>
    </li><!-- End mulSub4 -->
    </ul>
    </li><!-- End mulSub3 -->
    </ul><!-- End mulSub2 -->
    </li><!-- End mulSub2 -->
    </ul><!-- End mulSub1 -->
    </li><!-- End B 1 -->
    <li class="mulSub"><a class="mulLink" href="#" >C 1</a>
    </ul><!-- End mulSub0 -->
    </li><!-- End A B niv0 -->

    </ul><!-- End mulRoot -->
    </div><!-- End mulNav -->
    </div>
    <div id="Contenu">
    Content
    </div>
    </form>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would not attempt to debug it until you use strict Doctype
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    with

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    or

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

    same bug for IE and Mozilla

  • #5
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link

    Last edited by castali; 05-01-2004 at 09:11 AM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you use overflow:auto(or scroll) on underlying blocks, use position:fixed for the menu - that will fix it.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #7
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no it change nothing for IE or for Mozilla , I tried it allready before

    position absolute or fixed (Ie doesn't like fixed)

    and if I remove overflow everywhere I am loosing all the advantage of div structure in stead of frameset .....

    I like really your CSS menu with only a small htc for iE but I think I cannot solve that problem .... then the only "clever" menu working is brainjar menu ...
    Last edited by castali; 05-01-2004 at 03:09 PM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You said the problem was with Moz only - so the fact that position:fixed does not work in IE is irrelevant.
    FYI: There is no advantage to making divs behave as a frameset by setting overflow to auto, but quite a few disadvantages.
    If you must, setting navigation position to fixed does fix the problem (once you have valid HTML).
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no even for mozuilla + fixed doesn't change anything

    and yes they are a lot of advantages to have overflow hidden and fixed header and overflow auto on the rest of content to keep allways menu on top

    and my XHTML (very simple) IS valid

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://validator.w3.org/check?uri=ht...line&verbose=1

    User can always scroll to the top to get to your menu. However if you start using scrollable blocks, you take away users ability to use keyboard for scrolling. That is a bigger convinience/accessibilityproblem.
    Also if user has a small screen that does not fit your menu/header, there is no way they can get to the clipped items.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #11
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know anyway a allways on top hearder menu is very practicle ... the problem is a CSS problem not a practicle problem

    the worst from far is a frameset

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Until you have valid (X)HTML it is (X)HTML problem, since CSS properties can not be applied correctly.

    http://www.vladdy.net/Demos/CSSNavFixed.html

    That is what position: fixed is for - it allows to have an element constantly in the viewport without affecting the scrolling of the rest of the content. (use your favourite hack for IE)
    Last edited by Vladdy; 05-01-2004 at 04:32 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #13
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes your page is very good with firefox , but how do you get the same for IE ?

    my favorite hack ??

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use your favourite CSS hack to give IE and real browsers different CSS:
    for example:
    /*IE*/
    #nav
    { position: absolute;
    }

    /* Real Browsers */
    body>#nav
    { position: fixed;
    }

    EDIT: Linked file in the prev. post updated
    Last edited by Vladdy; 05-01-2004 at 04:45 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #15
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    very good ! it works fine and I can even add a overflow:hidden to the boddt if I want to keep a header on top


    another problem I add is to display your menu horizontaly .. the only way I found is <div id="nav">Menu 1</div> <div id="nav">Menu 2</div> <div id="nav">Menu 3</div>
    with a float:left for #nav

    have you a better idea ?

    thanks a lot


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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