I've been spending the past 20 minutes or so debugging some CSS quirks on a site that I've been asked to add a page to. This one pretty much tops off the stuff I've been seeing - it's part of the sitewide stylesheet:

p {
    display:inline;
}

...Yeah.

But is it better then center { text-align: left; }?

I worked on a website that was mostly clean, but had this style set globally:

p {
    margin: 0;
    padding: 0;
}

And then every paragraph looked like this:

<p>Lorem Ipsum<br /><br /></p>

 Could be a pre-emptive bugfix.

If you set the left margin of a floating element that is in a block container, IE6 will double the margin for no good reason.  Fortunatley doing something like

p {

 display: inline;

float: left;

}

Will magically fix the problem.  Maybe it's a catch all rule so that when p's are floated later in the CSS the margins will be fixed automatically?

p {
  pudding: lots;
}

The cake goes to this one, found in two different stylesheets for the same page:

.Blue2 {
   color:#somebluetint;
}

.blue2 {
   color:#someotherbluetint;
} 

Which was rendered on a page without a DTD, and so IE7 and 6 proceeded to merge the two declarations as both their quirk-modes make CSS case-insensitive, when in fact it is case sensitive by spec (which is stupid in its own right).

Count the wtfs.

My personal favorite:

ul {
    list-style: none;
}

savar:

My personal favorite:

ul {
    list-style: none;
}

Use it all the time, absolutely nothing wrong with that.

savar:

My personal favorite:

ul {
    list-style: none;
}

 

I'm pretty sure this site does that one too. It also sets the left margin of <ol> to 0, so you get numbers hanging off in the left margin.

Bombe:

I prefer:

p {
  pudding: lots;
}

 No, no, no! You mean like this:

p.porridge {

  spiciness: hot;

  temperature: cold;

  location: in-the-pot;

  age: 9d;

}