Jeder, der sich mit dem Gestalten von Webseiten beschäftigt weiß es: Der Internet Explorer ist scheiße! Anders kann man es nicht sagen. Jetzt habe ich letztens eine Seite erstellt, bei der ich die <h1>-Tags mit einem Image-Replacement anhübschen wollte. Die Phark Methode hat leider nicht ganz geklappt, weil der WinIE5.01 das Hintergrundbild des Tags nicht gezeigt hat und da ja der Text „irgendwo da oben“ ist, wurde er auch nicht angezeigt. Also keine (sichtbare) Überschrift. Blöd das. Somit bin ich auf die MIR ausgewichen. Die geht auch wunderbar. Nur als ich die Seiten in der WinIE-Familie testete, musste ich feststellen, dass bei einer (!) Überschrift der erste Buchstabe des Wortes nicht ausgeblendet wurde. Der gute Junge war halb hinter und halb vor dem Hintergrundbild. 😮 Als ich ein anderes Wort als Überschrift benutzte, war das Phänomen verschwunden. Gut gelacht, gewundert, vergessen.
Gestern wurde ich dann angeschrieben, dass auf der Seite alle Überschriften dieses seltsame Verhalten an den Tag legen würden. Milde Panik stieg in mir auf. Und eine gehörige Portion Hass auf den IE. Doch mir kam eine Lösung. Ich habe es zum Testen gegeben und mir wurde gesagt, das Problem würde jetzt nicht mehr auftreten. Hier der HTML-Code:
< !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" lang="de" xml:lang="de">
<head>
<title>CSS-Problem mit dem IE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="content">
<h1 class="phalter">Platzhalter</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>
</body>
</html>
Benutzt habe ich eine Grafik mit den Maßen 100 Pixel x 40 Pixel. Die main.css sieht so aus:
/*basics*/
body{
background-color: #B5DEEC;
margin: 0px;
padding: 0px;
@padding-left:1px;
color: #171b72;
font: 0.9em/1.1em "Lucida Grande", Helvetica, Arial, sans-serif;
text-align: center; /*ist ein zentriertes Design*/
}
#content{
width: 500px;
margin: auto;
text-align: left;
}
/*MIR*/
h1{
height: 40px;
letter-spacing: -3000em;
}
/* Just for Opera, but hide from MacIE */
/**/html>body h1 { letter-spacing : normal; text-indent : -2999em; overflow : hidden;}
/* End of hack */
.phalter{
background: url(platzhalter.gif) no-repeat;
width: 100px;
}
Wie gesagt, das geht so nicht ganz. Wieso auch immer. Kann auch am Luftdruck liegen, dass der olle IE rummuckt. Wer kann das bei so einem Stück #%&§$ schon sagen? Die Lösung ist dann wiederum ganz einfach. Hinter der ersten abschließenden eckigen Klammer kommt ein und dann sollte es klappen. Wer mag, kann es gerne noch einmal nachprüfen und dann kommentieren.
<h1 class="phalter"> Platzhalter</h1>