9

I'm really floored as to why this is happening. The posts on http://syndex.me have a margin of 2px. When the page initially loads, this is adhered to. When the second batch of posts loads (14 posts down it kicks in) You'll see that for some bizarre reason, the posts to the right are actually 2px shorter than they should be.

Weirder still, inspecting the posts shows that they are in fact set with a margin:2px And even more weirdness, this only happens on the left or right margins, but not the top and bottom (?!)

Having done front end for quite a while, I'm pretty confident this is a strange case.

I'm getting this rendering issue on firefox, safari and chrome.

If I roll over the posts using the inspector, I can see that each post does indeed have a 2px margin, it's just that the margin of the second post (to the right) starts as if the post alongside it had a zero margin, but it positively does have one too.

It's as though the posts are ignoring their neighbours left and right margins?

One thing, the posts are using display:inline-block. What i don't understand is: why does the behaviour only kick in after lazy-load? and I know that inline elements have a natural space of 2 to 4 px, but this is ignoring 2px, seems weird.

I don't know where to start looking on this one, any help would be appreciated.

RGBK
  • 2,048
  • 5
  • 35
  • 55
  • 2
    FWIW, I have Chrome/Linux and if I understand your meaning of "posts" correctly, I am seeing a gap between posts. Or did you mean there should be 4px in total (2 from each element where they meet)? http://stommepoes.nl/tempmargins.png There are many divs here; do you see this with a reduced test-case of simply single divs or images, also lazy-loaded? – stommepoes May 29 '12 at 10:47
  • Dag Stommepoes, Yes 4px in total all margins. After lazy load, all posts still have this when looking at the inspector, but still there's in total, 2px not 4px between posts alongside each other, but not above or below. That just doesn't make sense to me. – RGBK May 29 '12 at 11:25
  • 2
    I've had a dig round the css, and really, this is pretty odd. However, the CSS/HTML structure itself is quite involved - as stommepoes says. You should try simplifying as much as possible, and keep simplifying until the margin behaviour is as you want, then progressively restore elements to help you find where this is happening. – danp May 29 '12 at 11:48
  • Totally, it's pretty nested, but stripping that down, especially with this being a tumblr skin will be a massive undertaking. I'm actually just interested in why this is happening. Maybe I'm not understanding something about inline-block behaviour or something. But anyway, the actual 'bug' is happening on the super container of all the nested divs, which in theory wouldn't be affected by it's children anyway, right? Just so odd. Also it happens on ALL the posts, which each have different nest structures anyway. – RGBK May 29 '12 at 14:55
  • Instead of trying to reduce your current page, start a separate set of code with simple inline-block elements and try to build up. That might be way easier since you'd be indeed messing with a complex blogging system. – stommepoes May 29 '12 at 16:33
  • Looks like the margin is there but that the right edge is protruding 2px as well. – mowwwalker May 30 '12 at 22:59
  • I don't see any mystery negative margin... I see `.post_margin_adjustment{margin-right:-4px;}`, which seems to cause this "smaller margin" effect that I think you're asking about. – Nightfirecat May 30 '12 at 23:11
  • Just putting it out there, probably could have include a nudity warning...It's nice to have a heads-up sometimes. – Will May 31 '12 at 16:04
  • 5
    It wouldn't hurt to fix some of these [137 HTML validation errors](http://validator.w3.org/check?uri=http%3A%2F%2Fsyndex.me%2F&charset=%28detect+automatically%29&doctype=Inline&group=0). Most often, it does help resolve many strange issues. – Sparky May 31 '12 at 16:21
  • Are you loading the posts into the correct place? They seem to be loading after your iframes and bottom js. – Timbadu May 30 '12 at 23:01

4 Answers4

10

When the page first loads, there is whitespace in the HTML between each <div class="post">. Each chunk of whitespace is rendered as one space character (usually 4px wide). <div class="post_margin_adjustment"> counteracts this with its margin-right: -4px, so the gap between the initial posts is 8px:

  4px (margin-right from the left post)  
+ 4px (space character)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 8px

When the Infinite Scroll plugin loads the next page, it grabs the new div.post elements and inserts them into the page, without the whitespace. So the gap between the new posts is 4px:

  4px (margin-right from the left post)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 4px

This is why the gap between new posts is narrower than the gap between the initial posts.

To fix this, I would:

  1. Remove the whitespace between initial posts:

    $('div.post').detach().appendTo('#posts');

    on page ready/load, which emulates what the Infinite Scroll plugin is doing.

  2. Remove margin-right: -4px; from .post_margin_adjustment.

The gap between initial and new posts should now both be 8px wide.

Jeffery To
  • 11,836
  • 1
  • 27
  • 42
  • But why this margin occurs? I have read about this before in a blog post & i an using same -4pa margin hack. But what is the root cause for this?? – SVS Jun 04 '12 at 17:54
  • @SurendraVikramSingh Which "this margin" are you referring to? Did you mean the space character in between elements/posts? – Jeffery To Jun 04 '12 at 18:06
  • I am referring to margin because of using inline-block. – SVS Jun 04 '12 at 18:08
  • 2
    @SurendraVikramSingh Setting `display: inline-block` doesn't create any (extra) margins, but whitespace before/after the element is rendered as if the element is inline. Just as `a[space][space][space]b` is rendered as `a[space]b`, the same thing happens with inline-block elements. – Jeffery To Jun 04 '12 at 18:15
4

First, this SO Answer is a complement to the SO Answer provided by Zuul on this page. I could not EDIT his answer or the PEER REVIEW process did not work for whatever reason.

Credible and/or official sources has been provided for the SO Question.

Reference: "It can't be that computed style according to the inspector is saying one thing but visually it's doing another?"

In this case Firefox has a 3D Viewer for CSS built in. It shows revealing information that the images are loaded correctly but the margin-right is creating the issue. Let me illustrate this via captured images for your Gold Helmet photo.

This first image shows the loaded image in it's own container via the dotted-lines. Notice however that the image itself extends outside dotted-lines on the right side: marginError.jpg


This second image is a close-up using Firefox 3D Viewer. Here you can see the original container is placed on the page correctly via the bottom level of blue shown. This shows that the onload process has respected the correct CSS distance to the image on the right. Although the text at the upper right is blurry, there is a checkmark for margin-right in use of -4px: cssRespectedOnload.jpg


This final photo has the checkmark for margin-right removed. Notice that the photo is now presented correctly: removeMarginOffset.jpg


The above can be duplicated using Firefox when using the 3D Viewer for CSS.

NEW: You can right click each image and choose view image to see larger version.

Community
  • 1
  • 1
arttronics
  • 9,957
  • 2
  • 26
  • 62
3

If I've got the problem right, by analyzing the page with FF12.0 using Firebug, I see:

.post_margin_adjustment {
    margin-right: -4px;
}

And that is pulling the left posts to the right side, thus causing the layout to be disrespectful towards your:

.index .post {                                         /* syndex.me (line 469) */
  margin: 4px;
}

Removing the negative margin, seems to solve the issue.

Note:

You are talking about margin:2px, but what I see on the current css is margin:4px;, so, the total between posts is 8px if fixed the issue of the negative margin.

Just used the "ruler" from the "web developer 1.1.9" and it gives me 8px when the negative margin is disabled!

One last thing that is also messing up the margin declaration is:

.index .post {                                          /* syndex.css (line 1) */
  line-height: 0;
}

This declaration is causing the images to get pulled up, thus reducing the space between posts on the top/bottom.

Disabling this fixes the top/bottom spacing, allowing it to be properly presented by having the margin:4px.

Zuul
  • 16,217
  • 6
  • 61
  • 88
  • I believe that in order to edit questions and answers you will need 2000 of reputation. But feel free to leave them here on the comments if unable to edit the answer. – Zuul Jun 04 '12 at 07:35
  • I can not contribute to your Answer via **edit** since it was not accepted during the Peer Review process. Instead I will create an Answer that complements yours. – arttronics Jun 04 '12 at 20:19
1

Your AJAX-retrieved content is missing whitespace that the stylesheet seems to rely on. Proof: preload a few dynamic posts, inspect the page, Edit as HTML the body element. You'd see that static posts have enough whitespace between them (possibly excessively so) and dynamic ones are stuck together.

Solution one: add some whitespace in the script that appends dynamic posts.

Solution two: avoid relying on whitespace in css and use alternative means of removing whitespace from inline-block elements.

IMO the general direction of #2 is preferable.

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91