WOW.

I’m currently coding my heart out on what I am calling the Ultimate NASCAR Database. Everytime I try some humilty on the project I realize that it just really rocks.

The wow is about a dang, pesky bug quirk (or maybe it is just stricter adherance) with Firefox and negative margins.

Basically, I am making a 3-column, fluid CSS layout.

HTML:

<div id=”wrapper”>
<div id=”content”>My content</div><!– // eof content div –>
</div><!– // eof wrapper div –>
<div id=”sidebar”>Content on left sidebar</div><!– // eof sidebar div –>

CSS:
#wrapper {
float: right;
width: 100%;
margin: 10px 0 0 -300px;}

#content {
margin: 0 5px 0 320px;
padding: 0;}

#sidebar {
margin: 10px 0 0 5px;
float: left;
width: 295px;}

This is a well documented CSS layout beginning with Ryan Brill’s article.

The only problem was that the links on the left sidebar were broken (non-clickable) in Firefox. They looked like links, just didn’t click like links. In IE and Opera they worked.

The solution?

Add position:relative; to the #sidebar styling. All links work like they should now.

Final CSS markup:

#sidebar {
position: relative; /* fixed links not being clickable…go figure */
margin: 10px 0 0 5px;
float: left;
width: 295px;}

I’ve just finished up a CSS article on two quick and easy ways to implement changing the background color over blocks of text when you run your mouse pointer over them.

One uses the CSS pseudo-class :hover.

The other one uses the DOM (Document Object Model).

I like the effect for that little extra visual zing.

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…)