CSS-Angaben werden nicht umgesetzt

Checkliste für Fehlersuche
  • Alle Abschluss-Klammern vorhanden?
  • Semikolons an den Zeilenenden vorhanden?
  • Kleben Zahlen und Werte aneinander?   Richtig: 10pt ;  falsch: 10 pt
  • Typische Editierfehler beim nachträglichen Ändern: pt, em, px u.ä. prüfen (p statt pt, x statt px)
  • Späteres Überschreiben von Werten?
  • Typischer Editierfehler bei  Farben: Raute doppelt?  color:##940000
  • Sind versehentlich Kommata statt Semikolons verwendet worden?

Wenn alle Stylesheets ab einem bestimmten Punkt nicht mehr umgesetzt werden:
  • Es dürfen keine Zeichen zwischen den Stylesheet sein, außer den /* */
    normale Kommentarzeichen <!-- --> sind im Head nicht erlaubt.



1px-border-dotted-problem bei IE

Quelle: unbekannt

/* This hacks larger dots for IEwin because it can't handle 1px border dots. (sigh) \*/
* html .samplecode {border: 2px dotted #993300;}
/* */

Reset Styles - Vorschlag von Eric Meyer

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Browser-Reset für eine möglichst einheitliche Darstellung. Er setzt die unterschiedlichen browsereigenen Styles, die jeder Browser hat und ungeachtet der W3C-Richtlinien haben darf, zurücksetzt. Die Browser haben alle eigene Default-Stylesheets. Weder HTML noch CSS schreiben die Default-Stylesheet für HTML vor. Beispiel: Ob und wie die Listenelemente in UL standardmäßig eingerückt werden, ist den Browsern überlassen. Die Browser benutzen zudem unterschiedliche Techniken. dies mit zudem Firefox und Opera benutzen für ihre Standardeinrückung das padding-Element, der IE benutzt das margin-Element: Bei Änderungen müssten in diesem Beispiel sowohl padding als auch margin auf 0 oder den gewünschten Wert gesetzt werden.


Daher gibt es verschiedene Vorschläge über das Zurücksetzen der Browserwerte. Der folgende Vorschlag ist der zweite, aktualisierte Vorschlag von Eric Meyer (meyerweb.com).Er passte dabei einen Vorschlag der Yahoo! UI group an und basiert auf deren  reset.css

Die Verwendung dieser Reset-Styles erfordert die zusätzliche Arbeit, alles neu definieren zu müssen.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Die Erläuterungen findet man auf
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Yahoo! UI Library: Reset CSS

Das CSS-Reset Packet ist ein Teil der Yahoo YUI Library auf Sourceforge. Es entfernt Vorgabewerte, wobei dann alle Elemente wirklich gleich aussehen. Download bzw. Beispiele und Erläuterungen: http://developer.yahoo.com/yui/reset/

Die YUI Base CSS setzten dann neue, einheitliche Standardwerte, die jeder für sich selbst überprüfen und anpassen kann:
http://developer.yahoo.com/yui/base/

Hier der code für den Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Hier der Code aus der Base-CSS


/* base.css, part of YUI's CSS Foundation */
h1 {
/*18px via YUI Fonts CSS foundation*/
font-size:138.5%;
}
h2 {
/*16px via YUI Fonts CSS foundation*/
font-size:123.1%;
}
h3 {
/*14px via YUI Fonts CSS foundation*/
font-size:108%;
}
h1,h2,h3 {
/* top & bottom margin based on font size */
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
/*bringing boldness back to headers and the strong element*/
font-weight:bold;
}
abbr,acronym {
/*indicating to users that more info is available */
border-bottom:1px dotted #000;
cursor:help;
}
em {
/*bringing italics back to the em element*/
font-style:italic;
}
blockquote,ul,ol,dl {
/*giving blockquotes and lists room to breath*/
margin:1em;
}
ol,ul,dl {
/*bringing lists on to the page with breathing room */
margin-left:2em;
}
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
/*giving UL's LIs generated numbers*/
margin-left:1em;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #000;
padding:.5em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
caption {
/*coordinated marking to match cell's padding*/
margin-bottom:.5em;
/*centered so it doesn't blend in to other content*/
text-align:center;
}
p,fieldset,table {
/*so things don't run into each other*/
margin-bottom:1em;
}

Google-Suche

Google

Geldverdienst mit Webseite