Conditional Comments funktionieren nicht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
beachten
browser
code
dank
datei
display
element
frage
funktion
import
inhalt
mache
mitte
paar
problem
regeln
standard
version
weben
-
ho ;)
Ich habe eine Frage zu den Browserweichen...
Das funktioniert bei mir nicht, also mache ich irgendetwas falsch. Aber was?
Hier der Code:
<head> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt IE 7]> <style type="text/css">@import url(style_ie-kl-7.css);</style> <![endif]--> <!--[if IE 7]> <style type="text/css">@import url(style_ie-7.css);</style> <![endif]--> </head>
style.css soll das Stylesheet für alle Browser (Außer IE) sein.
stlye_ie-kl-7.css das Stylesheet für alle IE Browser unter Version 7.
style_ie-7.css das für den IE 7.
Aber das funktioniert so nicht.
Zumindest bei mir nicht...
Habe ich einen Fehler im Code, oder muss ich sonst noch etwas beachten?
lg
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
mit php (falls vorhanden) wäre es eine möglichkeit
<?php $user = $_SERVER['HTTP_HOST']; if (count(split("MSIE 7", $user)) >1) { ?> <link rel="stylesheet" type="text/css" href="msie_7.css"> <?php } else if (count(split("MSIE", $user)) >1) { ?> <link rel="stylesheet" type="text/css" href="msie_default.css"> <?php } else { ?> <link rel="stylesheet" type="text/css" href="default_fuer_alle_browser.css"> <?php } ?>
$_SERVER['HTTP_HOST']:
Enthält den Inhalt des Host:-Headers des aktuellen Requests, sofern ein solcher gesendet wurde. (Quelle: php.net)
Beitrag geändert: 17.11.2008 22:43:54 von beliar -
ho ;)
Danke für den PHP Code :)
Ich bin habe nur gerade entdeckt, dass das mit den Browserweichen doch funktioniert...
Aber irgendwie nur teilweise.
Mir kommt es so vor, als würde er sich alles, was nicht in der speziellen IE CSS definiert ist, von der allgemeinen CSS Datei nehmen.
Na auf jeden Fall funktionieren die Dinger... muss nur noch herausfinden, wie genau :/
Trotzdem danke ;)
Vil. komme ich darauf zurück, wenn ich mit den Browserweichen doch nicht zu Rande komme :)
thx
Sincer -
Hallo sincer,
Condition Comments bieten die Möglichkeit, IE-spezifischen Code zu schreiben, welcher von anderen Browsern (oder auch IE-Versionen) ignoriert wird. Dieser Code beschränkt sich nicht nur auf CSS allein.
Des Weiteren ist die Nutzung von @import an dieser Stelle unsinnig, da diese Stellen wenn überhaupt nur von IE-Browsern interpretiert werden und du dort die normalen <link>-Tags verwenden kannst.
Zu den CSS-Dateien.. Deine oben zuerst geladene CSS-Datei "style.css" wird immer geladen, egal, um was für einen Browser es sich handelt. Somit existieren auch die sich darin befindlichen Style-Definitionen.
Grundsätzlich funktioniert es bei CSS so, dass nachfolgende Definitionen vorangegangene überschreiben. Dh, dass bei dir bei einem IE-Browser über die zusätzlichen CSS-Dateien nur darin befindliche Definitionen genutzt und eventuell in der Standard-CSS-Datei vorher definierten Regeln überschrieben werden - aber nicht überschriebene Regeln dieser Datei werden natürlich auch genutzt.
Zusammengefasst: Die letzte Regel für ein Attribut eines Elementes (oder auch einer Elementen-Klasse, ...) gilt.
Zu beachten ist dabei natürlich noch, dass es auch Prioritätenunterschiede bei den Regeln gibt.
Element-Styles vor ID-Styles vor Klassen-Styles ... (für deinen Fall aber wohl nicht so wichtig).
Gruß
-
ho ;)
Vielen Dank für diese Info, das wusste ich nicht...
also ich habe das jetzt mal so umgeändert:
<link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="style_ie-kl-7.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="style_ie-7.css"> <![endif]-->
Dann habe ich aber noch eine Frage...
Und zwar zu dem "Überschreiben":
Ich kämpfe gerade mit dem Layout eines Menüs :D
Und zwar soll dieses im FF und IE7 mit scrollen, und im IE<7 nicht mehr, weil die das meines Wissens noch nichtkönnen (positon:fixed)
Im FF klappt ja alles prima... Das Menü ist ohne Abstand (margin: 0;) oben, und mit position:fixed; "läuft" es auch brav mit.
Im IE7 habe ich schon einmal das problem, dass der margin Befehl anders interpretiert wird.
Kannst du mir sagen, wie ich dem IE7 sagen kann, dass er den margin Befehl genauso "schön" ausführen soll, wie der FF es tud? ^^
(Beim IE<7 würde ich dann nur mehr das postition:fixed mit absolute überschreiben, und damit bleibt das Menü halt oben, aber es sollte trotzdem kein Rand zwischen Browserseite und Menü sein)
Nochmal vielen Dank ;)
thx
Sincer -
Wenn du ein Problem beim Margin hast, kann es sein das du im Quirks Modus bist und entsprechend das Box Modell vom IE7 wieder wie beim IE6 abläuft...sobald du in einem gültigen Modus bist sollte es in 99% aller Fälle im IE7 und FF 2+ identisch aussehen bei sauberen HTML/CSS.
//edit: Hin und wieder hilft es auch, anstatt margin einfach ein padding im äußeren Element zu setzen. Hilft beim Fixed Element natürlich recht wenig, aber als allgemeiner Tipp gut zu wissen ;)
Beitrag geändert: 20.11.2008 9:26:15 von evil-devil -
//EDIT2: Die folgenden beschriebenen Probleme konnte ich durch herumprobieren lösen XD
Hat zwar sau lange gedauert, aber es schaut jetzt halbwegs akzeptabel in FF un IE7 aus :D
Auf jeden Fall danke für die Tipps, die bisher kamen ;)
---------------------
ho ;)
Danke für den Tipp, an den Quirks Modus hatte ich noch gar nicht gedacht.
Jetzt habe ich aber noch immer ein oder zwei Probleme:
1) Ich verwende nun diesen Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Der sollte eig. den Standards Mode des Browsers hervorrufen, tud er laut der JS Funktion...
<script type="text/javascript"> alert(document.compatMode); </script>
... auch!
Also scheint es nicht am Quirksmode zu liegen, sondern an etwas anderem... aber was? :/
//Zusatz zu EDIT2:
Das Div mit dem Inhalt war zu breit. (angegeben 100%) - FF machts richtig, aber beim IE wird das Feld breiter, als der Bildschirm. Ich rate einmal, und behaupte, dass wenn die rechte Scrollleiste nicht da wäre, die 100% genau richtig wären, aber da die Scrollleiste ja da ist, schieben sich die 100% unter die Scrollleiste :/
Habs jetzt mal auf margin:98% gemacht, schaut zwar nicht soo gut aus, aber funktioniert ^^
2) Ich hätte die Seite auch gerne für den IE 6 ansehnlich gemacht.
(Das Menü mache ich für diesen Browser dann aber position:absolute - ich weiß, dass der IE6 das fixed noch nicht interpretiert...)
Wie kann ich es aber dann machen, dass das falsche Boxenmodell im IE6 trotzdem richtig aussieht, denn margin:0; bleibt ja. Was muss ich dafür in der CSS für alle IE's unter 7 verändern? Die wärte zu halbieren geht bei 0 wohl nicht so, oder habe ich da etwas falsch verstanden?
lg
Sincer
PS: *verzweifel* :(
//EDIT:
Also ich hatte eben einen Teilerfolg.
Ein Problem wurde gelöst, und das nächste tut sich auf :/
Ich habe der gesamten Seite nun folgendes zugewiesen: (für IE7)
* { margin:0; padding:0; display:inline; }
Das neue dabei ist das display:inline;
Nun habe ich endlich meinen Effekt, den ich wollte. Das Menü ist oben von links nach rechts ohne Abstand zum Browserrand...
Nur jetzt tritt ein Problem mit dem Inhalt auf -.-
Vorher war es so:
Menü leicht nach rechts versetzt.
Inhalt schön in der Mitte.
Jetzt ist es so:
Menü schön in der Mitte (ohne Abstand).
Inhalt jetzt zu weit rechts -.-
Und ich will die Kombination XD
Menü schön in der Mitte (ohne Abstand).
Inhalt schön in der Mitte.
^^
Muss ich dafür noch etwas beachten?
Beitrag geändert: 20.11.2008 20:01:08 von sincer
Beitrag geändert: 20.11.2008 22:34:30 von sincer -
CSS-Optimierung.. ein ziemlich leidiges und gehaßtes Thema..
Problem bei CSS ist meiner Einschätzung nach, dass viele Abhängigkeiten der einzelnen Styles vorhanden sind. Dies kann unter Umständen einige Schwierigkeiten verursachen.
Dazu kommt noch, dass CSS auch vom Aufbau des Dokuments abhängig ist.
Es wäre also ganz gut, wenn du einen Link zu der Seite angeben könntest oder zumindest ein paar Codesnippets zu den Betreffenden Bereichen (HTML-Codeblock, betreffende Styles).
Dann kann dir bestimmt besser geholfen werden. Ansonsten muss man teilweise ins Blaue raten, und das wär glaub' nicht allzu hilfreich für dich.
Btw: Wenn du deine Seite für IE6 optimieren möchtest, kann es unter Umständen ziemliche viele Anpassungen erfordern. Diese haben ihren Ursprung meistens im Boxmodell, aber auch in teilweise unterschiedlich interpretierten Styles.
Da hilft im Allgemeinen nur Trial&Error, gerade weil man manchmal doch Wege findet, es in zwei oder drei von den Browsern über einen einheitlichen Style zu regeln, obwohl man es am Anfang nicht vermutet hätte (z.B., weil vorher funktionierend anders gelöst in einem von ihnen).
Edit:
Falls du es noch nicht benutzen solltest: Für Firefox gibt es das mehr als nützliche Addon Firebug. Damit kannst du einen Seite live clientseitig anpassen. Speziell beim CSS ist das mehr als hilfreich.
Für den Internet Explorer gibt es die sogenannte IE Web Developer Toolbar. Das Tool ist zwar nicht so schön umfassend wie Firebug, aber immernoch besser als gar nichts.
Nebenbei: Es existiert auch eine JS-Skript-Variante von Firebug, die man in der Testphase in sein Projekt integrieren könnte. Hat allerdings ein paar Beschränkungen, ist nicht ganz gut zu handhaben, aber gibt einem dennoch wiederum Funktionen wie das direkte Ausführen von JS-Code etc. pp.
Für Firefox gibt es zusätzlich auch noch ein Addon Web Developer Toolbar, aber das wird dir bei deinem Problem hier nicht weiterhelfen können.
Beitrag geändert: 24.11.2008 17:04:08 von pjhimself -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
