As I pointed out previously I prefer to start my CSS Stylesheets out with the wildcard (*) selector zeroing out the default margin and padding settings that the various browsers implement. I do this to level the playing field and assure myself that I am starting at a common ground cross-browser.

Here’s the CSS declaration I’m talking about:

* { margin: 0; padding: 0;}

Maybe this CSS declaration is taking things a little too far. Turns out that somethings…I want left alone.
(more…)

More Multi-million Dollars of Yahoo! Research for Free!

The resources being unleased by Yahoo! this year are quite impressive. I’ve just begun reading and studying their CSS Layout Library. Of interest tonight is the Fonts CSS Library.

Big Money = Big Research

I’ve got to believe with the money that Yahoo! has, it’s wise for any serious web developer to study and learn from their research.

Yahoo! has reached conclusions on font sizing through CSS styling that is right up any devotee of web standards alley.

With the goals of:

• Offering full A-grade browser support.
• Providing consistent font sizing and line-height.
• Providing appropriate cross-OS font-family degradation paths.
• Supporting user-driven font-size adjustments in the browser, including cross-browser consistency for adjusted sizes.
• Working in both “Quirks Mode” and “Standards Mode.”
• Normalizing the dimensions of an “em” unit, facilitating liquid-dimension development.

Yes. This stuff rocks!
(more…)

Understanding Complex CSS Class Selectors

Understanding how a CSS Class Selector effects an element can sometimes be tricky. Especially, when you start to deal with Child Selectors.

Reading a CSS declaration right-to-left (r-t-l) helps decipher what is happening a little better than reading left-to-right (l-t-r). You can use the same method to write what can be a sometimes tricky CSS style.

Here are some examples of what I mean. They all produce the same result, but in a different way.
(more…)

Give IE some love?

Working with a bunch of ‘Internet Explorer Lovers’ has swayed me (a little) in ceasing my zealous distaste for IE. I now recall the fond feelings I had for IE before my Mozilla enlightenment. The crushing reality is that, without a doubt, Internet Explorer is the browser of choice default browser for the masses. Thus, it’s imperative to make sure your CSS layout works in it.

Not only works, but shines!

I’d even admit when faced with the option of a clients site looking a tad off in Firefox to ensure it looks dead-on in Internet Explorer, I choose the ‘Blue e’. There is a trick that you can use in your CSS stylesheet though to level the playing field amongst the browsers.

Play your wildcard

Like in most things computing, the ‘*’ (asterik) is a CSS wildcard. It means everything. Headlines, margins, padding, paragraphs, lists, et al.

So, a CSS declaration like this will make all of the browsers behave more alike.

* {margin:0; padding:0;}

Since Internet Explorer has a different default padding (or margin, etc) associated with paragraph (or headline) than Firefox (or Opera or Netscape), using that simple CSS declaration essentially sets everything to zero.

Now, you can add uniform pixel or em padding (or margin) to your elements as you need them and achieve more consistent styling among the different browsers.

Turn on the borders when designing

How often do you get to use dotted red, dashed purple, solid green or yellow borders?

CSS Stylesheet

#header {border: 1px dotted red;}
#sidebar {border: 1px dashed purple;}
#content {border: 1px solid green;}
#footer {border: 1px solid yellow;}

I use them on most all new CSS layouts. Until I have a good feel for my layout, then poof! I make them disappear.

Adding borders to all your divs is a helpful trick when designing a CSS table-less web site. This helps you ’see’ what you are doing. It’s a great tool for those just coming over to CSS design from table design.

I’ve solved many a margin and padding issue with this trick as well. By applying a border to my divs, I’ve been able to see when divs where overlapping.