CSS drop-down menu problems

Discussion in 'HTML' started by hestres, Mar 6, 2007.

  1. hestres

    hestres Guest

    Hi all,

    I'm trying to deploy a CSS drop-down menu I found here:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    but it's causing all sorts of problems:

    http://www.house.gov/velazquez/lh0205tres/dropdown.html

    1. The spaces between top-level menu items is totally uneven. How can
    I get proportional spacing between them?

    2. The top-level menu is pushing my search box container down the
    page. Something in the style they use (probably the 'em' attached to
    the <li> element) is causing a huge amount of padding to the right and
    pushing the search box out.

    Any suggestions would be appreciate. Or if you know of an even cleaner
    CSS menu let me know.
    hestres, Mar 6, 2007
    #1
    1. Advertising

  2. hestres wrote:
    > Hi all,
    >
    > I'm trying to deploy a CSS drop-down menu I found here:
    >
    > http://www.htmldog.com/articles/suckerfish/dropdowns/
    >
    > but it's causing all sorts of problems:
    >
    > http://www.house.gov/velazquez/lh0205tres/dropdown.html
    >
    > 1. The spaces between top-level menu items is totally uneven. How can
    > I get proportional spacing between them?
    >
    > 2. The top-level menu is pushing my search box container down the
    > page. Something in the style they use (probably the 'em' attached to
    > the <li> element) is causing a huge amount of padding to the right and
    > pushing the search box out.
    >
    > Any suggestions would be appreciate. Or if you know of an even cleaner
    > CSS menu let me know.
    >


    remove the

    <br style="clear: both;">

    after the menu

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2007
    #2
    1. Advertising

  3. hestres

    hestres Guest

    On Mar 6, 12:39 pm, "Jonathan N. Little" <>
    wrote:
    > hestres wrote:
    > > Hi all,

    >
    > > I'm trying to deploy a CSS drop-down menu I found here:

    >
    > >http://www.htmldog.com/articles/suckerfish/dropdowns/

    >
    > > but it's causing all sorts of problems:

    >
    > >http://www.house.gov/velazquez/lh0205tres/dropdown.html

    >
    > > 1. The spaces between top-level menu items is totally uneven. How can
    > > I get proportional spacing between them?

    >
    > > 2. The top-level menu is pushing my search box container down the
    > > page. Something in the style they use (probably the 'em' attached to
    > > the <li> element) is causing a huge amount of padding to the right and
    > > pushing the search box out.

    >
    > > Any suggestions would be appreciate. Or if you know of an even cleaner
    > > CSS menu let me know.

    >
    > remove the
    >
    > <br style="clear: both;">
    >
    > after the menu
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thanks...that worked well for FF and Opera but not for IE6 or 7 though.
    hestres, Mar 6, 2007
    #3
  4. hestres wrote:
    > On Mar 6, 12:39 pm, "Jonathan N. Little" <>
    > wrote:
    >> hestres wrote:


    >
    > Thanks...that worked well for FF and Opera but not for IE6 or 7 though.
    >


    Well a couple of things I see
    1) you have markup errors:

    http://validator.w3.org/check?verbose=1&uri=http://www.house.gov/velazquez/lh0205tres/dropdown.html
    Result for http://www.house.gov/velazquez/lh0205tres/dropdown.html - W3C
    Markup Validator

    2) you are overly complicating your markup with too many wrapper DIVs,
    such as the navbar UL which is a block element in its own right is
    within a DIV "nav" within a DIV "navigatation"! Also your search box is
    within a DIV within a DIV "searchbox", but I do not see any associated
    FORM for the form inputs?

    3) you're mixing CSS and deprecated HTML presentation attributes such as
    align="...", remove and style in your stylesheet, makes it much easier
    to adjust and debug.

    4) lastly since your have the search box and the nav list within the
    same container and you are floating the nav list left, just put the
    search box markup before the list.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    738
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    996
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    452
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    247
  5. Replies:
    3
    Views:
    271
Loading...

Share This Page