CSS - a nearly standard compliant WTF



  • Look at this beautiful planed CSS File. Used over and over all projects... My personal highlights are the fontfamily and that I have to apply the .input_grey Class by hand to EVERY formelement we have . And I am not allowed to change the CSS .... cry Dreamweaver DIE DIE DIE

    CSS - http://www.kalzip.com/

    http://www.kalzip.com/

    http://www.kalzip.com/kalzip_w.css

    <style>BODY{

    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size : 10px;

    }

    A {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: #ff0000;

    }



    A.contentLink {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: underline;

    color: #ff0000;

    }



    A:Hover {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: silver;

    }



    SELECT {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    background-color : Red;

    color : White;





    }

    A.news {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: #FFCC00;

    }



    .link {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    text-decoration: none;

    color: silver;

    font-size:10px;

    }





    LI {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }



    .SimpleTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }

    .SimpleTexttitle {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 12px;

    FONT-WEIGHT: bold;

    COLOR: #000000;

    }



    .SuperTexttitle {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 18px;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }



    .blackbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #000000;

    }

    .black {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }



    .yellowbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #FFCC00;

    }



    .whitebold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: white;

    }



    .redbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #FF0000;

    }



    .red {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-WEIGHT: normal;

    COLOR: #FF0000;

    }

    A.crosslinkbannertext {

    text-decoration: none;

    color: #FFCC00;

    }

    TABLE {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }





    .input {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#333333;

    border-width:1;

    border-color:#666666;

    border-style:solid;

    background-color:#FFE2C6;

    }



    .input_bold {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    FONT-WEIGHT: bold;

    color:#333333;

    border-width:1;

    border-color:#666666;

    border-style:solid;

    background-color:#FFE2C6;

    }



    .input_grey {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#000000;

    background-color:#E7E7E7;

    border: 1 solid #666666;

    }





    .input_blue {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#333333;

    border-width:1;

    border-color:#6699CC;

    border-style:solid;

    background-color:#E7E7E7;







    LI {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }

    }</style> .SmallSimpleTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 8px; FONT-STYLE: normal; FONT-WEIGHT: normal; COLOR: #000000; }

    .SmallTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 9px; FONT-STYLE: normal; FONT-WEIGHT: normal; COLOR: #000000; }

    http://www.kalzip.com/kalzip_w.css

    <style>BODY{

    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size : 10px;

    }

    A {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: #ff0000;

    }



    A.contentLink {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: underline;

    color: #ff0000;

    }



    A:Hover {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: silver;

    }



    SELECT {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    background-color : Red;

    color : White;





    }

    A.news {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10px;

    text-decoration: none;

    color: #FFCC00;

    }



    .link {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    text-decoration: none;

    color: silver;

    font-size:10px;

    }





    LI {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }



    .SimpleTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }

    .SimpleTexttitle {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 12px;

    FONT-WEIGHT: bold;

    COLOR: #000000;

    }



    .SuperTexttitle {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 18px;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }



    .blackbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #000000;

    }

    .black {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: normal;

    COLOR: #000000;

    }



    .yellowbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #FFCC00;

    }



    .whitebold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: white;

    }



    .redbold {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-STYLE: normal;

    FONT-WEIGHT: bold;

    COLOR: #FF0000;

    }



    .red {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    FONT-WEIGHT: normal;

    COLOR: #FF0000;

    }

    A.crosslinkbannertext {

    text-decoration: none;

    color: #FFCC00;

    }

    TABLE {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }





    .input {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#333333;

    border-width:1;

    border-color:#666666;

    border-style:solid;

    background-color:#FFE2C6;

    }



    .input_bold {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    FONT-WEIGHT: bold;

    color:#333333;

    border-width:1;

    border-color:#666666;

    border-style:solid;

    background-color:#FFE2C6;

    }



    .input_grey {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#000000;

    background-color:#E7E7E7;

    border: 1 solid #666666;

    }





    .input_blue {

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10;

    color:#333333;

    border-width:1;

    border-color:#6699CC;

    border-style:solid;

    background-color:#E7E7E7;







    LI {

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

    FONT-SIZE: 10px;

    COLOR: #000000;

    }

    }</style> .SmallSimpleTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 8px; FONT-STYLE: normal; FONT-WEIGHT: normal; COLOR: #000000; }

    .SmallTexttext { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 9px; FONT-STYLE: normal; FONT-WEIGHT: normal; COLOR: #000000; }




  • Makes me wanna say,

    Leave! Your CSS is no good here!



  • Please trim your absurdly long post. There are only two lines of actual CSS that need to be posted:

    .blackbold {
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    FONT-SIZE: 10px;
    FONT-STYLE: normal;
    FONT-WEIGHT: bold;
    COLOR: #000000;
    }
    .black {
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    FONT-SIZE: 10px;
    FONT-STYLE: normal;
    FONT-WEIGHT: normal;
    COLOR: #000000;
    }



  • sorry for the long post but there are so many small WTF that the hole picture must be seen.



  • @pre10dr said:

    sorry for the long post but there are so many small WTF that the hole picture must be seen.

    Well, it's a classic, sexy, well thought of DreamWeaver stylesheet.



  • @dmitriid said:

    This code is ok - for somebody who is scared of IE of course, since IE doesn't apply BODY{} settings to all elements, just to those it deems worthy (it doesn't apply them to tables, for instance)


    And of course Firefox does the same in quirks mode, in order to render pages compatibly. Compatibly, that is, with one of the biggest software WTFs in existence, namely IE (and that's why Firefox doesn't pass the ACID2 test either, I guess).

    But yes, the CSS in question is the work of a Dreamweaver fan. <sarcasm>After all, it's much faster to copy-paste than to think a little, and designer time is more precious than download time.</sarcasm>



  • @felix said:

    and that's why Firefox doesn't pass the ACID2 test either, I guess.

    Nope, FF doesn't pass ACID2 because the Gecko team considered that issue low priority for Gecko 1.8 (Firefox 1.5) and considered they had other more important things to work on.



  • @dmitriid said:

    This code is ok - for somebody who is scared of IE of course, since IE doesn't apply BODY{} settings to all elements, just to those it deems worthy (it doesn't apply them to tables, for instance)


    Only TDs don't correctly inherit all font properties, but they do inherit many, and usually you only need to re-define color and size for them. This is fixed in IE7. in IE7, all styes properly inherit. FFX lets TD inherit most font styles, but some, such as text-decoration, are strangely absent.

    All other elements inherit properly, except those with font-styles of their own, such as INPUT and PRE. Naturally BODY doesn't override those styles.


Log in to reply