Browserweiche für Anzeigenkrüppel
Die Rede ist vom IE, er hat uns all die Jahre gute Dienste geleistet und sich auf seinen Lohrbeeren ausgeruht. Die Regeln des W3C werden in keinster Weise eingehalten, bzw. vollkommen anders interpretiert. Aber dem unglaublichen Siegeszug des Firefox (manche bezeichnen ihn auch als Retter ;) ) ist kein Einhalt geboten, und das ist auch gut so. Damit ihre Seiten aber dennoch toll aussehen, auch wenn ihre Besucher keine Fuchsliebhaber sind, nutzen sie einfach die vom IE vorgegebenen Browserweichen (zugegeben, das war ne tolle Leistung von Microsoft).
Ein konkretes Beispiel ist der nervende Abstand den zwei Bilder haben die nebeneinander stehen. Eine Möglichkeit ist folgende Ausgabe: <img src=”bild.jpg” alt=”" /><img src=”bild2.jpg” alt=”" />
Dadurch das die Bilder nebeneinander stehen, also ohne einmal “ENTER” dazwischen zu drücken (oh man, wie soll man das verständlich ausdrücken) werden sie seltsamerweise auch richtig angezeigt, sinnbefreit, aber so ist es.
Es gibt aber noch speziellere Fälle, bei denen ein solches vorgehen nicht von Erfolg gekrönt ist (glaubt mir, ich war selbst in der Situation, da mein Bild nämlich als Background-Image, in einem link eingebunden, angezeigt werden musste) und da ist es nur möglich das ganze Problem mit der Browserweiche zu lösen. Ich gehe davon aus, das dein Code im Firefox/Netscape usw. richtig dargestellt wird, nur der IE Probleme bereitet.
Das folgende Beispiel soll nur einen Lösungsansatz bieten, quasi Pseudocode, damit jeder eine Lösung findet, egal in welcher Form das Problem auftritt.
Wir schreiben folgenden Code in unseren Head-Bereich:
<!--[if IE]>
<style type="text/css">
a#bild_links img {background: url(button_home1.gif) top left no-repeat; display: block; width: 150px; height: 43px; float: left; margin-left: -3px;}
a#bild_rechts img {background: url(button_home1.gif) top left no-repeat; display: block; width: 150px; height: 43px; float: left; margin-right: -3px;}
</style>
< ![endif]-->
<a id="bild_left" href="home.html"><img src="blank.gif" alt="Home"/></a>
<a id="bild_rechts" href="home.html"><img src="blank.gif" alt="Home"/></a>
Sorry das der Code so mies formatiert ist
Es könnte sein das die Bilder immernoch untereinander stehen, obwohl der nötige Platz vorhanden wäre. Dann müssen die Bilder noch weiter verschoben werden, z.b. mit margin-top: -10px; usw.
Ich gebe zu, alles recht frickelei, aber hat ja auch niemand gesagt das Website-basteln ohne Editor für jeden geeignet ist ;)
Verwandte Artikel
- Browserweiche für Anzeigenkrüppel
- CSS Sprites - Background Repeat Problem
- CS:S vs. CSS
- Selbes Layout in IE und Firefox - Margin anstelle von Padding nutzen
- Verrücktes Javascript
Sei der erste, der einen Kommentar abgibt
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
