Two Of My Favorite Tricks…

October 23rd, 2008

CSS can be one of the most powerful tools a developer has in their arsenal. It can make changing styles a breeze compared to inline styles. But, it can also be one of the most frustrating tools a developer has. It’s not CSS in and of itself. Rather, it’s the support, or lack of support that’s frustrating. Even seasoned developers can encounter a problem that makes them sit back and scratch their head. While such problems have usually come from, (ahem), IE6, other browsers have their fair share of quirks. So, at least for now, I wanted to list two of my favorite tricks/techniques that I use when I code a stylesheet. Hope they’re helpful. If you have any comments or questions, feel free to include them in the comments section.

* {margin:0;auto:0;} /*This takes away a browser's default padding and margin settings for all elements, (which is what the asterisk indicates).  This way, you know you're starting from scratch, and elements will only have the spacing you want them to.*/

! important /*I always code sites to be cross-browser compatible.  One of the tools that helps me with this is the "! important" declaration. */

Basically, it works this way: Standards-compliant browsers, (Safari, Firefox, IE7, etc.), will recognize and apply this to the style you’ve assigned it to. However, for a browser like IE6 that doesn’t recognize it, it goes unnoticed. For example, say you needed to make up for a 3px difference in IE6 on a paragraph tag. This is how you could accomplish it:

p{padding-right:0px ! important;padding-right:3px;}

IE6 will see the ! important declaration and essentially ignore it. Then, it will hit the next “padding-right” declaration and add 3px to the right side of the paragraph. However, for the standards-compliant browsers, they recognize and use the “! imporant” declaration. What I like about this solution is that it’s perfectly valid CSS, so, at least in my eyes, it doesn’t seem like a true “hack”. (NOTE: The order in which you use this technique is important. The “! important” declaration must come before the second declaration.)

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • E-mail this story to a friend!
  • Technorati

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment