CSS help - positioning horizontal spry menu

i built horizontal spry menu 800 px wide , horizontally centered within div.

 

but set height of menu bar 2 ems in attempt force parent div have same height menu bar. don't think right approach:

 

1) read somewhere it's not advisable set height of menu items; and

 

2) in opera (have tested in opera, safari, firefox), see little vertical space (in gray area) underneath spry menu -- want heights match, @ actual size , when user resizes text , menu bar expands.

 

2 examples:

 

http://stephencoren.com/sprymenu/index.htm -- set height: 2ems; in spry menu rule ul.menubarhorizontal

 

http://stephencoren.com/sprymenu/index_2.htm, removed 2 ems height setting. in addition losing gray background color left , right of menu, content area moves -- i'm assuming 2 em distance removed

 

questions:

 

1) doing wrong? think it's basic css stuff i'm not comprehending.

 

2) should doing?

try this:

 

/* menu item containers, position children relative container , no longer fixed width sized accommodate text of differing lengths */
ul.menubarhorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    line-height: 3em; /**adjust required**/
}

 

nancy o.
alt-web design & publishing
web | graphics | print | media  specialists
http://alt-web.com/
http://twitter.com/altweb

More discussions in Dreamweaver support forum

adobe