CSS drop-down menu problems

[hestres]

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.

 

[Jonathan N. Little]

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

 

[hestres]

remove the

<br style="clear: both;">

after the menu

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

 

[Jonathan N. Little]

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.