HTML & CSS
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.
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
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?
Update! Thanks so much for the hint, Paul! I added float: left; and width: 100%; to .nav-primary and it's working now.
Glad you got it working
This topic is now closed. New replies are no longer allowed.