SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    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?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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:

    Code:
    .read_more {
      color: #0066FF;
      margin: -1em 0 4em;
      text-align: right;
    }

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try adding overflow:hidden; to your #main rules

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

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I found the real problem, it is the generated content along with visibility:hidden on your clearfix class on #main

    You have this -

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Which just hides the period, it is actually generating a line-height.

    Remove the period and change visibility to overflow -
    Code:
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
    }

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Doh!

    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).

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    This site is kind of my experiment.. I was playing around with a pseudo OOCSS approach... so shaddup.


    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.

    Quote Originally Posted by samanime View Post
    I removed most of the useless nonsensical Wordpress stuff (like a lot of the head garbage, what's left in the head and stuff is all perfectly valid and serves a purpose).
    You missed cleaning up the href bloat

    Quote Originally Posted by samanime View Post
    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.
    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...

    Quote Originally Posted by samanime View Post
    And where do you see nonsensical heading order?
    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....
    Code:
    <h1>
      <a href="http://xazure.net">Xazure</a><br />
      <small>
        a blog by <span>C</span>hristian <span>S</span>nodgrass<br />
        <small>
          about programming, web and game design, and everything else
        </small>
      </small>
    </h1>
    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:
    Code:
    H1 [Missing Heading]
    	H2 [Missing Heading]
    		H3 [Missing Heading]
    			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 – What is HTML?
    	H2 Lessons – Where to Start
    	H2 Columned Layout with Background and Divider without Images
    	H2 Adding a Code Box with Word Wrap
    	H2 Cloud Host Review – 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"
    Code:
    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 – What is HTML?
    		H3 Lessons – Where to Start
    		H3 Columned Layout with Background and Divider without Images
    		H3 Adding a Code Box with Word Wrap
    		H3 Cloud Host Review – 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...
    Last edited by deathshadow60; Jun 28, 2011 at 22:42. Reason: added header breakdowns

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    Which href bloat?
    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="http://xazure.net/topics/news/">News</a>

    and

    <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?

    Quote Originally Posted by samanime View Post
    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.
    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.

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I like the absolute URLs because if "geniuses" rip off any content, they are likely to forget to update the links. 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.

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Why do you prefer <small> over a class like small? Isn't small presentation, not structure?

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    I like the absolute URLs because if "geniuses" rip off any content, they are likely to forget to update the links. 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. =)
    Eh... I could see that with body content, but really are you worried about that with your main menu?

    Quote Originally Posted by samanime View Post
    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".
    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.

    Quote Originally Posted by samanime View Post
    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
    }
    Uhm...
    Code:
    .normal_box,
    .special_box {
      //stuff common to both
    }
    
    .special_box {
      // stuff unique to "special" here
    }

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    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.
    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.

  16. #16
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •