Too much padding in Firefox & IE

HTML & CSS
1

URL: http://goo.gl/7yk4zm

If you look at this site in Chrome, the main navigation (entertaining, decorating, organizing, etc.) is positioned perfectly. The “tail” of the lowercase f in the logo comes very close to the word inspiration.

However, in Firefox and IE, there’s too much spacing.

How can I make them equal? Everything I do ruins the positioning in Chrome.

Thanks! :slight_smile:

2

Hi.

It looks like the different ways that they are handling the negative margin as Firefox pulls the background up but not the content and Chrome pulls the content up as well. I have a feeling Chrome is wrong here and the content should stay cleared of the floats above.

I would probably wrap the content you want dragged upwards in a 100% wide floated element and then negative top margins should work on the element as a whole and not just the background. I haven’t had time to test this out yet as I am just on my way out. I’ll try and call back later :slight_smile:

3

Hi Paul,

Thanks so much for your reply! I’ve removed the negative top margin on the .nav-primary and adjusted the height of the header area. Now they match in Chrome, Firefox and IE. BUT, I need the tail of the f to extend down past the white of the header and be very close to the word inspiration. Do you know how I can do that?

4

Update! Thanks so much for the hint, Paul! I added float: left; and width: 100%; to .nav-primary and it’s working now. :slight_smile:

5

Glad you got it working :slight_smile: