susannelson — 2014-04-06T16:51:24-04:00 — #1
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.
paulob — 2014-04-07T12:03:39-04:00 — #2
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-07T17:06:49-04:00 — #3
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-07T18:49:26-04:00 — #4
Update! Thanks so much for the hint, Paul! I added float: left; and width: 100%; to .nav-primary and it's working now.
paulob — 2014-04-08T07:43:31-04:00 — #5
Glad you got it working