CODEWITHSUNDEEP
htmlcssmacosgoogle-chrome
Arun Gupta
Arun Gupta

Reputation: 11

Same amount of pixels rendering differently across OSes

The filter bar on my site - http://grailed.com is rendering differently in Chrome on Windows and Mac even though Chrome says the height is 31px on both.

Here is an image of the Mac rendering. This is how I want it to show up. Here is an image on Mac.

Here is an image of the PC rendering. Zoomed in on the offending area. Here is an image on PC.

On top of that the globe icon and the dollar sign are at differing heights. I have no idea where to start with this issue, any tips would be appreciated!

Upvotes: 0

Views: 82

Answers (2)

selbie
selbie

Reputation: 104559

Let's take a glimpse at your CSS (after being run through an un-minimizer, and using some of the DOM inspection tools of different browsers):

.filterhead {
    text-align: center;
    cursor: pointer;
    background-color: #e1e1e1;
    padding-top: 10px;
}

...

h3 {
    font-family: "SackersGothicStd-Heavy";
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 6px;
    padding-bottom: 5px;
    padding-top: 4px;
    color: black;
    font-weight: normal;
}

The majority of the height of your header is defined by the the "padding-top: 10px" setting as specified by the filterhead class. Padding-bottom is 5px as specified by h3. And the font size is effectively 16px. (10+5+16 == 31).

Change the padding-top attribute of .filterhead from 10px to 5px and it starts to look like what originally showed in the pic representing the Mac rendering. That should probably do it for you.

But no matter what, I'll never be able to rock that $500 dress shirt with the hearts printed on it that you have for sale on your website. That takes some serious stylin' to pull that look off.

http://assets3.grailed.com/uploads/photo/image/11138/display_upload_2F1393376651400-xu5dk1ezfx-b4c0f2f9854185bc01c09e5a9b232221_2F

Upvotes: 1

user3263959
user3263959

Reputation: 1

Try using CSS to specify the size an margins.

Upvotes: 0

Related Questions