CODEWITHSUNDEEP
htmlcssdoctype
CogitoErgoSum
CogitoErgoSum

Reputation: 2907

DocType causes CSS not to be recognized

I've been bashing my head over some CSS issues and figured out it was the doctype.

The production site carries

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Where as our stage site carries

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

When using the production tag many of my text colors, sizes etc for my List elements disappear.

I use the 960 grid css file followed by its reset and text.css files.

After that I have a main.css file with my own styles, yet specifically the font stylings for my list inside a specific div don't get recognized

Below is the CSS for the page followed by the HTML

.sideBox {
    width: 225px;
    float: right;
    text-align: left;

}

.sidebox ul, #slideMenu ul {

    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
    margin-top:8px;
}

#slideMenu ul li {

    margin-right:10px;
    padding-right: 10px;
    float: left;
    width:150px;
    border-right: 1px solid #cccccc;
}

.sidebox li  {

    height:124px;
    margin: 0;
    padding: 0 10px;
    border-bottom: 1px solid #cccccc;


}

.sidebox li:first-child{
    height:123px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
.sidebox h3, .sidebox p
{
    margin: 0;
    color: #707070;
    padding:0;
    font-size: 22px;
    margin-top:1px;
    font-weight:500;

}
.sidebox p {
    font-size:18px;
    color:#a6a6a6;

}
.infoBoxDiv {
    height: 100%;

    vertical-align: middle;
}
.infoBoxDiv h2, infoBoxDiv.p {
    height: 100%;
    vertical-align: middle;
}
.sidebox li.infohighlighted {
    border-top: 2px solid #00A4E4;
    border-bottom: 2px solid #00A4E4;
    position:relative;
    top:-1px;
    height:121px;
}
.sidebox li:first-child.infohighlighted {
    border-top: 2px solid #00A4E4;
    border-bottom: 2px solid #00A4E4;
    position:relative;
    top:0px;
    height:121px;
}
.sidebox li.infohighlighted p {
    color: #707070;
    font-family: Georgia;
}
.sidebox li.infohighlighted h3 {
    color: #00A4E4;
    font-family: Georgia;
    margin: 0px;
    top: -1px;
    padding: 0px;
}



<html>
    <head>

        <link rel="stylesheet" type="text/css" href="css/960.css" />
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/text.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery_ui.js" type="text/javascript"></script>
        <script src="js/rotator.js" type="text/javascript"></script>

    </head>
    <body style="background-color:#e4e5ef;"><br><br>
        <div class="container_16" style="background-color:#fff;"><br><br>
            <div id="splashContainer">
                <div id="jqb_object">

                    <div class="jqb_slides">

                      Slides Here

                    </div>
                </div>

                <div class="sideBox">
                    <ul id="slideList">
                        <li id="infoBox_0" class="infoDefault infoHighlighted"><br><h3>$95 Rx Glasses</h3><p>Vintage inspired frames with prescription lenses</p></li>
                        <li id="infoBox_1" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new exclusively designed styles</p></li>
                        <li id="infoBox_2" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
                        <li id="infoBox_3" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
                    </ul>
                </div>
            </div>
            <div id="mediaBanner" class="subContainer">
                <div id="featuredIn">
                    <span style="vertical-align:middle; line-height:38px;">Featured In:</span>
                    <img src="images/nyTimes.png" style="vertical-align:middle;margin:none;padding:none;">
                    <img src="images/vogue.png" style="vertical-align:middle;margin:none;padding:none;">
                    <img src="images/dailyCandy.png" style="vertical-align:middle;margin:none;padding:none;">
                    <img src="images/gq.png" style="vertical-align:middle;margin:none;padding:none;">
                    <span style="vertical-align:middle; line-height:38px;color:#ccc; padding-left:30px;font-style:bold;">|</span>
                </div>
                <div id="socialBox"><span style="vertical-align:middle; line-height:38px;">Join Us | Follow Us</span></div>
            </div>
            <div class="subContainer miniBoxContainer">
                <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
                <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
                <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
            </div>
        </div>

    </body>
</html>

Upvotes: 1

Views: 5674

Answers (1)

Quentin
Quentin

Reputation: 943108

The doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">

triggers Standards mode in browsers, while the other one triggers Quirks mode.

In Quirks mode, browsers emulate the bugs of old browsers (very old, we're talking IE 5.5 here) in order to cope with sites designed by people unfamiliar with the standards. In this mode browsers are much more inconsistent with each other, and (in some cases) don't support some newer features of CSS at all. This makes Quirks mode highly undesirable.

In standards mode, browsers are much less forgiving of errors in the CSS. http://jigsaw.w3.org/css-validator/ will help you find them.

Upvotes: 9

Related Questions