CODEWITHSUNDEEP
htmlcss
Joshua Potter
Joshua Potter

Reputation: 9

HTML position 1px difference on Mac and PC

My problem has to do with margin-positioning. It seems that a website I'm working on is interpreted differently on PC and Mac, but I can't figure out why. I've searched on the forums here and nothing has seemed to help.

The problem can be seen at: http://lucaskriebel.com/blog/dev/post.html

The image should line up with the blurred background, which it does on PC, however on Mac (Firefox, Chrome, AND Safari), it is 1px above the line.

The way I have it set up is the blurred background is it's on div, then I'm moving the post content up by setting a negative value for the margin-top (with a greater z-index than the blurred background) so it appears above the blurred background.

Here is the relevant HTML/CSS

Blurred background HTML:

<div id="post_media_permalink_container">

    <div id="post_media_permalink"></div>

</div>

Blurred background CSS:

#post_media_permalink_container {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 699px;
    overflow: hidden;
    background-image: url(../images/post_photo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
}
#post_media_permalink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f2f4f6;
    background-size: cover !important;
    opacity: 0;
}

content_permalink CSS:

#content_permalink {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 50;
    margin-top: -608px;
}

I'm not sure if the problem lies with those elements but I think they do. Hopefully some HTML/CSS gurus can lend a hand.

Upvotes: 0

Views: 711

Answers (3)

Cody Bonney
Cody Bonney

Reputation: 1658

It looks like this is happening because the computed height of the .post_media element varies depending on the browser + OS.

Try adding the following CSS rule to make sure it's always 608px (instead of 607px or 609px) which should ensure that it always lines up.

.post_media {
    height: 608px;
    max-height: 608px;
}

Upvotes: 0

Julio
Julio

Reputation: 401

Like Cody Bonney's answer, I figured that .post_media class could be limited to 608px in height, but since you already have the style for #content_permalink you can also try this fix.

#content_permalink {
   margin-top: -609px;
}

Upvotes: 0

Corstian Boerman
Corstian Boerman

Reputation: 848

As I've tested on Mac (Opera & Safari) the image you're talking about is 1px under the line of the blurred background. On PC (IE10) it's also 1px under this line. This can be fixed by editing your post_media image css class to this:

.post_media img {
width: 916px;
height: auto;
margin-bottom: -6px; /* Instead of -5px */
}

This seems to resolve the problem.

Upvotes: 3

Related Questions