CSS IE Fix - How to? Googlecode, Selfhtml & co
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anweisung
befehl
beispiel
code
datei
duo
eros
erstellen
esse
frage
http
inhalt
korrektur
laden
packen
problem
rest
umsetzen
url
wissenswerte
-
Hallo liebe Gemeinde,
nach langer Zeit melde ich mich wieder mit folgendem Anliegen:
Ich bin zurzeit dabei eine durchaus schlichte Website mit CSS zu basteln. So weit so gut.
Nun funktioniert natürlich alles in Chrome, FF usw. NUR der Internet Explorer (in meinem Fall IE9) will einfach nicht.
Ich bin kein Profi, das vorweg, aber nach kurzem googlen schien es, dass meine CSS Kompatibilitätsprobleme Geschichte seien.
Zu aller erst schies es, dass ich hilfe von Selfhtml erhalte. Hier der vorgeschlagene Code:
<link rel="stylesheet" type="text/css" href="basis.css"> <style type="text/css">@import url(modern_ohne_ie.css) all;</style> <!--[if IE]> <style type="text/css">@import url(ie.css);</style> <![endif]--> <!--[if IE 6]> <style type="text/css">@import url(ie6.css);</style> <![endif]--> <!--[if lt IE 7]> <style type="text/css">@import url(ie5-6.css);</style> <![endif]--> <!--[if lte IE 5.5999]> <style type="text/css">@import url(ie55-.css);</style> <![endif]--> <!--[if gte IE 5.5]> <style type="text/css">@import url(ie55+.css);</style> <![endif]-->
Quelle: http://de.selfhtml.org/css/layouts/browserweichen.htm#top
Hat leider nicht funktioniert. Entweder ich bin zu doof, aber irgendwie war er nicht mal in der Lage die css Dateien zu laden.
Als zweites fand ich bei Google Code ein paar Javascripte, die scheinbar gut funkionieren sollten.
Hier der Link dazu: http://code.google.com/p/ie7-js/
Bei dem google code habe ich versucht sowohl dasscript von google zu laden, als auch einen extra ordner mit dem heruntergeladenen script zu erstellen und von dort aus darauf zu zu greifen. Mal davon abgesehen, dass das .PNG Prozedere welches vorgeschlagen wurde, nur noch alles schlimmer machte, funktionierte auch dieses mal nicht alles wie es sollte.
Größtes Problem derzeit sind bei mir der border_radius, der sonst überall klappt.
LANGE REDE KURZER SINN:
Bin ich einfach zu blöd, die CSS IE Fixes ordentlich zu implementieren, oder funktionieren diese auch nicht überall?
Kennt jmd eine Seite wo eine Lösung präsentiert wird, die funktioniert.
ODER hat gar jmd eine scheinbar idiotensichere Erklärung, wie ich die javascripte ordentlich ausführe?
Meine HTML sieht zZ so aus: (einige inhalte gelöscht oder gekürtzt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="...." /><meta name="description" content="...." /> <title>TITEL</title> <link href="all.css" rel="stylesheet" type="text/css" /> <!-- Anfang IE CSS Korrektur --> <!--[if lt IE 7]> <script src="ie7/IE7.js"></script> <![endif]--> <!--[if lt IE 8]> <script src="ie7/IE8.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="ie7/IE9.js"></script> <![endif]--> <!-- Ende IE CSS Korrektur --> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="wrapper"> <div class="left"> <h2 id="notfall">INHALT</h2> </div> <div id="sprache"> <a href="index2.html"><img src="bilder/flags/ger-trans.png" alt="Deutsch" width="32" height="21" class="sprachuse" /></a> <a href="#"><img src="bilder/flags/uk-trans.png" alt="English" width="32" height="21" class="sprachwahl" /></a> <a href="#"><img src="bilder/flags/rus-trans.png" alt="Pусский" width="32" height="21" class="sprachwahl" /></a> <a href="#"><img src="bilder/flags/viet-trans.png" alt="Việt" width="32" height="21" class="sprachwahl" /></a> </div> <div class="right">Sprachwahl:</div> <div class="clear"></div> <div id="header"> <h1 id="logo">INHALT</h1> </div> <div id="navi"> <ul> <li><a href="#" class="navilink">Start</a></li> <li><a href="#" class="navilink">Über uns</a></li> <li><a href="#" class="navilink">Leistungen</a></li> <li><a href="#" class="navilink">Neuigkeiten</a></li> <li><a href="#" class="navilink">Wissenswertes</a></li> <li><a href="#" class="navilink">Jobs</a></li> <li><a href="#" class="navilink">Kotankt</a></li> </ul> </div> <div id="left"> <div id="navi2"> <ul> <li><a href="#" class="navilink">Untermenu 1</a></li> <li><a href="#" class="navilink">Untermenu 2</a></li> <li><a href="#" class="navilink">...</a></li> </ul> </div> <div id="ticker"> <p><img name="" src="" width="141" height="116" alt="" /> ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie e</p> </div> </div> <div id="content"> <h1>Startseite</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p> <p> </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p> </div><div class="clear"></div> <div id="footer"> Footer.... copyright, impressum, etc</div> </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Guten Morgen.
Normalerweise brauch man dafür kein Javascript. Vielleicht hängt es auch nur an den Pfadangaben, oder einem Schreibfehler. k.A.
Außerdem ist der IE 9 ist doch schon "relativ" harmlos geworden.
Versuch es mal a la http://html5boilerplate.com:
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> ... <link rel="stylesheet" href="dein-stylesheet.css"> </head> ... </html>
wenn du jetzt zum Beispiel für den IE 8 eine Änderung der ID #beispiel brauchst, dann schreibst du in deine CSS-Datei
.lt-ie9 #beispiel { /* Änderungen */ }
Die Anweisungen und Klassen kannst du natürlich anpassen.
if lte IE 7 -> class="oldie" (IE 7 und älter)
if IE 8 -> class="ie-8" (IE 8)
if gte IE 9 -> class="ie-9" (IE 9 und neuer)
würde auch reichen
-
Hall pcw,
vielen dank schonmal für die schnelle Antwort.
Das ist, wie ich sehe ja ein anderer doctype. Da muss ich gleich fragen of die if anfragen bei html 5 NICHT in den headteil gehören???
Wo genau bei boilerplate hast du das gefunden?
Oder kann ich das auch in xhtml 1.0 einfach umsetzen?
Und eigentlich kann ich ja auch eine extra css datei für IE erstellen, aber wie mach ich das, dass er NUR die problematischen css befehle da abruft und den rest in der richtigen css datei? oder sollte ich da lieber alles in eine packen? Übersichtlicher wäre es auf jeden fall.
Und dann noch eine Frage: haben widerrum andere Browser nicht probleme mit html 5 teilweise?
Gibt es kein funktionierendes script oder derartiges im netz (meinetwegen schon eine fertige css datei) für alle gängigen css befehle? Also größten probleme habe ich vor allem mit dem shadow und dem border.
LG Berliner -
Moin
Wo genau bei boilerplate hast du das gefunden?
in der index.html: https://github.com/h5bp/html5-boilerplate
Die if anweisungen für den IE kannst du hinpacken wo du willst. Beispiel: http://www.ie6nomore.com
Selbstverständlich kannst du auch eine seperate Datei für die IE Anweisungen erstellen.
aber wie mach ich das, dass er NUR die problematischen css befehle da abruft und den rest in der richtigen css datei?
indem du nur die problematischen css befehle da rein schreibst - was anderes ist da ja auch nicht nötig - und die Datei für den IE nach dem eigentlichen CSS einbindest. Somit werden die entsprechenden Befehle für den IE überschrieben.
Zeig doch mal alle zugehörigen Dateien um den Fehler zu lokalisieren.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage