DOCTYPE und CSS

JPS · 17.01.2014

Habe hier Fremdcode der im Quirksmodus läuft.

Der aktuelle DOCTYPE ist <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Jetzt dachte ich mir, dass es sinnvoll sei mal aufzuräumen und wollte auf HTML5 umstellen. Ändere ich jetzt NUR den DOCTYPE zerschiesst es mir den table header. Der Code wird übrigens durch eine PHP Klasse erzeugt.
Hat der DOCTYPE einfluß auf das CSS?

cythux · 17.01.2014

Dieser Doctype ist für HTML5 und kein Einfluss auf die CSS

Code:

<!DOCTYPE HTML>

Da scheint es eher ein Problem bei deiner Tabelle oder PHP zu geben

JPS · 17.01.2014

Ja aber was halt interessant ist
• DOCTYPE HTML5 = Tabelle schrott
• DOCTYPE HTML4 = Tabelle korrekt dargestellt

cythux · 17.01.2014

http://webkompetenz.wikidot.com/html-handbuch:einfache-tabelle
http://webkompetenz.wikidot.com/html-handbuch:tabelle-kopf-koerper-fuss

cebito · 17.01.2014

JPS schrieb:
Habe hier Fremdcode der im Quirksmodus läuft.

Du schreibst es doch selbst, im Quirksmode machen die Browser halt was sie denken das richtig sein könnte. Hast du dich mal gefragt, warum du im Quirksmode bist? Der Doctype dort ist nämlich nicht vollständig. Richtig wäre

HTML:

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

Aber auch transitional verzeiht so einige HTML-Fehler.
Poste mal deinen generierten Quelltext incl. CSS...

JPS · 17.01.2014

Das hardverdrahtete CSS kommt daher, weil PHP das zum Teil aus einer config Datei zusammenbaut und die Erbauer es wohl direkt in die style Attribute schreiben..

HTML:

<table id="CalendarTableHeader" class="CalendarTableHeader" style="width: 1001px;">
<tbody id="myTableHeader">
<tr>
<td id="calendarHeaderZelle0" style="width: 46px;"> </td>
<td id="calendarHeaderZelle1" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<div style="padding-bottom:3px;padding-top:3px;overflow:hidden; white-space:nowrap; -moz-user-select: none; " unselectable="on">
Montag,
<br>
<span style="font-weight:normal;">13.01.2014</span>
</div>
</td>
<td id="calendarHeaderZelle2" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<div style="padding-bottom:3px;padding-top:3px;overflow:hidden; white-space:nowrap; -moz-user-select: none; " unselectable="on">
Dienstag,
<br>
<span style="font-weight:normal;">14.01.2014</span>
</div>
</td>
<td id="calendarHeaderZelle3" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<div style="padding-bottom:3px;padding-top:3px;overflow:hidden; white-space:nowrap; -moz-user-select: none; " unselectable="on">
Mittwoch,
<br>
<span style="font-weight:normal;">15.01.2014</span>
</div>
</td>
<td id="calendarHeaderZelle4" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<div style="padding-bottom:3px;padding-top:3px;overflow:hidden; white-space:nowrap; -moz-user-select: none; " unselectable="on">
Donnerstag,
<br>
<span style="font-weight:normal;">16.01.2014</span>
</div>
</td>
<td id="calendarHeaderZelle5" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<td id="calendarHeaderZelle6" style="overflow: hidden; -moz-user-select: none; width: 133px;" unselectable="on">
<td id="calendarHeaderZelle7" style="overflow:hidden; -moz-user-select: none;" unselectable="on">
<td id="calendarHeaderZelleSpacer" style="width:16px;"></td>
</tr>
</tbody>
</table>

JPS · 17.01.2014

Das sollte ich vielleicht noch nachliefern.

HTML:

.CalendarTableHeader {
        border-collapse:collapse;
        background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
    background:-moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000");    background: -o-linear-gradient(top,#4c4c4c,000000);
        color: #fff;
       
        background-color: #ece9d8;
        border: solid #313131;
    border-width: 1px 1px 1px 1px;
    margin:0px;
    z-index:10;
      }
     
      .CalendarTableHeader td {
                padding:0px;
                text-align:center;
                height:20px;
                font-size:11px;
                font-weight:bold;

               
      }

cebito · 17.01.2014

Ich hab das grad mal in ein Fiddle gehaun http://jsfiddle.net/t7bs6/ kann dein Problem leider nicht nachvollziehen (mit FF und Chrome) Aus welchem Browser ist denn der Screenshot?

JPS · 17.01.2014

Der Code kommt jetzt aus dem DOCTYPE HTML4 - der Screenshot FF und DOCTYPE HTML5

JPS · 17.01.2014

Ändere ich den DOCTYPE auf HTML5 verschwindet die px bei dem width.

HTML:

<table id="CalendarTableHeader" class="CalendarTableHeader" style="width:1000">

Das heißt transistional HTML4 fügt beim generierten Code der Class das px selber hinzu. HTML5 tut es nicht. Problem gelöst - DANKE!!!!!

cebito · 17.01.2014

Wie ich bereits sagte, transitional verzeiht (auch teilweise heftige) Fehler, was eigentlich immer ein Problem ist.

JPS · 17.01.2014

Ein Unfall hätte ich noch: -->

Code:

 td.tableDateCell{
border-left: 1px solid #313131;
border-right: 1px solid #313131;
border-bottom: 1px solid #aca899;
border-top: 1px solid #aca899;
background-color: #4b4b4a;
color: #eee;
vertical-align:top;
text-align:right;
padding-right:5px;
}
td.tableDateCell div {
width:40px;
font-weight:bold;
}
td.tableDateCell div span {
font-size:10px;
margin-left:3px;
margin-top:1px;
}
td.tableDataCell_dunkel_dunkel {
border-top: 1px solid #a39d90;
border-bottom: 1px solid #a39d90;
border-left: 1px solid #313131;
border-right: 1px solid #313131;
background-color: #ccccc9;
}
td.tableDataCell_hell_hell {
border-top: 1px solid #cbc6bc;
border-bottom: 1px solid #cbc6bc;
border-left: 1px solid #313131;
border-right: 1px solid #313131;
background-color: #ccccc9;
}
td.tableDataCell_dunkel_hell {
border-top: 1px solid #a39d90;
border-bottom: 1px solid #cbc6bc;
border-left: 1px solid #313131;
border-right: 1px solid #313131;
background-color: #ccccc9;
}
td.tableDataCell_hell_dunkel {
border-top: 1px solid #cbc6bc;
border-bottom: 1px solid #a39d90;
border-left: 1px solid #313131;
border-right: 1px solid #313131;
background-color: #ccccc9;
}

cebito · 17.01.2014

border-collapse? Oben ist es für den table-header definiert, wie es für den Rest der Tabelle aussieht lässt sich von hier aus leider nur raten.

JPS · 17.01.2014

Das border-collapse steht nur in dem Header Table und nicht im Body Table

cebito · 17.01.2014

Ja eben, dafür fehlt es dann...

JPS · 17.01.2014

ok das war es - CSS in Kombination mit von PHP generierten CSS kann auch schon mal unübersichtlich sein.