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;

    }


Log in to reply