SitePoint Sponsor

User Tag List

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

    Uneven padding in Chrome & Firefox

    Hi,

    URL: http://goo.gl/fj3veY

    I'm trying to figure out why the padding is not the same in Chrome and Firefox for the Tutorials and Videos buttons in the Browse by Project section at the top of this page.

    Chrome (& Safari) has too much padding on the top. Firefox (& IE) is pretty much correct. If I make Chrome look correct, then Firefox is way off.

    How can I make them appear the same?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    susannelson, both buttons look to have the same width to me in Firefox, Chrome and Opera, and they both remain equal as I narrow the browser window considerably. I don't see the problem.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for looking!

    I'm sorry I wasn't more clear. It's the text that seems off. In Chrome, the words Videos and Tutorials are too low on the button. In Firefox, they are pretty much where they need to be. Do you see that on your end?

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same here do you mean the margin bottom on the 'Browse by Project'

    Edit - words Videos and Tutorials are the same position in Chrome and Firefox for me - Cache issue?
    Attached Images Attached Images

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    No, I see no difference in the midlines (the vertical position) of the text within those buttons in Chrome and Firefox.

    Perhaps you could post a screenshot of what you see in the two browsers.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. Thanks to both of you for your replies.

    I have had this happen before where I see a difference and nobody else does. I'm on a Windows 7 machine. What are you two using?

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mac here

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    PC. WinXPP

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    padding-issue.png

    This is what I'm seeing in Chrome on my Windows 7 machine.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by susannelson View Post
    padding-issue.png

    This is what I'm seeing in Chrome on my Windows 7 machine.
    The image is awaiting approval. Your note says "in Chrome"... what about Firefox? The issue you've reported in a difference between FF and Chrome. Does your image show that difference?

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I didn't include Firefox in my screenshot above because I mentioned that it's displaying correctly for me there. Since you said Chrome looked correct for you, I wanted to show you what I'm seeing in Chrome.

    So, here's a screenshot showing what I see in Firefox:
    correct-padding-firefox.png

    Edit: How does image approval work? Is there something I need to do or just wait?

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, you showed me yours, so I'll show you mine:

    ProjectFirefox.gif ProjectChrome.gif

    Are you possibly importing a "custom" font that the browsers are handling differently? Try substituting a common (PC) font such as Arial and see if that makes a difference. I'll bet it does.

    (We have to "just wait" for image approval. It's one of those necessities of life on the 'net.)

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep - it's a google font. I didn't think of that!

    Thanks so much for all your help. I'm glad it's looking good on your end!!

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the feedback. Glad it turned out to be easy.

    PS: if my images had been approved already, that was impressively fast!

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    PS: if my images had been approved already, that was impressively fast!
    It's because you're one of the cool kids!


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
  •