How not to do CSS
-
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 [i]every[/i] 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?
-
I prefer:
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 said:
My personal favorite:
ul {
list-style: none;
}
Use it all the time, absolutely nothing wrong with that.
-
@savar said:
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 said:
I prefer:
p { pudding: lots; }
No, no, no! You mean like this:
p.porridge {
spiciness: hot;
temperature: cold;
location: in-the-pot;
age: 9d;
}