Although I’m not a designer and I only know about 10 colors, I’m a great fan of the client side disciplines. I like nifty pieces of CSS, I enjoy coding in Javascript and I advocate semantic web. Unfortunately, my job focuses more on the server-side these days, but that doesn’t mean that I can’t have a look from time to time over some CSS tutorials.

This time, I’ve tried this tutorial, written by Eric Meyer. Pretty nifty! I’ve decided to give it a try myself, and I drew a house. And made a CSS love declaration to my girlfriend, here.

Pretty cool, isn’t it? And, perhaps, web 2.0 will mean another transition, from ASCII art to CSS art

I hate “margin-collapse”. It’s one of those features that made it into the W3C standard but shouldn’t. What does “margin-collapse” actually mean? Here’s an excerpt from one of W3C documents on this issue:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

The whole document is available here. I don’t know about you, but for me, this mechanism causes a lot more problems than it solves. By the way, does it solve *any* problems? For instance, the is you see this piece of CSS

#line {
    width: 300px;
    height: 10px;
    background-color: grey;
}
 
#parent {
    width: 300px;
    height: 300px;
    background-color: red;
}
 
#child {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 20px;
}

…attached to the following XHTML…

<div id="line">
</div>
<div id="parent">
	<div id="child">
	</div>
</div>

…then you’d expect – more or less – to see something that looks like this:

I know I would. And I felt frustrated when I first saw that, in fact, it looks like this. This bites! The “margin collapse” mechanism is to blame. Because the margins touch each other, they collapse, and the 20 pixels margin applies to the parent (red) div instead of the child. Of course, there is a simple workaround around this, all one has to do to escape from the margin-collapse nightmare is to add a border or a padding somewhere, so that the margins won’t touch any more. Like so.

But until before I’ve figure it out, I thought that there is a God and that He hates my guts…

How many times did you wrote

.container {
    vertical-align: middle;
}

…and expected that all the children of the targeted elements will be centered vertically? And since it didn’t quite work as you expected, you made some people in headache pills industry very happy by buying their products in spite of the recession.

The answer is simple, it’s not supposed to work. At least, not like that. Keep reading»

Today’s topic, equal height columns. Back in the old days, when everybody was using tables, creating equal height columns was a piece of cake. The height of a table row – <tr> – and its cells was automatically changed to accommodate any amount of content. Nowadays, in our brand new Web2.0 world, people don’t use tables to set up the layout of a page. Everybody goes for CSS now. But using only CSS is pretty hard (to be read “almost impossible”) to set up a page where multiple columns have the same height. And it becomes even harder to do so when a column changes size (some hidden content is displayed). What then? Well, of course, javascript to the rescue. Keep reading»

Spamming is by far the most idiotic of all computer related activities, and I doubt that there is a single person that din’t find junk mail in his/her inbox. But how do you get on a spammer list and most important, what can you do to prevent this? Keep reading»