The margin-top problem (and solution !)

This is one of the more irritating CSS errors* around - you put something inside a div - and the div takes on the margin-top of its child element.

(*This isn't really an error - it's technically the correct behaviour, but not what a programmer would expect.)

To illustrate - here's a page with multiple divs, with margin-top:0px specifically assigned for the divs.

The page looks like this : [link to page]

The margin-top problem

It should actually look like this : [link to page]

Solved margin-top

Here's an example of the CSS used:

body {
 margin:0;padding:0;text-align:center;background:#222;
 font-family:"Times New Roman", Times, serif;font-size:16px;
}

#box1,.other {
 width:1000px;
 margin:0px auto;
 background:#EEE;
 border-bottom:2px red solid;
}

#box1 {
 height:270px;
 margin-top:0px;
}

.other {
 height:150px;
 margin-top:0px!important;/*makes no difference*/
}

And some of the HTML :

<div id="box1">
 <h1>This h1 tag should have a margin-top. Instead, the div gets it.</h1>
</div>

<div class="other">
 <p style="margin-top:50px;">Text in a styled p tag with a margin-top : again, the parent div takes it.</p>
</div>

To solve this problem, just add a padding-top:1px or a border - any padding or border affecting the top of the parent element will resolve the issue.

As you can see, chrome has this problem. I have tested it on FF, Opera and IE8 with the exact same results.

Dead Code Olympics : Part 1 - Internet Explorer 6

The web has come a long way since the time of spacing gifs and tables inside tables inside tables (repeat ad nauseam) - however, a great many developers and users have not.

I'm going to list one of the most irksome practices of these curious creatures:

Internet Explorer 6

IE6 ! Gadzooks, forsooth ! Quite possibly the biggest burden on the internet right now. IE6 was provided for free with WinXP, and has cost developers and designers a fortune in antidepressants.

IE6 can change HTML when CSS is changed.. don't believe it ? See this :

In Chrome

In Internet Explorer 6

Notice the arrow ? Now, (Bruce Lee style) look at what its pointing to. "ct" ?? What's that ?

Well, "c" and "t" are the last two letters of "contact" - IE6 is simply repeating the end of the previous line.
If you hover over "ct", you get a hover effect on "contact".

However, you can stop this from happening - just change the width of the parent div, or the border, and the effect goes away.

Such is the power of IE6.

Kneel. Or you will be knelt.

- Debayan Gupta

Getting ready to move..

Spent the last few weeks finishing up all my projects (my backlog is always twice of what it should be).

Over the last two days I had to deal with no less than four FizzBuzz-challenged "developers" who mucked up my carefully optimized code by "removing obviously unnecessary lines" - I nearly ended their obviously unnecessary lives before my brain kicked in - at which point I simply decided to charge extra.

It really is rather sad to see the sheer number of programmers who, simply put, cannot code. This problem is compounded by the fact that most of these people are under the impression that they are experts.

Pooh.