Internet Exporer 6 gets absolute positioning all wrong.

If your using an element as a hook for another elements positioning. IE6 0,0 point doesn’t care about padding, so if you have an element styled like so:

#container {
position:relative;
padding-left:20px;
}

#container #positioned {
position:absolute;
left:100px;
}

Firefox, Safari, and Opera’s 0,0 point will be affected by the 20px padding, IE6 will completely ignore it and place it’s 0,0 point at the most left point of the element. So to cater to IE6 use margin instead, this can be annoying, but it works.

Internet Explorer 6 doubles your margins on both sides, just for fun.

If you have an element where the margin and float are set in the same direction, IE6 will think your awesome and play a joke on you by doubling your margins. For example, if you have an element floated left, and margin-left set to 15px. Firefox, Safari, and Opera place it a nice exact 15px away, but Internet explorer gets trigger happy and sets it 30px left. The solution is thankfully, a simple one, just change the floated elements display to “inline” and all is fine and dandy.

Internet Explorer 6 sucks at clearing floats.

I got stuck up on some floating issues this weekend that took me a while to fix. Here’s an example of the markup:

<div>

<div class=”float-left”></div>
<div class=”float-left”></div>

<div class=”clear-floats”></div>

</div>

For some reason, IE will add about 15 extra pixels beneath the two divs, again, Safari, Firefox, and Opera render it properly. It turns out that if two elements are floating, and an element that is clearing them is directly below or “touching” them IE6 will add in extra space, why? Because Microsoft is so great. The solution is this:

<div>

<div class=”float-left”></div>
<div class=”float-left”></div>

</div>

<div class=”clear-floats”></div>

Yep, that’s it. IE6 sucks away the extra height and all is magical in the browser kingdom.

Managing your time effectively.

The dynamics of working with a team totally change the game. Everything is set in motion by how fast each person can execute tasks, everything has an estimation of time, and things are set sequentially based off of each others estimate. If you go over the time you said it would take, everybody gets pushed back. I’ve started timing everything I do while at work, just to get a more precise idea of how long things take me to do.

Quality assurance is everything.

My time allotted to QA has literally tripled, people are depending on your work, and these tasks are for high budget projects that have no toleration for errors. Making mistakes with code, links, spelling, reporting, saving, organizing make you look bad and force your project managers to constantly be watching your every move. Sort of, kind of, and partially doing QA is useless, if one thing is wrong, it looks like you didn’t even bother. Before submitting or passing off anything, make sure it’s perfect.

Comment, and log everything.

Everything I’ve modified, revised, coded has been commented to death. I want the next developer that reads through my code to know exactly what’s going on, and where. I have clear cut comments for everything, my CSS has a hierarchy, all changes and revisions are logged by line number, and what was changed. There’s nothing worse then picking up some old code and having zero comments. It can sometimes take up to 20 minutes to do a 2 minute job, just because of the time it takes to decipher what’s going on. Also, saving versions of files, if I’m producing a mockup and I make an evolutionary change, I save it as a version. At the end of each mockup I usually end up with about 6 psd’s with appended versions at the end.

Navigating through endless file structures.

It feels as if I spend half of everyday just navigating through folders, saving, opening, copying, and pasting over and over again. This is kind of common sense but I’ll say it anyway, if your working on a new project, stick an alias or shortcut to it in your sidebar. If anyone has a way of getting to files quicker in OS X, or ways to be more efficient, I’d be interested to hear about it, its become a huge time waster for me.

Free Tips

Download Firefox 2 Beta 4
Do twitter mash-ups.
Sign-up for Friendfeed
Read my coffee blog

Until next week.

JG