@import url();

[Nichtsnutz]

Hi!

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. 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. 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.
Ich habe einfach in die CSS-Datei (http://kraftdurchkot.port5.com/aufmotz.css) @import url(ns.css); geschrieben, womit ich den IE ausgetrickst habe und nur die standartkonformen Browser lesen können. 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?

Tschüss und Danke im Vorraus!

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.

[Tobias K.]

Hallo Nichtsnutz,

Gibt es denn eine Möglichkeit doch noch so zu formatieren, dass Mozilla UND Internet Explorer die Seite korrekt anzeigt?

versuchs mal mit einem !important hinter den Angaben in der ns.css (->http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules).

Grüße aus Nürnberg
Tobias

[Nichtsnutz]

Hi!

versuchs mal mit einem !important hinter den Angaben in der ns.css

Ui, danke, es klappt. Warum hat Selfhtml (noch?) nichts über important geschrieben?
Auf jeden Fall sehr lustig, wie einfach das ist :)

Tschüss!

[molily]

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

[Nichtsnutz]

Hi!

Erstmal vielen Dank für die gründliche Optimierung.
Nur bleibe ich bei dem position:absolute der einzelnen Elemente, da ich die Überlappung der Rahmen haben will. Trotzdem eine sehr elegante Lösung von dir.
Doch der eigentlich Grund meines Post hier ist:
Der eigentliche Fehler lag garnicht bei dem Internet Explorer, sondern bei Mozilla. Leider spinnt das ftp von Port5, weswegen ich eine Testseite auf einen anderen Server legen musste. Bei http://vampire.neotecc.de/position-absolut.html habe ich 2 Texte völlig identisch absolut positioniert. Nur habe ich einem Text margin:0 zugewiesen und schon versetzt Mozilla diesen Text ein Stück nach oben, der Internet Explorer hingegen lässt beide auf gleicher Höhe. Der Effekt ist jedoch nur zu beobachten, wenn man eine XHTML-Deklarierung benutzt. Bei einer HTML 4.01-Transitional-Deklarierung benutzt zeigen beide Browser das gewünschte Ergebnis an.

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/.

Ja, IE 5. Naja, ein optimales Layout für alle Browser zu machen ist zwar schön und gut, aber die Hauptsache ist IMHO das man den Text lesen kann und wenn man mit einem veralteten Browser herumeiert, dann soll man sich nicht ärgern, wenn bei einer Seite mal ein Strich nicht ganz ok liegt.

Tschüss!

[Christian Seiler]

Hallo Nichtsnutz,

Der eigentliche Fehler lag garnicht bei dem Internet Explorer, sondern bei Mozilla.

Nein. Der Mozilla verhält sich hier korrekt.

http://vampire.neotecc.de/position-absolut.html habe ich 2 Texte völlig identisch absolut positioniert. Nur habe ich einem Text margin:0 zugewiesen und schon versetzt Mozilla diesen Text ein Stück nach oben, der Internet Explorer hingegen lässt beide auf gleicher Höhe.

Du kannst gerne nachmessen: der obere Text ist zum einen der zweite Text und zum anderen hat Mozilla standardmäßig eine margin-top und margin-bottom in <p> eingebaut (der IE anscheinend nicht) und deswegen versetzt er den Text erst mit margin:0 an die richtige Stelle. Der untere Text ist nämlich viel mehr als 20 Pixel vom oberen Rand entfernt. Wenn Du beiden Texten margin: 0; verpasst, sind sie genau dort, wo Du sie haben willst.

Christian

[molily]

Hallo Nichtsnutz,

Der eigentliche Fehler lag garnicht bei dem Internet Explorer, sondern bei Mozilla. Leider spinnt das ftp von Port5, weswegen ich eine Testseite auf einen anderen Server legen musste. Bei http://vampire.neotecc.de/position-absolut.html habe ich 2 Texte völlig identisch absolut positioniert. Nur habe ich einem Text margin:0 zugewiesen und schon versetzt Mozilla diesen Text ein Stück nach oben, der Internet Explorer hingegen lässt beide auf gleicher Höhe. Der Effekt ist jedoch nur zu beobachten, wenn man eine XHTML-Deklarierung benutzt.

Der entscheidende Punkt ist, dass Mozilla die Ränder nur im Quirks-Modus auf Null setzt - wie auch immer, margin-top:0 verhindert jedes Problem diesbezüglich, weshalb kein Problempotenzial besteht.
Zwar liegt hier das »Problem« beim Mozilla, aber wenn du meine Tipps befolgt hättest, hättest du zumindest die Sicherheit, dass beide Browser standardkonform rendern:

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.

Ich sehe aber immer noch XML-Deklarationen und application/xhtml+xml (für diesen Test ist es irrelevant, weil Mozilla XHTML kann, dennoch musste ich erst überprüfen, ob MSIE den Testfall in den verschiedenen Rendermodi unterschiedlich anzeigt).

Bei einer HTML 4.01-Transitional-Deklarierung benutzt zeigen beide Browser das gewünschte Ergebnis an.

Dann war die Dokumenttypdeklaration unvollständig, sie hat sicherlich den Quirks-Mode ausgelöst: http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html. Ein voller Transitional-DOCTYPE (mit system identifier) löst im Mozilla genauso den standardkonformen Rendermodus aus wie ein XHTML 1.1-DOCTYPE mit XML-Deklaration (im MSIE ist es wie gesagt anders aufgrund der XML-Deklaration).

M.

[Nichtsnutz]

Hi!

Soweit so gut. Ich denke nochmal über alles nach, nur habe ich eine Frage an dich molily:
Warum benutzt _du_ auf deinen Webprojekten XHTML?

Tschüss!

[molily]

Hallo Nichtsnutz,

Soweit so gut. Ich denke nochmal über alles nach, nur habe ich eine Frage an dich molily:
Warum benutzt _du_ auf deinen Webprojekten XHTML?

Aus Gewohnheit, weil es »mir besser gefällt«, oder leichter fällt, das bedeutet rational-pragmatisch: grundlos. Mein HTML 4.01-Markup wäre qualitativ ebenso hochwertig (»straight«, valide und wohlgeformt), auch wenn mich die DTD nicht dazu zwingen würde, und ließe sich mit simplen RegExps in XML-Syntax umwandeln.
Zwar setze ich an einigen Stellen XML-Parser und beispielsweise das DOMXML-Modul von PHP ein und profitiere somit direkt oder indirekt vom XHTML-Markup, dennoch könnte ich dies auch anders lösen.
Übrigens verwende ich nicht durchgängig XHTML und liefere es sowieso als text/html aus, deshalb ist die komplette Diskussion »XHTML ja/nein« sinnlos, solange es kein Browser als XML behandeln kann beziehungsweise grobe Fehler macht (Opera ignoriert beispielsweise clientseitige Scripts im XHTML-Modus). XML/XHTML intern zu verwenden ist natürlich etwas anderes, aber ob die Browser sauberes HTML 4.01 oder XHTML 1.0 als text/html zu Gesicht bekommen, ist momentan wahrscheinlich gleich. Alleinig der/die Autor/in muss die Unterschiede beachten, welche bei XHTML als text/html auch (bei mir) gegen Null gehen.

Mathias