Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

How can I get Firefox 4 to correctly display CSS padding for a horizontal nav bar (works in most other browsers, incl. earlier FF)?

  • 4 replies
  • 19 have this problem
  • 37 views
  • Last reply by Love2Learn

Love2Learn
Love2Learn
more options

I have just coded a horizontal nav bar for a site with CSS rollover effects using a:hover and a: focus effects. There are no images, just HTML and CSS. The layout works beautifully in IE 6 - 8, Safari for Windows, Opera for Windows...and Firefox 3.X but behaves poorly in Firefox 4. I've hardly ever had problems with FF before. :(

Here's the menu: http://sddlr01.hottubretailer.com/TestNav2.html

The rollovers extend below the height of the background div and the extra padding on the first and last li tag don't display correctly either. The page passes WebDeveloper toolbar CSS and HTML validation as well.

This is making me batty! Any help deeply appreciated!

Thanks.

All CSS code is in the page for debugging purposes.

I have just coded a horizontal nav bar for a site with CSS rollover effects using a:hover and a: focus effects. There are no images, just HTML and CSS. The layout works beautifully in IE 6 - 8, Safari for Windows, Opera for Windows...and Firefox 3.X but behaves poorly in Firefox 4. I've hardly ever had problems with FF before. :( Here's the menu: http://sddlr01.hottubretailer.com/TestNav2.html The rollovers extend below the height of the background div and the extra padding on the first and last li tag don't display correctly either. The page passes WebDeveloper toolbar CSS and HTML validation as well. This is making me batty! Any help deeply appreciated! Thanks. All CSS code is in the page for debugging purposes.

Modified by Love2Learn

Chosen solution

Leave the height of that DIV #hotTubNav set to auto and do not set a specific height. Using a clear: both property should be sufficient.

Read this answer in context 👍 2

All Replies (4)

cor-el
cor-el
  • Moderator
more options

Chosen Solution

Leave the height of that DIV #hotTubNav set to auto and do not set a specific height. Using a clear: both property should be sufficient.

Love2Learn
Love2Learn Question owner
more options

That worked beautifully for the overflow issue at the bottom!

Any idea how to get FF4 to see the padding on the first and last li tags so that the rollover will extend the full width of the background? Here's the code I'm referring to: 

#nordicSpas a { /* change this id to whatever nav element is first */
	padding-left: 9px;
}
#accessories a { /* change this id to whatever nav element is last */
	padding-right: 10px;
}

Thanks so much for your time!

cor-el
cor-el
  • Moderator
more options

I do not understand what you mean with "the rollover will extend the full width of the background"

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25

Love2Learn
Love2Learn Question owner
more options

Thanks so much for your help. I got everything working!