SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Too much padding in Firefox & IE

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update! Thanks so much for the hint, Paul! I added float: left; and width: 100%; to .nav-primary and it's working now.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it working


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •