nicht angemeldet
Hallo,
Ich habe eine Webseite (http://kraftdurchkot.port5.com/test.html) erstellt und finde da ein Problem.
Die Seite ist für mein Vater und er nutzt den Internet Explorer, erstellt, also dachte ich erstmal an die Bedürfnisse von diesem Webagenten.
Die Seite ist nicht für die LeserInnen gemacht...?
Ich habe ein wenig mit dem Rand getrickst, sodass die Seite IMHO ganz hübsch aussieht. Nur habe ich ein Problem bei der Positionierung. Ich musste z-index: einsetzen, damit mein h2 unter div id="navi" liegt, doch zeigt der Internetexplorer h2 höher an, als er normalerweise sollte.
Das ist nicht verwunderlich, du hast keine festen Größen für height und/oder line-height angegeben, damit kannst du dir nicht sicher sein, ob es mit der absoluten Positionierung pixelgenau passt.
Also habe ich für den IE die Seite geschrieben und Mozilla zeigt jetzt die Seite so an, dass die Überschrift kaum lesbar ist. Das wurmt mich nun, sodass ich es ändern will.
Zuerst einmal: Du hast das Markup als XHTML 1.1 deklariert, alleine das ist doppelt sinnlos, denn zuerst einmal versteht der MSIE kein XHTML 1.1 vom Typ application/xhtml+xml und dutzende andere Browser auch nicht (der Server liefert es sowieso als text/html aus). Folglich solltest du die Kompatibilitätsrichtlinien beachten, http://www.w3.org/TR/xhtml1/#guidelines, und dein XHTML als text/html ausliefern. Das zweite Problem ist die XML-Deklaration, sie löst im Internet Explorer den Kompatibilitätsmodus aus, in welchem das CSS-Boxmodell nicht standardgemäß angewendet wird. Du hast die Seite für dieses fehlerhafte Boxmodell geschrieben, damit ist vorprogrammiert, dass die Seite in anderen Browsern grausig aussehen wird, folglich solltest zumindest im MSIE 6 den standardkonformen Modus anschalten, indem du die XML-Deklaration herausnimmst.
Für den MSIE 5.x darfst du dann das fehlerhafte Box-Modell umgehen, siehe http://www.b-spoke.de/artikel/css-box-model/basic.html und http://www.fabrice-pascal.de/artikel/ie5boxmodel/.
Ich habe einfach in die CSS-Datei (http://kraftdurchkot.port5.com/aufmotz.css) @import url(ns.css); geschrieben, womit ich den IE ausgetrickst habe
Wieso? Welche Version? Ist das ein Hack, um Quelltext zu verstecken? Meines Wissens (http://w3development.de/css/hide_css_from_browsers/import/) wirkt dieser überhaupt nicht auf neuere MSIEs, das heißt nicht in dieser Anwendung.
und nur die standartkonformen Browser lesen können.
Standard.
Doch leider muss man @... am Anfang des Dokumentes schreiben, also wird die Formatierung von der "falschen" überschrieben und ich bin wieder am Anfang :(
Gibt es denn eine Möglichkeit doch noch so zu formatieren, dass Mozilla UND Internet Explorer die Seite korrekt anzeigt?
Ja, formatiere die Seite völlig anders. Auch Tobias' Tipp wird die Seite im Mozilla und anderen Browsern nicht gut aussehen können (im Mozilla ist sie nachwievor grässlich anzusehen).
ps: Natürlich könnte ich auch einfach in das HTML-Dokument
"<style type="text/css" title="Autorenstylesheet"><!-- @import url(ns.css) screen; --></style>" schreiben, aber aus ungenannten Gründen will ich das nicht.
Wieso...? Das (die Angabe von screen) wäre doch die einzige Möglichkeit, Styles vor neueren MSIE-Versionen zu verstecken.
Es folgt ein Gegenentwurf, reduziert auf das Nötige; die Boxen sind untereinander flexibel angeordnet und nur die Navigation mit float links positioniert, es wird davon ausgegangen, dass das Markup den standardkonformen Modus in den Browsern auslöst:
--8<--
html,body {margin:0; padding:0; font:1em 'trebuchet ms',verdana,helvetica,sans-serif;}
body,img {background-color:#ccc;}
#inhalt, #navi, h1, h2 {background-image:url(hg.gif); border-color:black; border-style:solid;}
h1 {
margin:30px 30px 0 30px;
padding:10px 25px;
border:1px black solid;
font-size:30px; font-style:italic;
}
h2 {
margin:0 0 0 30px; padding:10px 10px 10px 25px;
width:365px;
border-width:0 1px 1px;
font-size:28px; font-style:italic;
}
#navi {
float:left;
margin:0 0 0 15px; padding:20px;
width:140px; height:400px;
border-width:0 1px 1px 1px;
text-align:center;
}
body > #navi {margin:0 0 0 30px;} /* der eigenwillige MSIE... selbst im standards-compliant mode */
#navi a {
display:block;
margin:4px; padding:2px;
color:black; text-decoration:none;
border-width:2px; border-style:solid; border-color:#ddd #bbb #bbb #ddd;}
#navi a:hover, a:active {
padding:3px 1px 1px 3px;
background-color:#c2c2c2; border-width:2px; border-style:solid; border-color:#bbb #ddd #ddd #bbb;
}
#navi a:active {background-color:#cfcfcf;}
#navi a, h3 {background-color:#ccc;}
#inhalt {margin:20px 30px 20px 230px; border:1px solid; padding:20px 10px;}
h3 {font-size:0.95em; padding:5px 0; margin-bottom:0;}
p {text-align:justify; margin:0 20px 10px 25px; text-indent:8px; line-height:22px;}
-->8--
Die Einheit »pt« ist übrigens für Bildschirmstyles denkbar ungeignet, wie du auch in ungefähr siebzehntausendvierhundertdreiundzwanzig Postings im Archiv nachlesen kannst, oder der Einfachheit halber: http://forum.de.selfhtml.org/archiv/2003/1/33533/#m182336.
Ich habe nicht alle Fehler korrigiert, das Konzept würde ich an einigen Stellen verbessern.
Grüße,
Mathias