Mystery Padding at Bottom

Hi all,

I have this mystery padding/margin at the bottom of my page which I can’t hunt down the source of.

The site is here: Xazure | a blog by Christian Snodgrass

Any ideas?


Cold you be more specific about what padding you mean? (Maybe a screen shot.)

All I can guess at is that you are referring to the ‘read more’ paragraph, which has a very large bottom margin:

.read_more {
  color: #0066FF;
  margin: -1em 0 [COLOR="Red"]4em[/COLOR];
  text-align: right;

Try adding overflow:hidden; to your #main rules

That will un-collapse any margins bleeding through the bottom of the page

I found the real problem, it is the generated content along with visibility:hidden on your clearfix class on #main

You have this -

.clearfix:after {
    content:[COLOR=Red] "."[/COLOR];
    display: block;
    height: 0;
    clear: both;
    [COLOR=Red]visibility: hidden;[/COLOR]

Which just hides the period, it is actually generating a line-height.

Remove the period and change visibility to overflow -

.clearfix:after {
    [COLOR=Blue]content: "";[/COLOR]
    display: block;
    height: 0;
    clear: both;
    [COLOR=Blue]overflow: hidden;[/COLOR]


Thanks a ton. That did the trick. =)

And just for reference, I was referring to some mystery padding at the very very bottom of the page (the footer wasn’t flush with the bottom of the browser window).

NOT that I’m seeing ANY reason for clearfix on that site – but the code seems knee deep in presentational markup (clearfix, clearboth, textcenter) defeating the point of bothing to use CSS in the first place.

… and that’s before we talk nonsensical heading orders, paragraphs around non-paragraph elements… and the gamut of nonsense wordpress saddles you with.

This site is kind of my experiment… I was playing around with a pseudo OOCSS approach… so shaddup.

I removed most of the useless nonsensical Wordpress stuff (like a lot of the head garabage, what’s left in the head and stuff is all perfectly valid and serves a purpose). The stuff you are likely referring to that isn’t paragraphs are probably the things like the comment things which are in paragraphs… but there aren’t really any better elements for those anyways.

Everything else is exactly how I want it. So =p

And where do you see nonsensical heading order?


OOCSS is one of the silliest notions out there – completely defeats the point of using CSS in the first place; might as well go back to HTML 3.2.

But play with it, you’ll probably come to that conclusion on your own.

You missed cleaning up the href bloat :smiley:

Actually, I’m referring to the tagline that should be part of the heading, the paragraphs for NOTHING inside the two div.footer, etc, etc…

Oh maybe the five H4’s preceeding the first H1, and the multiple H1’s? Open it up in FF, go into the web developer toolbar and hit “information -> document outline” you’ll see three nice big [MISSING HEADING] in red?

Assuming that isn’t broken in FF 3.6+ as well – it’s one of the two handiest bits of the web dev toolbar; the other being the “document size” tool that’s broken in anything higher than 3.5.x.

For example, your first two paragraphs on the page I’d have as a H1 and a small tag, probably with a small inside the small where you’re using a classed div…

  <a href="">Xazure</a><br />
    a blog by <span>C</span>hristian <span>S</span>nodgrass<br />
      about programming, web and game design, and everything else

The quintet of H4 would then easily be dropped to being H2 and the two h1’s dropped to H2, the H2 dropped to H3… giving you a “proper” and non-broken heading order – though I’d consider seeing if I could force it into a content FIRST layout and move the less relevant sidebar stuff after the main content area.

Though I’ve never been a big fan of the massive impersonal space wasting “WELCOME” headers… but that’s me…

Otherwise all of those h4 should be h1 and that makes no sense at all unless you go for the HTML 5 thing and add a slew of pointless “section” or “article” tags to “reset the counter” on using them.

Basically you have:

H1 [color="red"][Missing Heading][/color]
	H2 [color="red"][Missing Heading][/color]
		H3 [color="red"][Missing Heading][/color]
			H4 Recent News
			H4 Recent Tips & Snippets
			H4 Recent Project Posts
			H4 Recent Recent Lessons
			H4 EmpireAvenue - Pretty Neat
H1 Welcome
H1 Latest Posts
	H2 Xazure Code Demo Plugin
	H2 Three Column Layout with Divider without Images
	H2 Changing WordPress Template with template_include
	H2 HTML Lesson 1 &#8211; What is HTML?
	H2 Lessons &#8211; Where to Start
	H2 Columned Layout with Background and Divider without Images
	H2 Adding a Code Box with Word Wrap
	H2 Cloud Host Review &#8211; Rackspace Cloud
	H2 A Few Site Tweaks
	H2 Keep It Sorted: Binary Search Sort

Where I’d suggest trying to get that to the more “proper”

H1 Xazure a blog by Christian Snodgrass about programming, web and game design, and everything else
	H2 Latest Posts
		H3 Xazure Code Demo Plugin
		H3 Three Column Layout with Divider without Images
		H3 Changing WordPress Template with template_include
		H3 HTML Lesson 1 &#8211; What is HTML?
		H3 Lessons &#8211; Where to Start
		H3 Columned Layout with Background and Divider without Images
		H3 Adding a Code Box with Word Wrap
		H3 Cloud Host Review &#8211; Rackspace Cloud
		H3 A Few Site Tweaks
		H3 Keep It Sorted: Binary Search Sort
	H2 Recent News
	H2 Recent Tips & Snippets
	H2 Recent Project Posts
	H2 Recent Recent Lessons
	H2 EmpireAvenue - Pretty Neat

I’d probably also open it up semi fluid instead of suffering the ‘crappy little stripe’ syndrome – which is really exacerbated by large fonts/120dpi. Also not sure what that broken thing on the side is supposed to accomplish…

Doh, I forgot I ended up with my sidebar on before the content, which would be broken. Touche, I stand corrected. =)

I actually didn’t know about that document outline tool… I’ll have to check that out.

You make a good point about the tagline.

Which href bloat? If you’re referring to the stuff like canonical, prev, next, I left those on purpose. I removed the useless ones like the ones for the editors and whatnot that aren’t valid.

As for OOCSS, I think I’ve already come to that conclusion. If CSS simply had inheritance for blocks, I think it’d have some serious merit. However, without that, it is just bloat. =p I think this was the third shot I gave it (this time trying a hybrid approach in between the full blown OOCSS and hybrid, because I couldn’t stand full blown) and probably the last.

I’m referring to the absolute url’s on EVERY href. Pet peeve of mine since there is NO functional difference between saying:

<a href=“”>News</a>


<a href=“/topics/news/”>News</a>

Making the former nothing more than a waste of bandwidth – it’s a minor nitpick, until you realize that in turdpress it typically adds up to a K or two by the time you’re done. I really don’t get where they get the raging chodo for doing that from… but when you’re talking the 2008 pwnie for mass 0wnage winner, where the coders are so out of touch with the mere notion of security they store the mysql login information as DEFINE with endless multiple entry points ALL of which output something when called directly – can we really expect their HTML or skinning system to be worth a ha’pence in a manneken pis fountain?

My biggest problem with it is the same as that with CSS frameworks like Grid, BluePrint or YUI – it’s PRESENTATIONAL Classes basically saying in the markup what it’s supposed to look like… at which point you might as well go back to HTML 3.2 and start using CENTER, ALIGN, FONT and TABLE for layout for all the difference it makes – especially since the screen appearance shouldn’t be the only target. One of the entire reasons to USE CSS in the first place is to stop saying in the HTML what things look like… class=“left” or align=“left” – at that point what’s the difference?

But I get the same reaction every time I see classes like “smalltext”… Not only do we have a tag for that (small) it doesn’t say what the element IS.

Which again, HTML is for saying what things ARE, not what they should look like… something the folks behind OOCSS and CSS frameworks seem to have either never learned, or completely missed the point of.

I like the absolute URLs because if “geniuses” rip off any content, they are likely to forget to update the links. :wink: With my short URL, it’d have to have 48 links on the page to add 1K to the file… I can live with that. =)

I agree about the OOCSS. It’s like “I really am supposed to add 10 classes just to get this one element because I MIGHT reuse it later and don’t want to have to edit my CSS to do so”. What I think would be a proper OOCSS is if the blocks had inheritence so you could do something like:

.normal_box {
// stuff here

.special_box extends .normal box {
// stuff just for special box
// already inherits everything from .normal_box

Then I could just use a class of “special_box”. I was hoping it was more along those lines when I started playing with it… but for someone capable of writing CSS, it’s just an annoying pain. Both my CSS and HTML got bloated.

Why do you prefer <small> over a class like small? Isn’t small presentation, not structure?

Eh… I could see that with body content, but really are you worried about that with your main menu?

Which is as I said, missing the point of CSS; being able to restyle the page without editing the HTML… as if editing CSS instead is some great hard task.

Though often you do end up with those occasional “one off” elements because someone higher up the ladder (like the client) wants something that doesn’t fit the layout or structure in there… Though wherever possible I try to talk them out of it… As you said though, “MIGHT” later isn’t worth flushing one of the entire reasons to use CSS in the first place.


.special_box {
  //stuff common to both

.special_box {
  // stuff unique to "special" here

I didn’t say it was the best reason ever. =p It’d just give more validity to OOCSS (I’m too tired for me to come up with a really good example, but yeah, what you said is perfectly valid).

I think it’d make more sense if you went more layers deep, or had more elements (so instead of having to take 10 elements and repeat them in 10 places, you just do it once to inherit them)… whatever… it’s not the greatest idea in practice. :wink:

Oddly I think that’s why I like using so many semantic elements – instead of saying they’re two different classes, you have the tag’s default behavior, and then classes for when they are different.

Yeah, I agree.

The only real perk I can see for using OOCSS is really only if you have inexperienced developers… which should be avoided, but sometimes real life doesn’t work that way. =p

I dunno, that kind-of sounds like the jquery excuse – when it’s basically the same amount of learning either way, why waste time teaching them “the wrong way”. Again, at that point you might as well go back to HTML 3.2 and slap a tranny doctype on it… Oh wait, my bad… slap a HTML 5 lip-service doctype on it.