A 3D CSS Box Model.

Probably one of the hardest concepts to get my head around when I first started blogging was CSS. I can remember when CSS was first proposed and all the websites devoted to website design were talking about how it was going to revolutionize the way we construct our pages and how much better everything would be all the while forgetting that Microsoft has a bad track record at actually implementing standards in their browser so while it fixed one set of headaches it introduced a whole new buttload of other ones. I took one look at an example Cascading Style Sheet and it looked a little like this…

#footer {
margin: 0;
padding: 5px 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
color: #333;
font-size: 70%;
font-variant: small-caps;
letter-spacing: 0.09em;
}

.date {
font-size: 100%;
background: transparent;
color: #000;
}

.title {
font-size: 130%;
font-weight: normal;
background: transparent;
color: #336600;
border-bottom: 1px solid #ddd;
}

And I thought to myself “you have got to be kidding me” and then I went back to designing pages the old outmoded way using lots of nested tables that would make most ordinary people go insane just from glancing at the code. I managed to avoid learning much of anything about CSS other than it was the hot-shit for years until I decided to start blogging and I installed MovableType. MT’s default templates used CSS and everything I read from other people who were using MT was always talking about CSS and it became clear to me that it was time I stopped being such a sissy and learned what the hell it was and how I should use it.

Turns out it’s pretty addictive once you get it under your skin. I find it very hard to design websites without it anymore and while I won’t profess to be an expert at HTML or CSS by any stretch of the imagination, I must say that it is the better way to do things even with all the headaches it brings. One aspect of it that took the longest to grasp was the Box Model and that’s still an area that can trip me up from time to time simply because there are so many parts to it that aren’t always clear in how they fit together. That’s where the hicksdesign 3D CSS Box Model comes in handy. I wish these guys had done this up back when I was learning as it shows you exactly how the various parts of the box model fit together to make an element on your page. With a single image it all becomes clear.

OK, the truth is this is an ideal-world how it SHOULD work representation and you’ll quickly learn that different versions of different browsers will find different ways to chew up your attempts at CSS in different ways, but at least you’ll understand how it’s SUPPOSED to work. And it generally will for folks using the latest browsers. Still, understanding the problem is the first step to overcoming it so if you’ve been struggling with CSS yourself this is a good starting point.

7 thoughts on “A 3D CSS Box Model.

  1. This is OT—
    Do you have a copy of MT2.61 laying around?  This EE thing isn’t working out for me—I can’t login at work for some dumb reason.

  2. If you don’t get a copy by this evening, I have MT2.6? that I got from someone a couple of days ago. I was going to use it to help convert my older posts.

    Let me know if you still need it by then…

  3. Mac, I have a copy of 2.661 in both full and upgrade formats. I’m assuming you’ll need the full version. I’ll drop it in an email to you.

    Can’t login to EE from work? Is it giving you some kind of error message?

  4. I feel your pain, Tek. Have you given b2evolution a shot? It’s another branch of the same codebase as WP, but I’ve heard it’s a bit easier to work with. It at least has support for multiple blogs already.

    Incidently, I see you’re running Radio Blog on your site. I was debating trying that myself, but was worried about people getting pissed off over copyrights. grin

  5. Technically, I suppose that people COULD get pissed off about copyrights…. but everyone is looking for MP3’s on servers…

    Radioblog doesn’t use mp3’s.  wink

    I tried B2 and I couldn’t ever get it to install even the basics correctly at all.  Kept getting all kinds of 404 and 500 errors

    So I said fuck it.

    Now I feel like.. staying on MT… But I have noticed how slow MT is getting anyway. 

    ARGH!

  6. OK, the truth is this is an ideal-world how it SHOULD work representation and you’ll quickly learn that different versions of different browsers will find different ways to chew up your attempts at CSS in different ways, but at least you’ll understand how it’s SUPPOSED to work.

    As God is my witness, the variations between different browsers in their implementation of CSS is one of the ongoing pains in my life, such that I have decided to ignore it (at least for the moment) and just worry if it looks okay with IE6. 

    Which is a horrible attitude to take, but, damn …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.