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?

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.

Hi, I’m not seeing it either in my chrome/windows, clear your cache to make sure it realy is there :slight_smile:

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.


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