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;}