Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    1 pixel off in Chrome

    Ok I know this is a minor detail but I can be perfectionnist from time to time... and was wondering why this is happening.

    If you visit my website with IE10 and FF, the text in the menu on the left is perfectly centered vertically then if you look with Chrome, the text is 1 pixel higher. I don't see this with Chrome on our iPad 4 though.

    Is this a weird Chrome behavior on the PC? I mean the same styling is applied, there is no conditional CSS there.

    I was just curious to know.
    Last edited by Rhialto; 09-17-2013 at 07:37 PM. Reason: Resolved

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I don’t see a specific line-height setting. The implied value is “normal” which …
    Quote Originally Posted by Mozilla Developer Network
    Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
    Try setting specific line height. However, I think you are making things more complicated than necessary. Why are you applying a (static) background image when you could just apply a background color and border? This way (and without applying a fixed height) the items would adapt themselves to the font size and the text would be in the middle, regardless of the size or line height.

    Also, a usability note: Your navigation gets cut off on smaller screens, and hence, the bottom items become unusable. You should make it scroll with the page if the viewport is smaller than its height.

  • Users who have thanked VIPStephan for this post:

    Rhialto (09-17-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    I don’t see a specific line-height setting. The implied value is “normal” which …
    Doh! So much small details to remember... I thought of height but not line-height and that really make sense.

    However, I think you are making things more complicated than necessary. Why are you applying a (static) background image when you could just apply a background color and border?
    For the last few days I had rounded corners on selected item with transparency but I just got rid of that so thanks for the tip, I will look to change that.

    This way (and without applying a fixed height) the items would adapt themselves to the font size and the text would be in the middle, regardless of the size or line height.
    But I've seen in the past that the text don't always show up excactly where I wanted it with a pixel lower than what I prefer with 'q', 'p' and 'g' touching bottom border.

    Also, a usability note: Your navigation gets cut off on smaller screens, and hence, the bottom items become unusable. You should make it scroll with the page if the viewport is smaller than its height.
    Thanks, will look into this. I just recently learned about the viewport declaration so I'll see what I can do.

  • #4
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    I don’t see a specific line-height setting. The implied value is “normal” which …
    Well after looking into this, I see a line-height was specified, it's on the span. I changed it from 19px to 20px and nothing moved on IE10 and FF but text moved down 1px in Chrome! Exactly like I wanted it! Weird stuff...

    I spent 15 minutes trying to change this to colored background with a border instead of an image, and I had trouble.

    I'm trying a new look so I just modified the black border to a transparent border so the border will only show up when hover or active. I guess that if I want to simulate this when removing the bg image I will have to put border:0 then insert margins:1px?

    It works quite well and I wonder how long I should play with the code to change it but that's the best way to learn.

  • #5
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, again a new look, I used the fading background and reversed it vertically and use that as a border, I think I like it. This mean I need to keep using a bg image.


  •  

    Posting Permissions

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