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!

PaulOB
—
2014-04-07T16:03:39Z —
#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

susannelson
—
2014-04-07T21:06:49Z —
#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?

susannelson
—
2014-04-07T22:49:26Z —
#4

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