Helpful Coder

Just a quick tip, it's been a long time! I've been sick and busy, which is definitely not a good combination... Making the first column right-aligned Suppose you need to make the contents of the first column right-aligned. An easy way to do this (assuming you have a special class/id for the table) is to use the first-child selector: table.mytable tr td:first-child { text-align: right; }

Ran into this just now. I was working on alternate css for IE6, since I had a div that was using a translucent (semi-transparent) PNG, and of course IE6 doesn't support them. I tried the javascript PNG fix for IE6, but it doesn't seem to work on background images. Anyways, so I wanted to use a regular white background for IE6. I used the IE conditional statements to set that in the CSS, and sure enough IE6 would display the white background color. And then it wouldn't display most of the contents of the div! Took me a while to figure out, but apparently it decided that the div and its background color were a higher z-index than the contents. Go IE! Rendering like a champ as always. So for IE6 I had to tell it that the contents of that div (thankfully in their own divs) were z-index 100, and that fixed it.

Making CSS changes to a live site can obviously be problematic. Obviously any change you make will be viewed by everyone. It's even trickier when the change will be a "limited time" type of change - i.e. adding a special ad for one day, etc. You're only real option is to create a special page on the site where you can test the changes - but what if you don't have that sort of access? Often a designer will have to work on such a change, but has no real access to see how the changes will actually look on the live site. Firebug comes through again in this situation! I was working on changes to a site that would only be live for one day, but I need to see how these css changes will affect the live site as it stands now. So, I uploaded the images involved to the server, and then used Firebug to add the CSS within style tags in the head of the page. This css only exists on my local machine, so it doesn't affect the live site in any - but it lets me test the actual...

Ok, you probably already have heard of firebug - it's a handy little extension for Firefox that is absolutely invaluable in debugging CSS. But just in case you haven't, I thought I'd mention it here. This thing has saved me days of annoying debugging over the past few months - if not more!

This will hopefully be the first of many posts where I plan to post quick little tips to help all my fellow web developers out there in the big ol' Internet. This one is to fix what's occasionally an annoying "feature" of HTML - about a line of space is added by default between an unordered bullet list and the paragraph above it. This can look a little funny sometimes, especially if you're using the paragraph as header above the unordered list. To fix this, add two new classes to your CSS: p.ulHeader { margin-bottom: 0px; } ul.noTopMargin { margin-top: 0px; } Then you can just add those classes to the appropriate places in your code to remove that pointless spacing.