SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Off by 2px in Chrome??

    I have a new design I just sliced and built using the Blueprint CSS framework.

    Everything looks great in IE/FF/Safari. But, when viewed in Google chrome the top is pushed down 2px lower than all the others. I've fiddled with padding and margin to no avail.

    http://www.sign-up-sheets.com/dev/

    Any ideas?
    The blog: ChrisMonnat.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's not happening in Chrome for Mac.

    EDIT: Hmm, I see it in Chrome PC though. Looks like something up in the branding section is pushing everything down. But hard to tell what.

    You could save yourself a lot of pain by wrapping the branding and sub-branding divs in their own 100% width containers and putting the backgrounds on those containers rather than on the body. That way you don't have to fiddle with painful alignments like this.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm not seeing it either in my chrome/windows, clear your cache to make sure it realy is there
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But, when viewed in Google chrome the top is pushed down 2px lower than all the others. I've fiddled with padding and margin to no avail.
    Hi,
    I assume you are talking about your nav buttons being 2px lower.

    I have seen this before in Win/Safari 3 (webkit) when the element is depending on the font-size and padding to determine the height.

    I just checked Win/Safari 4 and it is OK there.

    The most reliable fix is to set a fixed height and a line-height to match. That will center the text vertically, then remove the padding.

    I just made a live edit in Chrome4 and FF3 with the rules below and it worked fine.

    Code:
    ul#nav-main li a { 
        display:block; 
        width:100px;
        height:34px;
        line-height:34px;
        /*padding:7px 0;*/
        margin:0 2px 0 0;
        background:#3f3f3f;
        color:#adadad;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        text-decoration:none;
        text-transform:uppercase; 
        }


Tags for this Thread

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
  •