Browserkompatibilität
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
beispiel
blocken
browser
code
datei
display
frage
http
installieren
internet
jemand
position
problem
programm
quatsch
software
text
url
webseite
-
Hallo,
habe mal gehört, wenn der Internet Explorer die Webseite nicht richtig darstellt, das es da einen Script (Hack) gibt, der das umgeht und die Webseite richtig anzeigen lässt sowie auch in anderen Browser aber wie funktioniert das richtig wo muss der Script hin?
Ich bräuchte das für fast alle benutzen Browser:
IE 1-9 und Firefox und Safari etc. wer kann mir da helfen?
Gruß Markus K.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Script-Hacks funzen nur bei aktiviertem JavaScript, was im Fall von deaktiviertem JavaScript hinderlich ist.
Das Beste ist, mit CSS alle verwendeten Tags gnadenlos zu formatieren - dann stellen es auch (fast) alle Browser richtig dar.
Gruß, Menschle
Beitrag zuletzt geändert: 15.2.2011 19:59:55 von menschle -
Bau folgendes ein:
<!--[if lte IE 7.9999]> <link rel="stylesheet" href="/Pfad/zur/Css-Datei/design_ie.css" type="text/css"<![endif]-->
if lte IE 7.99999 sagt aus das alle Internetexplorer bis Version 7 und Updates das angegebene verwenden sollen. Macht Sinn bei sehr vielen Änderungen. Dabei kannst du alles reinschreiben was für den IE wichtig ist, andere Browser ignorieren die Angabe. Der IE zieht dann nur die nicht in diesem CSS verwendeten aus den für normale Browser.
Andere Möglichkeit für wenige Änderung:
z.B.:
#Beispiel1 { position: fixed !important; position: none; }
Dabei wird vom IE !important nicht beachtet, für alle anderen ist das Maß aller Dinge. Der IE nimmt die Angabe weiter unten.
mfg Stephan -
Hallo
Um was für eine Seite geht es denn? Wenn man von Anfang an darauf achtet, dass die Seite in allen Browsern gleich aussieht, sollte es eigentlich keine Probleme geben.
Was dir vielleicht hilft ist ein CSS-Reset. Dabei werden sämtliche wichtigen Sachen auf einen bestimmten Wert eingestellt, da jeder Browser andere standards hat. Dann kannst du nach belieben drauf los programmieren und alles so machen, wie du es willst :)
Das hat vermutlich "menschle" mit "formatieren" gemeint (?).
Was ich auch gebraucht hab, damit meine Webseite im IE normal aussieht, war das Doctype. Ach und hier und da noch ein Overflow:hidden
Extra CSS-Dateien für den IE zu machen finde ich quatsch.
Es gibt übrigens Seiten, mit denen du deine Webseite auf verschiedenen Browsern testen lassen kannst. Leider fällt mir im Moment nur browsershots.org ein, die haben aber keinen IE irgendwie
Wenn es sich natürlich um etwas handelt, das nicht selbstgemacht ist, wirds schon etwas schwieriger die Seite schön hinzukriegen. Am besten du sagst uns erstmal, worum es genau geht :)
mfg
-
voloya schrieb:
...
Extra CSS-Dateien für den IE zu machen finde ich quatsch.
....
So ein Quatsch ist das nicht! Alle Profiseiten setzen Browserweichen ein um ein einheitliches browserübergreifendes Erscheinungsbild zu gewährleisten. Man kann noch so strict und validen Code schreiben, man kommt nicht drum herum, vor allem nicht für kommerzielle Seiten.
Es ist ja nicht so dass nochmal eine kommplette CSS geschrieben werden muss, sondern nur bestimmte Selektoren, die Schwierigkeiten machen, überschrieben werden müssen.
Gruß Tom -
tom-moeller schrieb:
voloya schrieb:
...
Extra CSS-Dateien für den IE zu machen finde ich quatsch.
....
So ein Quatsch ist das nicht! Alle Profiseiten setzen Browserweichen ein um ein einheitliches browserübergreifendes Erscheinungsbild zu gewährleisten. Man kann noch so strict und validen Code schreiben, man kommt nicht drum herum, vor allem nicht für kommerzielle Seiten.
In meinen Augen ist es auch Quatsch. Wenn man XHTML 1.0 Strict oder XHTML 1.1 und CSS 2 verwendet und einige Sachen beachtet damit der IE nicht in den falschen Interpretationsmodus schaltet (Doctype in erster Zeile definieren) sondern auch diese Standards verwendet, ist es so gut wie kein Problem. Dass dennoch viele großen Webseiten Weichen einsetzen liegt eher darin, dass an Qualität gespart wird. Gerade in der Medienbranche findet ein großes Preisdumping statt, dann kriegt den Auftrag eben eine Agentur, die die Seite schnell und günstig umsetzt, sich aber nicht mit Kompatibilität aufhält.
Beitrag zuletzt geändert: 16.2.2011 12:34:41 von trueweb -
wenn man ein websiteaussehen haben möchte was für alle Browser geht kann ich wieder nur das Frameowrk YAML empfehlen, dass bringt für alle IE-Versionen einen extra Patch-ordner mit der eingebunden wird, sodass da auch die webistes wie unter Firefox usw aussehen.
Aber kenne auch viele seiten die über ein javascript die browserverion abfragen und daran dann jeweils die benötigte css laden.
Beitrag zuletzt geändert: 24.2.2011 22:36:08 von cms-world -
Um mal wieder auf die Frage zurückzukommen will ich die Antworten mal zusammenfassen und zusätzlich noch einige weitere Einbringen, dazu hier einmal ein ganz einfaches HTML Grundgerüst:
Dieses kleine HTML-Beispiel reicht bereits um ein Performanceproblem im IE zu fixen und ganz einfach auf den IE selektieren zu können, denn wenn ein IE auf die Seite zugreift bekommt das body-Tag eine besondere Klasse:<!DOCTYPE html> <html lang="de-DE"> <!--[if IE]><![endif]--><!-- Just a hack for IE performance view: http://www.phpied.com/conditional-comments-block-downloads --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="de-DE" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Eine kurze Seitenbeschreibung, möglichst unter 150-200 Zeichen" /> <title>Der Seitentitel</title> <style type="text/css">@import url('layout.css');</style> </head> <!--[if lt IE 7]><body class="ie ie6"><![endif]--> <!--[if IE 7]><body class="ie ie7"><![endif]--> <!--[if IE 8]><body class="ie ie8"><![endif]--> <!--[if IE 9]><body class="ie ie9"><![endif]--> <!--[if !IE]><!--><body class="no-ie"><!-- <![endif]--> <script type="text/javascript">/*<![CDATA[*/document.body.className += ' js';/*]]>*/</script> <!-- seiteninhalt --> <script type="text/javascript" src="script.js"></script> </body> </html>
• wenn IE 6 oder früher, dann bekommt der body die Klasse ie6
• dadrüber bekommt der body jeweils eine Klasse aus ie und Version
• wenn es kein IE ist, dann ist die Hilfsklasse no-ie
Diese Klassen kann man dann im CSS ganz elegant nutzen, um Layoutfehler im IE zu berichtigen.
Außerdem wird dem body in einem Einzeiler noch die Klasse js hinzugefügt, falls JS aktiviert ist, so kann man ganz leicht im CSS unterscheiden, was angezeigt werden soll, wenn JS aktiviert ist und was passieren soll, wenn JS nicht aktiviert ist.
Das eigentlich JS wird dann am Ende geladen, damit die Seite schneller läd.
Es gibt außerdem noch diverse weitere Tricks um es dem IE gerecht zu machen, aber wichtig ist es vor allem das HTML "wohlgeformt" zu schreiben, dass heißt grob gesagt, dass du jedes Element welches du öffnest wieder schließen musst (<ELEMENT> </ELEMENT>), außer einigen Wenigen, die ich hier kurz aufzähle:
• meta
• link
• img
• br
• embed (braucht man eigentlich nicht)
dann passieren schon bedeutend weniger Fehler.
Für alles weitere ist es sinnvoller hier im Forum nach dem konkreten Problem zu fragen oder noch besser google.com zu konsultieren, die IE Fehler, die einen Webworker interessieren sind alle bekannt, inklusive der passenden Work arrounds.
Mit freundlichen Grüßen
Beitrag zuletzt geändert: 25.2.2011 0:31:47 von nemoinho -
daswing schrieb:
Bau folgendes ein:
<!--[if lte IE 7.9999]> <link rel="stylesheet" href="/Pfad/zur/Css-Datei/design_ie.css" type="text/css"<![endif]-->
if lte IE 7.99999 sagt aus das alle Internetexplorer bis Version 7 und Updates das angegebene verwenden sollen. Macht Sinn bei sehr vielen Änderungen. Dabei kannst du alles reinschreiben was für den IE wichtig ist, andere Browser ignorieren die Angabe. Der IE zieht dann nur die nicht in diesem CSS verwendeten aus den für normale Browser.
Andere Möglichkeit für wenige Änderung:
z.B.:
#Beispiel1 { position: fixed !important; position: none; }
Dabei wird vom IE !important nicht beachtet, für alle anderen ist das Maß aller Dinge. Der IE nimmt die Angabe weiter unten.
mfg Stephan
statt
kannst auch<!--[if lte IE 7.9999]>
schreiben<!--[if lt IE 8]>
-
Hier findest du eine komplette Dokumentation über fast alle Möglichkeiten an IE anzupassen auf einer Seite:
http://www.webdevout.net/css-hacks
Dort findet man einmal die Variante mit einer extra CSS und die andere, bei der man nur eine benötigt.
Meiner Meinung ist die Variante mit einer CSS nicht sehr sauber gelöst,
da ich keine getrennten Dateien habe und dadurch schnell Wirrwa entsteht.
Die Weichen sind daher besser gelöst.
Beitrag zuletzt geändert: 25.2.2011 8:25:48 von sneppa -
Ich hoff das passt hier rein!
Kennt jemand eine Seite/Programm mit der man seine eigene Website auf Browserkompatibilität checken lassen kann?
Meine Seite besteht aus HTML , CSS und PHP.
Ich habe online eine Browsercheck Website, , probiert, es hat jedoch mit der localhost-url nicht funktioniert.
Wisst ihr ob es offline Lösungen dazu gibt? (Wenn möglich kostenlos)
Grüße DonKevinjo! -
Lade doch die Seite schnell auf Lima und jag sie dann durch solch eine Seite?
Alternative, die wesentlich mehr Zeit in Anspruch nimmt:
Alle aktuellen/wichtigen Browser installieren und angucken :) -
Verwende einen gescheiten Doctype (xhtml 1.0 transitional, xhtml 1.0 strict oder xhtml 1.1), schreibe einen validen Quellcode (überprüfen über den W3C-Validator, da kannst du auch Dateien hochladen bzw. über Copy&Paste kopieren) und dann sollte es in jedem Browser gleich aussehen, selbst im IE 7.
-
@ snippa: Ja auf die Idee mit dem Installieren bin ich auch schon gekommen...aber ist aufwendig. Und hier auf Lima hochladen, da bin ich ja grad dabei. Allerdings wärs toll wenns auch offline Möglichkeiten gibt!
@trueweb
Ich hab den Code auf xhtml 1.0 strict überprüfen lassen, und es passt alles so weit. Das Problem ist nicht, dass nichts angezeigt wird sonder das teilweise die Menüs breiter/dünner sind oder etwas verschoben.
Daher wär eine Software toll, die mir das irgendwie checkt oder mir Screenshots von verschiedenen Browsern liefert...
-
donkevinjo schrieb:
Daher wär eine Software toll, die mir das irgendwie checkt oder mir Screenshots von verschiedenen Browsern liefert...
Eben, diese Software findest du aber nur über Internet, welche dann auch nur online läuft.
Browsershots bspw.
Aber auf deinem Rechner lokal wird es sowas nicht geben,
ist ja auch logisch,
das Programm müsste alle Browser installieren,
damit es dir zeigen kann, wie die Seite im entsprechenden Browser aussieht ;) -
donkevinjo schrieb:
@trueweb
Ich hab den Code auf xhtml 1.0 strict überprüfen lassen, und es passt alles so weit. Das Problem ist nicht, dass nichts angezeigt wird sonder das teilweise die Menüs breiter/dünner sind oder etwas verschoben.
Daher wär eine Software toll, die mir das irgendwie checkt oder mir Screenshots von verschiedenen Browsern liefert...
Das liegt daran, dass die verschiedenen Browser nicht jeweils das gleiche Boxmodell verwenden, also die Abstände nich überall gleich angezeigt/berechnet werden. Auch wenn der Validator sagt, dass alles Korrekt ist, heißt es noch nicht, dass die Browser das auch so interpretieren, zB ignoriert der IE unter Version 8 den Doctype wenn du einen XML-Prolog hast. Zeig uns doch mal deinen Quellcode damit wir konkret weiterhelfen können. -
Hallo!
Also ich als Webdesigner muss natürlich auch auf Browserkompatibilität achten. Darum kann man bei mir finden:
* Firefox
* Internet Explorer
* Opera
* IE-Tester
und einen älteren Firefox muss ich mir nochmal besorgen
Wenn man ein bisschen auf seinen Code achtet, kannst du in IE6 und dem neusten FF die gleichen Ergebnisse ohne Browserweiche erzielen.
Vermeide einfach margins nach Möglichkeit und benutze ab und an mal
display:block; overflow:hidden;
als CSS-Attribut - das hat mir schon so manches Problem weggeschubst ^^
Einfach einmal die Browser durchsehen - muss bei einer großen Seite ja nicht jede Unterseite sein, aber eben die kritischen Elemente.
Grüße
things -
Hallo
Ich hab doch weiter vorn in dem Thread von http://browsershots.org geschrieben...
Das ist doch genau das, was du suchst?
donkevinjo schrieb:
Ich hoff das passt hier rein!
Kennt jemand eine Seite/Programm mit der man seine eigene Website auf Browserkompatibilität checken lassen kann?
Meine Seite besteht aus HTML , CSS und PHP.
Ich habe online eine Browsercheck Website, , probiert, es hat jedoch mit der localhost-url nicht funktioniert.
Wisst ihr ob es offline Lösungen dazu gibt? (Wenn möglich kostenlos)
Grüße DonKevinjo!
Die Seite liefert dir Screenshots von zig Browsern. Natürlich ist das keine offline Lösung aber wenn du eine Internetseite hochlädst hast du ja eh Internet..
mfg
-
Hi! Erstmal danke für die ganzen Antworten! Also die online Seite hab ich auch schon gefunden, aber wie gesagt, mir wäre eine offline Lösung lieber. Warum? Weill ich noch nicht so gut im CSS programmieren bin und daher immer mal wieder schaun muss, wie sich mein Code auf das Layout auswirkt. Wenn ich dafür jedesmal meine Seite neu hochladen muss ist das umständlich. Zudem hab ich im Zug zum Beispiel kein Internet - und ja ich weiß auch dafür gibts Möglichkeiten.
Nun, ich poste einfach mal eine stark vereinfachte Version des Codes. Mein Problem ist die Menuleiste: in Firefox passt alles, aber zum Beispiel indem PHP-Eclipse integrierten Browser ist die Menuleiste total nach rechts verschoben und ich bekom sie nicht in die Mitte.
Nur weiß ich nicht, ob man sich um diesen Browser kümmern sollte oder nicht.
Vielleicht fällt euch ja ein grober Fehler auf,der das verursacht haben könnte. Viele Grüße an euch!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="ich" /> <meta name="keywords" content="asdfasdfasdf" /> <meta name="description" content="asdfasdfasdf" /> <meta name="robots" content="all" /> <title>Meine Seite</title> <link rel="stylesheet" href="pi-css/000/estilos.css" type="text/css" media="screen" /> </head> <body id="pi"> <div id="contenedor"> <div id="intro"> <div id="titulo"> <h1><span>TRALALALA</span></h1> <h2><span>Blalalala</span></h2> </div> <div id="resumen">Meine Seite</div> <div id="comentario">Blablaba</div> </div> <div id="enlacesintra"> <h3 class="intra"><span>verlinkungen:</span></h3> <ul class="ul1"> <li class="li1"><a class="a1" href="#objetivos">Link1</a></li> <li class="li2"><a class="a2" href="#contenidos">Link2</a></li> <li class="li3"><a class="a3" href="#profesores">Link3</a></li> <li class="li4"><a class="a4" href="#bibliografia">Link4</a></li> </ul> </div> <div id="apartados"> <div id="objetivos"></div> <div id="profesores"></div> <div id="bibliografia"></div> </div> <div id="enlaces"></div> <div id="enlacesversiones"></div> </div> </body> </html>
Und hier der CSS code:
body { background:blue; font-size:90%; font-family:Arial,Helvetia, sans-serif; text-align:center; margin-bottom:120px; } #titulo{ border-style:solid; border-width:1px; position:relative; color: #003366; background-color:white; } #contenedor{ width:800px; margin-left:auto; margin-right:auto; color:#666; } #contenedor ul{ list-style-type:none; } #contenedor a{ color:#00BBEE; } #enlacesintra { display: block; float: left; font-size: 12px; height: 40px; padding: 0; position: absolute; top: 180px; width: 800px; margin-top: -2px; } .intra{display:none;} #enlacesintra ul{ list-style-type: none; margin: 0; padding-bottom: 12px; padding-left: 2px; padding-top: 12px; } #enlacesintra ul li{ display: inline; float: none; padding: 0; } #enlacesintra ul li a { background: none repeat scroll 0 0 #00BBEE; color: white; font-size: 100%; font-weight: bold; height: 0; padding: 15px 40px; text-decoration: none; } #enlacesintra ul li a:hover{ color: #666; background:#CCFFFF; text-decoration:none; } #enlacesintra ul li a.active{ color:white; background:#ddd; text-decoration:none; } #apartados{ float:left; width:69%; height:632px; overflow:auto; background:white; font-size:90%; } #enlaces{ background: none repeat scroll 0 0 white; float: right; font-size: 90%; height: 515px; width:248px; text-align:left; } #enlacesversiones { display: block; float: left; text-align:center; height: 40px; margin: 0; width: 800px; background:white; padding: 0 0 5px; border-top-style:dotted; border-width:1px; }
-
statt
kannst auch<!--[if lte IE 7.9999]>
schreiben<!--[if lt IE 8]>
ich habe selbst auch gerade eine Seite für den IE optimiert, allerdings funktioniert genau dieser oben angeführte Befehl auf meiner Seite nicht...
habs auf mehrere Arten versucht einzubinden, die mir google ausgespuckt hat :
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="stylesheet.ie.css" /><![endif]-->
....@import url...
Wenn ich den für InternetExplorer geschaffenen stylesheet als standard benutze, funktioniert er einwandfrei, allerdings nicht wenn ich ihn mittels dem Befehl "if" aufrufen will...
Woran scheitert es? Kann mir da jemand weiterhelfen?
thx
Cdot
PS: Ich verwende gleich diesen thread, da das Thema wie ich finde ziemlich ähnlich ist
Beitrag zuletzt geändert: 4.6.2011 10:30:44 von cdot -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
