/    Sign up×
Community /Pin to ProfileBookmark

UL LI Menu CSS IE VS FF!! Help Plz.

Hi,

I’m building a CSS Menu. The problem is that sub-menu.

Firefox does not seem to get the CSS. IE looks fine.

Here is my code:
CSS:

[code=html]
#menuitems, #menuitems ul {
margin-left: 0px;
padding-left: 0px;
/* list-style-position: outside; */
list-style-image: none;
list-style-type: none;
}

#menuitems li {
margin: 0px;
background-image: url(img/bg-menu-item.gif);
height: 18px;
width: 188px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
}
#menuitems li a{
width: 188px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}

#menuitems li a:hover{
color: #FFFC98;
}

#menuitems li ul li {
margin: 0px;
/*
height: 18px;
width: 188px;
*/
padding-top: 1px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: none;
/* background-color: #000000; */
/* border: 1px solid #00FF00; */
}
#menuitems li li a{
/* width: 188px; */
margin: 0px;
padding-top: 6px;
padding-left: 0 px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}
.menuSlide{ /* Para a abertura de Menus */
margin: 0px;
padding: 0px;
}
[/code]

HTML:

[code=html]
<div id=”menu”>
<p style=”height:58px;”>&nbsp;</p>
<ul id=”menuitems”>
<li ><a href=”#”>Home</a></li>
<li class=”menuSlide”><a href=”#”>Institucional</a></li>
<div class=”menuSlide”>
<ul class=”ff-sub-menu”>
<li><a href=”#” class=”ff-sub-menu”>- Mensagem do Aministrador</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Organigramas</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Comparticipações</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Equipamento</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Recursos Humanos</a></li>
</ul>
</div>
<li class=”menuSlide”><a href=”#”>Serviços</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 3
</p>
</div>
<li class=”menuSlide”><a href=”#”>Notícias</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 4
</p>
</div>
<li class=”menuSlide”><a href=”#”>Contactos</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 5
</p>
</div>
<li class=”menuSlide”><a href=”#”>Links</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 6
</p>
</div>
</ul>
</div>
[/code]

Could you please help me make it look nice in Firefox?

Thanks in advance,

f.

to post a comment
CSS

27 Comments(s)

Copy linkTweet thisAlerts:
@OctoberWindJul 27.2007 — Few things at first glance:

  • 1. your css for #menuitems ul and li have multiple declarations. its "ok" so long as you don't contradict yourself (which you did by the way) but VERY bad programming habits to get into.


  • 2. where is [I]class="ff-sub-menu"[/I] defined?


  • 3. is this a static menu? or is the "menuSlide" supposed to 'slide' when you hover? If you, you will probably need javascript to make that happen.


  • Here's what I did:

    I took your supplied code, dropped it into my editor, commented out some of the css, and threw some abstract background colors (to help see). here is what I got from that. (see attached text file)

    perhaps if you take a second look, and revamp some of the css, i/we can take a second look at it.

    [upl-file uuid=e00f4065-0bf6-4582-8d21-d5d4cc418eb0 size=3kB]menus.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @gizmoJul 27.2007 — Have you declared a DOCTYPE ?
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 27.2007 — Hi,

    here is my docktype code:
    [code=html]<!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">
    [/code]


    I'm usinf JAvascript to Slide the menu. That part is working on both browsers. The problem is Firefox text format styles.

    Where is my contradiction in css? I will now look at your txt file.

    Thanks for all your help!

    Thanks.
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 27.2007 — OctoberWind,

    your CSS has the same not great result in Firefox.

    I'm using Firefox 1.0.6


    f.
    Copy linkTweet thisAlerts:
    @ray326Jul 27.2007 — Start with valid HTML. Your list is full of invalid mark up. The only thing allowed in a UL is an LI.
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 27.2007 — I can not put a DIV inside a LI ?

    f.
    Copy linkTweet thisAlerts:
    @WebJoelJul 27.2007 — I can not put a DIV inside a LI ?

    f.[/QUOTE]
    No. :o
    Copy linkTweet thisAlerts:
    @drhowarddrfineJul 27.2007 — Wait, what? Of course you can. It's perfectly valid.

    But, no, no inside the <ul>, but the <li> is fine.
    Copy linkTweet thisAlerts:
    @ray326Jul 28.2007 — I don't see a div inside an li, I see divs and other things inside a ul.
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 30.2007 — mmmm....

    So.. How can I do that?

    How to Have a Menu in a UL and set a Sub-Menu in another UL that is hidden? I need to have that sub-menu in some block (I was using DIV) so I can use Javascript to activate and de-activate...

    Could you help me on this?


    Thanks in advance.
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 30.2007 — Maybe I just should use P and Div... Right? Why do I need UL!?
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 30.2007 — Look at this code:

    Open in IE and then in FF:
    [code=html]
    #menuitems {
    padding: 0px;
    margin: 0px;
    }

    .menuSlide{ /* Para a abertura de Menus */
    width: 188px;
    margin: 0px;
    }
    div.menuSlide p{
    margin: 0px;
    border: 1px solid #000099;
    }
    a.home-menu:hover, a.home-sub-menu:hover{
    color: #FFFC98;
    }
    a.home-menu {
    width: 188px;
    height: 18px;
    margin: 0px;
    background-image: url(img/bg-menu-item.gif);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    }
    a.home-sub-menu{
    width: 188px;
    height: 18px;
    padding-top: 1px;
    padding-left: 6px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: none;
    }
    </style>
    </head>

    <body>
    <div id="top"></div>
    <div id="menu">
    <p style="height:58px;">&nbsp;</p>
    <div id="menuitems">
    <p><a href="#" class="home-menu">Home</a></p>
    <p class="menuSlide"><a href="#" class="home-menu">Institucional</a></p>
    <div class="menuSlide">
    <p><a href="#" class="home-sub-menu">- Mensagem do Aministrador</a></p>
    <p><a href="#" class="home-sub-menu">- Organigramas</a></p>
    <p><a href="#" class="home-sub-menu">- Comparticipações</a></p>
    <p><a href="#" class="home-sub-menu">- Equipamento</a></p>
    <p><a href="#" class="home-sub-menu">- Recursos Humanos</a></p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Serviços</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 3
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Notícias</a></>
    <div class="menuSlide">
    <p>
    Sub-Menu 4
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Contactos</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 5
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Links</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 6
    </p>
    </div>
    </div>

    </div>[/code]



    What is wrong in here?!


    f.
    Copy linkTweet thisAlerts:
    @fdozeauthorJul 30.2007 — Ok..

    I made some changes but..

    Look at this code:
    [code=html]
    #menuitems, #menuitems p {
    padding: 0px;
    margin: 0px;
    }

    .menuSlide{ /* Para a abertura de Menus */
    display: block;
    width: 188px;
    margin: 0px;
    }
    a.home-menu:hover, a.home-sub-menu:hover{
    color: #FFFC98;
    }
    a.home-menu {
    display: block;
    width: 188px;
    height: 18px;
    margin: 0px;
    background-image: url(img/bg-menu-item.gif);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    }
    a.home-sub-menu{
    display: block;
    width: 188px;
    height: 18px;
    padding-top: 2px;
    padding-left: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 8px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: none;
    }
    </style>
    </head>

    <body>
    <div id="top"></div>
    <div id="menu">
    <p style="height:58px;">&nbsp;</p>
    <div id="menuitems">
    <p><a href="#" class="home-menu">Home</a></p>
    <p class="menuSlide"><a href="#" class="home-menu">Institucional</a></p>
    <div class="menuSlide">
    <p><a href="#" class="home-sub-menu">- Mensagem do Aministrador</a></p>
    <p><a href="#" class="home-sub-menu">- Organigramas</a></p>
    <p><a href="#" class="home-sub-menu">- Comparticipações</a></p>
    <p><a href="#" class="home-sub-menu">- Equipamento</a></p>
    <p><a href="#" class="home-sub-menu">- Recursos Humanos</a></p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Serviços</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 3
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Notícias</a></>
    <div class="menuSlide">
    <p>
    Sub-Menu 4
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Contactos</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 5
    </p>
    </div>
    <p class="menuSlide"><a href="#" class="home-menu">Links</a></p>
    <div class="menuSlide">
    <p>
    Sub-Menu 6
    </p>
    </div>
    </div>

    </div>
    [/code]


    If you build this code in a page and open in FF vs IE you will notice that in Firefox the element
    [code=html]<p><a href="#" class="home-sub-menu">[/code]
    Is not on the left padding position set. Is more at the left. And in IE is more to the right!

    How can I solve this!?

    Thanks in advance.
    Copy linkTweet thisAlerts:
    @ray326Jul 30.2007 — Maybe I just should use P and Div... Right? Why do I need UL!?[/QUOTE]Because a menu is a list of links.
    Copy linkTweet thisAlerts:
    @blis102Jul 31.2007 — From what I gleaned from the above post you are trying to make a menu, with sub menu items correct? Javascript will show the sub menu item onclick or on hover correct? If that is the case, try this out:

    [CODE]<!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">
    <head>

    <title>Title Here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    /* Menu
    -------------------------------------------------- */
    #menu {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #menu li {
    margin: 0;
    padding: 0;
    }
    #menu a {
    width: 200px;
    display: block;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #006699;
    text-decoration: none;
    padding: 3px 3px 3px 10px;
    background: #E8F4FF;
    }
    #menu a:hover {
    color: #005782;
    background: #D7ECFF;
    }

    /* Submenu
    -------------------------------------------------- */
    #menu ul {
    display: none; /* Hides the submenu */
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #menu ul li {}
    #menu ul a {
    color: #BB4A00;
    background: #FFEEDF;
    }
    #menu ul a:hover {
    color: #973D00;
    background: #FFE0C4;
    }

    </style>

    </head>
    <body>


    <ul id="menu">
    <li><a href="#" title="Title Here">Menu Item</a></li>
    <li><a href="#" title="Title Here">Menu Item</a>
    <ul>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    </ul>
    </li>
    <li><a href="#" title="Title Here">Menu Item</a>
    <ul>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    <li><a href="#" title="Title Here">Submenu Item</a></li>
    </ul>
    </li>
    <li><a href="#" title="Title Here">Menu Item</a></li>
    <li><a href="#" title="Title Here">Menu Item</a></li>
    </ul>


    </body>
    </html>[/CODE]


    Then just use your javascript to show the nested UL onclick or on hover. This is a much more standard way of creating nested lists and is much cleaner than the way you have above.
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 03.2007 — Hi,

    Thanks! That really helped me a lot!


    But...........

    I'm not using Background change onHover.. I'm using Font color change.

    I noticed that
    [CODE]#menuitems a:hover {
    color: #FFFC98;
    }[/CODE]

    ( I put all the UL menu inside a #menu div. The main menu is UL#menuitems. )

    But on mouseOver under Firefox the text color does NOT change... Where is my error?!

    [CODE]
    /* Menu
    -------------------------------------------------- */
    #menuitems {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #menuitems li {
    margin: 0;
    padding: 0;
    }
    #menuitems a {
    display: block;
    width: 208px;
    height: 18px;
    margin: 0px;
    background-image: url(img/bg-menu-item.gif);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    }
    #menuitems a:hover {
    color: #FFFC98;
    }

    /* Submenu
    -------------------------------------------------- */
    #menuitems ul {
    /* display: none; Hides the submenu */
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #menuitems ul li {}
    #menuitems ul a {
    padding-top: 4px;
    padding-left: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: normal;
    background-image: none;
    }
    #menuitems ul a:hover {
    color: #FFFC98;
    }
    /*
    -------------------------------------------- */
    .menuSlide{ /* Para a abertura de Menus */
    padding: 0px;
    margin: 0px;
    }
    /* -------------------------------------------- */
    [/CODE]


    Thanks in advance.
    Copy linkTweet thisAlerts:
    @blis102Aug 03.2007 — What is the Javascript you are using? What is the HTML? could you post it all so that I can check it out?

    Here is a dropdown menu I built that may or may not do the job for you:

    http://dev.organixdesign.com/demos/drop_down_menu/

    Let me know if that helps at all
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 03.2007 — [CODE] $$('li.menuSlide').each(function(li){
    var link = li.getElement('a');
    var block = link.getNext();

    var fx = new Fx.Slide(block);

    fx.hide(); // f.

    link.addEvent('click', function(){
    fx.toggle();
    });

    });[/CODE]

    [code=html]<div id="menu">
    <p style="height:58px;">&nbsp;</p>
    <ul id="menuitems">
    <li><a href="#" title="Title Here">Home</a></li>
    <li class="menuSlide"><a href="#" title="Institucional">Institucional</a>
    <ul>
    <li><a href="#" title="Mensagem do Aministrador">- Mensagem do Aministrador</a></li>
    <li><a href="#" title="Organigramas">- Organigramas</a></li>
    <li><a href="#" title="Comparticipações">- Comparticipações</a></li>
    <li><a href="#" title="Equipamento">- Equipamento</a></li>
    <li><a href="#" title="Recursos Humanos">- Recursos Humanos</a></li>
    </ul>
    </li>
    <li class="menuSlide"><a href="#" title="Serviços">Serviços</a>
    <ul>
    <li><a href="#" title="Monotorização Estrutural">- Monotorização Estrutural</a></li>
    <li><a href="#" title="Cartografia Aerofotogrametria">- Cartografia Aerofotogrametria</a></li>
    <li><a href="#" title="Topografia Aplicada">- Topografia Aplicada</a></li>
    </ul>
    </li>
    <li><a href="#" title="Notícias">Notícias</a></li>
    <li><a href="#" title="Links">Links</a></li>
    <li><a href="#" title="Contactos">Contactos</a></li>
    </ul>
    </div>[/code]
    Copy linkTweet thisAlerts:
    @blis102Aug 07.2007 — um, dont know why the font wouldnt change on hover, i dont see where things went wrong. maybe a conflicting rule in your css or maybe the javascript is messing with things. hope you can find a solution cause i dont know where it could be
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 07.2007 — Hi,,

    Imanage to get things right.

    Now my only problem is in Javascript code. Some margins don´t get the same after open/close sub-menu. I guess its because of Javascript someway.. what do you think?

    f.
    Copy linkTweet thisAlerts:
    @blis102Aug 07.2007 — Um, if its a border problem its most likely CSS actually, but Im not too sure whats going on in your Javascript.
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 07.2007 — Hi,

    in Javascript I just hide, Display and Visibility that <div class="menuSlide">.

    But.. After open/close its seems that the link to submenu gets extra heigth.. 1 or 2 pixels.. maybe some margins.. I do not know..


    f.
    Copy linkTweet thisAlerts:
    @blis102Aug 07.2007 — weird, im not sure where that would come from. double check your css and also make sure that the javascript is applying any extra classes to the dropdown that would make it do that
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 08.2007 — My Javascript looks fine.

    I do not know what is wrong...

    Maybe some 'empty' space left for the hidden element or somethig...


    f.
    Copy linkTweet thisAlerts:
    @blis102Aug 08.2007 — Is the javascript doing:

    display: none;

    or

    visibility: hidden;

    or something else?
    Copy linkTweet thisAlerts:
    @fdozeauthorAug 08.2007 — Both. Doing both.


    it helps?


    f.
    Copy linkTweet thisAlerts:
    @blis102Aug 08.2007 — Um, not really a good idea in my opinion. display: none; is more than sufficient and actually the proper syntax for what you want. According to the W3C, visibility: hidden; makes the object disappear, but still affects the layout. I would say that is where your problem is:

    The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout ([B]set the 'display' property to 'none' to suppress box generation altogether[/B]). [/QUOTE]
    from: http://www.w3.org/TR/REC-CSS2/visufx.html#visibility

    (note: emphasis mine)

    Cheers
    ×

    Success!

    Help @fdoze spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...