Dr. O. Hoffmann
Der Stil S geht von der Idee her auf einen Stil auf den W3C-Seiten zurück.
Mittels position: relative, margin, padding und verschiedenen Hintergrundfarben
wird ein Effekt hervorgerufen, als täten verschiede Strukturen Schatten
werfen.
Zudem wird das Menü rechts oben fixiert. Ältere browser interpretieren
das gar nicht und der ebenfalls ältere microsoft-internet-explorer (kurz: msie) interpretiert
es fehlerhaft (statt position: fixed; nimmt er position: static;). Korrekt wäre
ein Ignorieren, wenn er technisch nicht in der Lage wäre, das zu interpretieren.
Dann kann das technische Problem im Prinzip umgangen werden, indem erst
position: absolute direkt gefolgt von position: fixed festgelegt wird.
Da der msie fixed aber als static interpretiert,
zeigt er Unfug an. Um diesen Fehler des msie zu kompensieren, bekommt der
msie eine Datei mit besonderen CSS-Anweisungen zugewiesen. In weiser (?) Voraussicht
der zahlreichen Fehler dieses browsers oder aus Größenwahn haben die
microsoft-Entwickler eine spezielle Syntax erfunden (siehe Kopfdateien),
mit der auskommentierte CSS-Anweisungen vom msie trotzdem interpretiert werden.
Das wird hier im Bedarfsfalle angewendet, um ihm eine besondere Behandlung
zukommen zu lassen. Die Datei heißt dann entsprechend zu s.css einfach
ms.css. Diese Datei dient nicht dazu, den Stil genauso wie korrekt interpretiert
anzeigen zu lassen, sondern den Inhalt auch für diesen browser zugänglich
zu halten. Hier war es beispielsweise einfacher, den msie das Menü links statt
rechts anzeigen zu lassen, um weiteren Unfug bei der Anzeige des preformatierten
Quelltextes zu vermeiden.
html { margin: 0em; padding: 0em; background-color:#ffffdd; color:#000044; } body { margin: 0em; padding: 0em; font-size: 1em; font-family:times, serif; } h1 { font-size:2em; } h2 { font-size:1.7em; } h3 { font-size:1.5em; } h4 { font-size:1.2em; } h5 { font-size:1.1em; } p.obensub { font-size:1.2em; } acronym:hover, abbr:hover { cursor: help; } abbr[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } h1[title] { cursor: help; } a:link {color:#003399;} a:visited {color:#003377;} a:hover {color:#770077;} a:active {color:#550077;} a:focus {color:#cccc55; background-color:#0000aa;} div.links a:link {color:#0000ff;} div.links a:visited {color:#0000aa;} div.links a:hover {color:#bb0066;} div.links a:active {color:#ffaa00;} div.links a:focus {color:#dddd00;background-color:#0066cc; } div.hg1 { display: none; } div.hg2 { display: none; } div.hg3 { display: none; } div.logo { background-color: #442266; padding-left: 0.25em; padding-top: 0.5em; } h1.logo { font-size:3em; text-align: center; padding: 0em; margin: 0em; background-color:#ffffdd; border: thin solid #8844cc; } div.liin { position: absolute; position: fixed; top: 2em; right: 1em; background-color: #442266; border: thin solid #8844cc; width: 13em; } div.links { position: relative; top: -1em; left: -0.5em; background-color: #ccccee; border: thin solid #000000; padding: 1em; } div.rechts { position: absolute; top: 0em; right: 14em; left: 0.5em; } ul.menu { list-style-type: none; list-style-position: inside; padding-left: 0em; margin-left: 0em; } ul.menu li { } ul.menu a, ul.menu strong { display: block; border: 5px groove #000055; text-align: center; padding: 1px; margin: 1px; background-color: #aaaaff; } ul.menu a:hover { background-color: #8888ee; border: 5px inset #000055; padding-top: 2px; padding-bottom: 0px; } ul.menu li.me { border: 7px groove #000055; } ul.menu li.me a { border: 7px solid #aaaaff; font-weight:bold; } ul.menu li.me a:hover { border: 7px inset #000055; } li.leer { } li.stil a, li.stil strong { display: inline; border: none; text-align: left; padding: 0px; margin: 0px; background-color: #ccccee; } li.stil a:hover { display: inline; border: none; text-align: left; padding: 0px; margin: 0px; background-color: #ccccee; } li#s1 { } li#s2 { } div.oin { background-color: #442266; margin: 1em; margin-top: 2.0em; margin-left: 1.5em; border: thin solid #8844cc; } div.oben { position: relative; top: -1em; left: -0.5em; background-color: #ccccee; border: thin solid #000000; padding: 0.5em; } div.iin { background-color: #442266; margin: 1em; margin-left: 1.5em; margin-top: 1.5em; border: thin solid #8844cc; } div.inhalt { position: relative; top: -1em; left: -0.5em; background-color: #ccccee; border: thin solid #000000; padding: 0.5em; } div.inhalt p:first-letter {font-size:2em; color: #0088ff; float: left; padding-right: 0.2em; margin-top: 0em; margin-bottom: 0em; } div.inhalt h1:first-letter { font-size:2.4em; color: #0088ff; } div.inhalt h2:first-letter { font-size:2.0em; color: #0088ff; } div.inhalt h3:first-letter { font-size:1.8em; color: #0088ff; } div.inhalt h4:first-letter { font-size:1.6em; color: #0088ff; } div.inhalt h5:first-letter { font-size:1.4em; color: #0088ff; } div.pre { margin: 1em; background-color:#442266; padding-top: 0.5em; padding-left: 0.25em; } pre { padding: 0.5em; background-color:#ffffdd; overflow: auto; margin: 0em; border: thin solid #8844cc; } div.box { } div.table { overflow: auto; } table { border-collapse:separate; border: groove 10px #aaaacc; border-spacing:0.3em; background-color:#ccddff; empty-cells:show; padding: 0.5em; text-align: left; margin: auto; margin-bottom: 2em; } table:hover { border: ridge 10px #9999dd; } caption { padding: 0.5em; border: thin solid #000000; margin: auto; background-color:#ccddff; } th { padding: 0.2em; border: thin solid #ffffff; background-color:#ddddff; text-align: left; } td { padding: 0.2em; border: thin solid #555588; background-color:#9999ee; } .imgl { float:left; margin:2em; margin-left: 0em; clear: left; } .imgr { float:right; margin:2em; margin-right: 0em; clear: right; } img.scale { max-width: 100%; } .clear { clear: both; } input, select, option { background-color:#9999ee; border: thin solid #555588; } @media (max-width:35em) { div.liin {position: relative; right:0} div.rechts {position: relative; right:0; left:0} .inhalt ul {list-style-position: inside; padding-left:1em} }
Wenn es unter den Lesern noch jemanden gibt, der noch den microsoft internet explorer 6
oder älter benutzt, für den habe ich nochmal die unkorrigierte Originalstilvorlage
im Angebot, nur mal um zu gucken, wie schlecht der browser wirklich CSS interpretiert:
Original Schatten Stil ohne msie-Korrektur!
Sofern eine solche Korrektur vorhanden ist, kann sie bei jedem Stil in der location-Zeile abgeschaltet
werden, indem dem Stil eine 0 vorangestellt wird, also stil=0s statt stil=s.
Die CSS-Datei ms.css mit den Korrekturen:
div.liin { position: absolute; left: 1em; } div.links { width: 13em; } div.rechts { left: 14em; right: 1em; } ul.menu li { width: 10em; padding: 0em; margin: 0em; } div.pre { padding-bottom: 1px; }