Lay-out verdwijnt bij toevoegen Doctype in Firefox/Chrome

zaterdag 30 oktober 2010 13:26

Acties:

0 Henk 'm!

Broodje Bakpao Helmond

Topicstarter

Ik zit met een raar probleem, zodra ik de Doctype in mijn xHTML template toevoeg, dan verdwijnt de gehele lay-out van het scherm (niet zichtbaar).

Dit gebeurt in zowel Firefox, Opera en Chrome. Wanneer ik de lay-out oproep in IE8 dan gaat alles wel goed...

De betreffende lay-out is te bezoeken via http://dev.startcool.nl/, hieronder heb ik ook nog de broncode geplaatst.

Misschien dat iemand hier ziet waar het fout gaat?
Ben zelf al even bezig om dit probleem op te lossen, volgens de W3C Validator is alles goed.

Om het probleem zichtbaar te maken, heb ik wat PHP code toegevoegd om de doctype tijdelijk uit te schakelen:
Met doctype: http://dev.startcool.nl/
Zonder doctype: http://dev.startcool.nl/?doctype=0

xHTML Template:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
        <title>StartCool.NL The Coolestway To Start</title>
        <link rel="stylesheet" href="/website/templates/basic/basic_css.php"/>
    </head>
<body>
    <div class="sc_body">
        <div class="sc_header">
            <div class="sc_header_border_1"></div>
            <div class="sc_header_blank_1"></div>
            <div class="sc_header_blank_2"></div>
            <div class="sc_header_border_2"></div>
            <div class="sc_header_blank_3"></div>
            <div class="sc_header_color_1"></div>
            <div class="sc_header_blank_4"></div>
            <div class="sc_header_border_3"></div>
        </div>
        <div class="sc_mid_header"></div>
        <div class="sc_main">
            <div class="sc_main_navi">
                <div class="sc_main_navi_header"></div>
                <div class="sc_main_navi_info"></div>
                <div class="sc_main_navi_break"></div>
                <div class="sc_main_navi_header"></div>
                <div class="sc_main_navi_info"></div>
            </div>
            <div class="sc_main_text">
                <div class="sc_main_text_header"></div>
                <div class="sc_main_text_info"></div>
            </div>
        </div>  
    </div>
</body>
</html>

CSS Template:

Cascading Stylesheet:

                .sc_body            { 
                                        background-color: #FFFFFF; 
                                        width: 1000px;
                                        margin: auto;
                                        position: relative;
                                    }
                .sc_header          { 
                                        background-color: #BCBDBF; 
                                        border-top: 1px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_header_blank_1  { 
                                        border-top: 0px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 0px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        background-color: #BCBDBF; 
                                        height: 1px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_header_blank_2  { 
                                        background-color: #FFFFFF; 
                                        border-top: 0px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 3px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_header_blank_3  { 
                                        background-color: #FFFFFF; 
                                        height: 65px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_header_blank_4  { 
                                        background-color: #FFFFFF; 
                                        border-top: 1px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 4px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }

                .sc_header_color_1  { 
                                        background-color: #f3f3f3; 
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 0px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 7px;
                                        width: 998;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_header_border_1 { 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/border_1.png'); 
                                        height: 43px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_header_border_2 { 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/border_2.png'); 
                                        height: 11px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_header_border_3 { 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/border_3.png'); 
                                        height: 25px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        left: 1px; 
                                        bottom: 0px; 
                                    }
                .sc_mid_header      { 
                                        background-color: #FFFFFF; 
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 18px;
                                        width: 998px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: 1px;
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_main        {
                                        background-color: #FFFFFF;
                                        border-top: 0px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 0px;
                                        height: auto;
                                        top: 1px;
                                        position: relative;
                                    }
                .sc_main_navi       {
                                        background-color: #FFFFFF;
                                        border-top: 1px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 0px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 200px;
                                        width: 151px;
                                        top: 1px;
                                        left: 0px;
                                        position: absolute;
                                    }
                .sc_main_navi_header{ 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/bgnavi_1.png'); 
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 20px;
                                        width: 151px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: -1px; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_main_navi_info  { 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/bgpaper.png');  
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: auto;
                                        width: 151px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: -2px; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_main_navi_break { 
                                        background-color: #FFFFFF;
                                        height: 5px;
                                        width: 151px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: -2px; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_main_text       {
                                        background-color: #FFFFFF;
                                        border-top: 1px;
                                        border-left: 0px;
                                        border-right: 0px;
                                        border-bottom: 0px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: auto;
                                        width: 842px;
                                        top: 1px;
                                        left: 155px;
                                        position: absolute;
                                    }
                .sc_main_text_header{ 
                                        background-image: url('http://dev.startcool.nl/website/templates/basic/bgnavi_1.png'); 
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: 20px;
                                        width: 843px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: -1px; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }
                .sc_main_text_info  { 
                                        background-color: #FFFFFF; 
                                        border-top: 1px;
                                        border-left: 1px;
                                        border-right: 1px;
                                        border-bottom: 1px;
                                        border-style: solid;
                                        border-color: #BCBDBF;
                                        height: auto;
                                        width: 843px;
                                        padding: 0; 
                                        margin: 0; 
                                        position: relative; 
                                        top: -2px; 
                                        left: 0px; 
                                        bottom: 0px; 
                                    }

[ Voor 0% gewijzigd door BtM909 op 01-11-2010 17:16 ]

* V&A Advertenties * Systemen: Inventaris

zaterdag 30 oktober 2010 13:27

Acties:

0 Henk 'm!

ZpAz

Je moet voordat je ook maar een regel CSS hebt meteen al een doctype hebben en vanuit daar werken, andersom werkt niet omdat je dan vreemde resultaten kunt gaan krijgen.

In dit geval zou je het denk ik op kunnen lossen door type="text/css" toe te kunnen voegen aan je '<link rel="stylesheet" .... ">'

Maar een website maken zonder doctype is als een huis bouwen zonder fundering.

[ Voor 38% gewijzigd door ZpAz op 30-10-2010 13:30 ]

Tweakers Time Machine Browser Extension | Chrome : Firefox

zaterdag 30 oktober 2010 13:29

Acties:

0 Henk 'm!

OnTracK

Ik heb er niet echt verstand van, maar met Chrome rondklikken in de source geeft mij het vermoeden dat je css niet als css geserveerd wordt. Sowieso heeft het de php extensie, maar als je maar de juiste header meegeeft werkt dat wel. Echter vermoed ik dat je dat ook niet doet. En dat dat zonder doctype nog geaccepteerd wordt.

[ Voor 8% gewijzigd door OnTracK op 30-10-2010 13:31 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

zaterdag 30 oktober 2010 14:15

Acties:

0 Henk 'm!

Verwijderd

Het netwerkpaneel van Firebug geeft duidelijk aan dat de CSS als 'text/html' wordt geserveerd, zoals OnTracK als suggereerde. Dat wordt dus

PHP:

1
2
3

<?php
   header('Content-Type: text/css');
?>

in je code opnemen.

[ Voor 7% gewijzigd door Verwijderd op 30-10-2010 14:15 ]

zaterdag 30 oktober 2010 14:26

Acties:

0 Henk 'm!

remy007

Broodje Bakpao Helmond

Topicstarter

Verwijderd schreef op zaterdag 30 oktober 2010 @ 14:15:
Het netwerkpaneel van Firebug geeft duidelijk aan dat de CSS als 'text/html' wordt geserveerd, zoals OnTracK als suggereerde. Dat wordt dus
PHP:
1
2
3
<?php
   header('Content-Type: text/css');
?>
in je code opnemen.

Inderdaad het probleem is opgelost. $_/-\o_$

* V&A Advertenties * Systemen: Inventaris

Onderwerpen