Regular Doses of Common Sense™

Fighting the Mysterious Margin

1.12K 10

I’m not an expert when it comes to HTML and CSS. Most of us aren’t, I suspect, but I wanted to put it out there up front.

Since switching to this new theme which I like not quite as much as I liked my previous, argumentative theme, I’ve managed to make a few tweaks to the layout.

Most notably, I’ve increased the body text to 14 point from 11 or 12 point. I suppose I’m reaching an age where I really notice tiny text, and far worse, I’m reaching an age where 12 point is starting to look a bit on the tiny size. I have no plans to start sliding to the “large print books” section, yet, but particularly for those of us who spent most of the workday in front of one computer screen or another — and in my case, two big ones at once — my eyes will take all the help they can get by the end of the day.

I’ve also made a few other modest adjustments, most so minor that trying to list them (or reading the resulting list) would be about as exciting as watching a grandfather clock whose pendulum no longer swings.

I’m not an expert at coding, but I’m pretty good at figuring it out when I have to. At least, within reason.

There were three primary issues remaining on my initial punch list for getting this new theme where I wanted it.

The first of which is that I want the text in the front page slider to slide to the left, so that there isn’t that big gap between the thumbnail and the text. This theme, like almost every other theme I considered as a possible replacement to the last one, assumes thumbnails you’ll upload are wider than the standard size I already use. I have such a large library of thumbnails at this point that the thought of redoing all of them to fit some predetermined size might just be enough to send me running through the streets screaming.

So, the theme will have to adjust to my graphics, rather than the other way around.

The second involves the “highlight” color that appears when you select a section of text: I’m still looking for any mention of the horrendous pink that appears. So far, I’ve been through almost all of it, and there’s no reference to that color anywhere. I’m determined to find it: nearly anything would be better than that. (Update: Done!)

The third involves the configuration of the “Related Posts” that appear between the post and the comments. Ideally, I’d like related posts to appear below the comments, where I feel they belong to begin with. Short of that, I’d like there to be fewer of them so that one has a better chance of seeing the comments before wondering if they missed something.

But then I learned of a new problem: there appears to be a discrepancy in how much margin exists between the text of a post and the left border of the post window. When I load a post, here’s what I see:

When some others load a post, however, here’s what they see:

So far, I can’t pinpoint a platform or a browser that’s causing the issue. Both images are taken from different Macs running Chrome. I’m looking into this one as well, because the top image is how the blog is supposed to look. As I try to nail down this problem, this is where your assistance would be appreciated!

Your Turn:
What do you see in terms of the left margin of the post? Is there padding (white space) between the left margin and the orange background, or is the text right up against the orange? What browser are you running?


I do not have padding and I'm using Firefox on a Window's 7 machine.


I don't think it's a browser issue; it's a resolution issue. It may have to do with a HTML5 tag called viewport, which controls scaling of a page for different devices, so that your site looks good on iPhones, iPads, desktops, etc.

If I make my browser window wider, the scaling kicks in and the page looks like I imagine it is supposed to look. See here for a real-time demonstration:

I hope this helps.

Latest blog post:


I see padding and the whole blog looks swell. 

Now for details: I have a Dell PC, it came with Windows Vista and I'm happily using Google Chrome. And it's Tuesday and dark outside.


Looks good on Safari.  Does any other browser really matter? ;)

patricksplace moderator

On my desktop at home, I see padding. On my laptop at home, I don't.

On one computer at work, I have padding...on another, well, yeah, you guessed it.



I'm using Windows Vista 6.0 (Build 6002: Service Pack 2) and Chrome Version 22.0.1229.94 m and I have the margin--as in your first example--which I like. The gap between thumbnail and text totally doesn't bother me. White space is good. 

I agree that comments shouldn't be the last thing on the page. Very weird that you can't drag and drop where you want them, and that the default is so far down. I'm also not sure what the criteria for "related posts" is since right now what's showing is pretty much your last six.

Livefyre seems to have sorted out the "carriage return" thing, by the way, but now I can't copy anything and move it, unless I'm moving it to the end of the post. Weird. [Edit: Carriage return is not completely fixed. The last three 'graphs turned into one once I posted.]

OH! I just minimized the window and found that I lost the white space on the margin! Meep--me no likey! There's no slider at the bottom, so it just crams into less width. Yuck! If I keep narrowing the window further, I lose more white space in the middle, then the sidebar disappears completely. 

Going to work now where I can be even MORE OCD, for pay! ;-)

Cathryn (aka Strange)
Cathryn (aka Strange)

I'm at home today.  I see padding.  I'm using Chrome on a Windows machine running Windows 7.

Cathryn (aka Strange)
Cathryn (aka Strange)

I'm at home today.  I see padding.  I'm using Chrome on a Windows machine running Windows 7.

Edited to add:  I just checked using Firefox and Internet Explorer on my home Windows machine and they both show the white padding just fine.