Some Simple CSS Tricks

I started out building websites the old fashioned way, using tables. Every once in a while on a warm, clear spring day, I long for the days of the table based site. Then I have to wade through the markup of an old table based site, my vision goes blurry and a crushing sense of dread overtakes me. It was a glorious day when I made the switch, although there were some bumps in the road at first.

When I started out authoring CSS based websites, there were a ton of little tips that I didn’t know and didn’t figure out until someone “in the know” clued me in. I found myself saying things like “well, that makes perfect sense, why didn’t all the books and websites I read tell me this?” Maybe I should have figured all this out on my own, but it’s always nice to get a helping hand. Here are some little tidbits I have picked up on the way. Learn them. Breathe them in. Live them.

  1. Find a naming convention and stick to it. Whether it’s styleName or style_name or style-name, go crazy, just keep it the same throughout. Try not to name any style according to where it is on the page (i.e. leftSidebar) as that might change late in the game when the client requests that the sidebar be moved from the left to the right. That sidebar is no longer described correctly and should be changed in the markup as well, therefore defeating the purpose of using stylesheets in the first place. This could definitely be its own post, so I’ll leave it at that.
  2. Use the handy dandy wild card to zero out all of you margins.

    *{margin: 0;}

    If you’ve ever had a problem with your margins looking great in IE and horribly off in FireFox, this is the reason why. Put this little style on the top of your style sheet and most of the problems you’re having will be solved.

  3. This one goes out to the PC users. Always give your site a background color, even if the background is going to be the default white for most browsers. FireFox on the Mac decided that the default color ought to be some crazy light blue. If you never test on a Mac, you’ll never pick up on this quirk.
  4. Learn the shortcuts quickly. Coding a background style or a border style can be cumbersome if you separate the characteristics one-by-one. The style becomes clunky. An example:

    #contentMain {background-color: ##ccc; background-imageL url(../images/backgroundimage.gif); background-repeat: no-repeat; background-position: bottom right;}

    becomes

    #contentMain {background: #ccc url(../images/background.gif) no-repeat bottom right}

  5. Microsoft Internet Explorer is the only browser that reads an underscore before a property. FireFox and Safari will ignore the style and go right down to the next one if the underscore is inserted. So if you have a style that is working in IE, but not FireFox or Safari such as inline-block, put an underscore in there (see below) and see if that helps.

    .contentThumbs {_display: inline-block;}

That’s it for now. I’ll have some more tips on CSS or driving down Belmont or solving global warming next month. If my five little steps haven’t helped you out, please check out a few of the resources that have been invaluable to me:

Site Point
A List Apart

Other News

ReachFarther Selected as Best Web Design Agency in NJ!

The Top 13 New Jersey Web Design Agencies of 2019, According to DesignRush Studies show that 62 percent of companies can increase sales by creating responsive mobile-friendly interfaces for their website. DesignRush rounded up the best New Jersey website design...

When You Need It Done Right and Done Quickly

So you’re faced with an insanely tight deadline in order to produce a print advertisement that’s going to run in a full-color publication, you’ve got no copy, no creative, and only a high-level idea. What do you do? You call ReachFarther of course. Houston,...

Simplify Your Video Content with Vimeo

We work with a number of clients that rely heavily on video in marketing efforts, and during the early 2000’s rendering those videos online had been cumbersome process. We were basically stuck with Flash as one of the only consistent means of providing...

SQL Server 2008 FREETEXTTABLE Returns Zero Values

We recently migrated a database from SQL Server 2005 to SQL Server 2008 and ran into unexpected problems with the search results returned by FREETEXTTABLE queries that had worked fine for years in SQL 2005. Specifically, the FREETEXT TABLE RANK column returned zero...