Hinzufügen von zu meinem Code verhindert, dass die externen Regeln der CSS angewendet werden ⇐ HTML

[Anonymous]

Ich habe eine Webseite, die ich mit W3 validieren möchte. Es heißt, ich muss zur Seite über dem Tag hinzufügen, also habe ich es getan. Infolgedessen haben sich mein CSS vermasselt. Wenn ich die CSS -Datei im Style -Editor bearbeite (sogar einfach die Eingabetaste in einer neuen Zeile drücken), wendet sie die CSS -Datei an und alles funktioniert gut. Ich habe viele Nachforschungen angestellt und die häufigsten Vorschläge sagen: < /p>


[*] Hinzufügen der Switches -Modi in den Quirksmodus (oder umgekehrt) und HTML, Körper {Höhe: 100%;} < /code> in Ihren CSS. (Überprüfen Sie und bereits ausgeführt, keine Unterschiede)
[*] Stellen Sie sicher, dass Sie den Typ = "text/css" verwenden und bereits ausgeführt werden, keine Unterschiede)
Beenden MEINE CSS CODE anwenden? < /p>

Hier sind einige Code -Samples: < /p>






StudiOm Yoga, Jackson MS







$( function() {
$( "#dialog" ).dialog();
} );

$( function() {
$( "#dialog" ).hide();
} );






< /code>

Mein Kopfabschnitt mit dem Anfang HTML -Tag und docType HTML -Tag. < /p>

body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #ffffff;
}

a:-webkit-any-link {
color: inherit;
text-decoration: none;
cursor: grabbing;
}
a:link {
color:inherit;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
.bgimg-1 {
background-image: url("../images/website/allsmaller2.jpeg");
min-height: 100%;

background-repeat: repeat;
background-position: left;
background-size: 100% auto;

}

.bgimg-2 {
background-image: url("../images/website/ddog.jpg");
min-height: 60%;
}

.bgimg-3 {
background-image: url("../images/website/leg.jpg");
min-height: 60%;
}

.bgimg-4 {
background-image: url("../images/website/hangingwide.jpeg");
min-height: 60%;
}

.bgimg-5 {
background-image: url("../images/website/yoga5.jpg");
min-height: 100%;
}

.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}

.title
{
display:inline;
background-color: #111;
color: #fff;
border-radius: 6px;
padding: 15px;
margin: 0% 0%;
font-size: 25px;
letter-spacing: 10px;
}

.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}

h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #777;
}

.larger
{
font-size: 50;
}
a:visited
{
color:#ffffff;
}

div.table {font-size:20px;display: table;border:1px solid white; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow {display:table-row; border:1px solid white; text-align:center;}
div.tablecol {display:table-cell; border:1px solid white;}
div.schedule {padding: 10px;}

div.table2 {font-size:20px;display: table; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow2 {display:table-row; text-align:center;}
div.tablecol2 {display:table-cell; vertical-align:middle;}

div.tile
{
display: inline-block;
max-height: 300px;
max-width: 200px;

box-shadow: 5px 5px grey;
border: 2px solid black;
margin: 20px 20px;
}

#sn
{
filter:invert(100%);
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}

@media only screen and (max-width: 500px)
{
div.table {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow {display:block;border:1px solid white;}
div.tablecol {display:block;border:1px solid white;padding:10px;}

div.table2 {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow2 {display:block;border:1px solid white;}
div.tablecol2 {display:block;border:1px solid white;padding:10px;}
}
< /code>

Meine CSS -Datei, die nicht angewendet wird. < /p>