✔ Merkwürdigkeiten im IE 7

[Sprint]

Hallo Kollegen,

da sich unser Designer unbedingt Schatten bei auswechselbaren Layern eingebildet hat, darf ich das mal wieder ausbaden. Also sind alle entsprechenden Bilder als PNG 24 angelegt. Wie üblich klappt alles in richtigen Browsern problemlos. Den IE6 hab ich gleich außen vor gelassen und mit entsprechenden GIFs schattenlos gemacht. Die Erwartung, daß der IE 7 mit PNGs richtig umgehen kann, ist aber schwer enttäuscht worden. Solange Bildbereiche noch Bildpunkte enthalten, ist alles ok, aber an völlig leeren Stellen bringt er plötzlich einen weißen Hintergrund. (siehe Bild4) Ich hab das Bild im PS sowohl normal als auch "für Web" gespeichert, mit oder ohne Hintergrund, es war immer das selbe. Oder sollte das wirklich am IE Tester liegen?)

Weiter sind mir einige andere Merkwürdigkeiten aufgefallen, die NUR im IE 7 auftreten. Der 6er und alle anderen machen es richtig.
Hier wird der untere Teil der Schrift abgeschnitten (siehe Bild1):

#toptitel1 { color: black; font-size: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; vertical-align: bottom; position: relative; top: 20px; left: 330px; width: auto; height: 35px; float: left; border-bottom: 2px solid black; }

Das Menü ist als Liste aufgeführt und der jeweils aktive Punkt wird mit einem farbigen Streifen markiert. Der 7er führt den nur halb aus, alle anderen ganz. (siehe Bild2)

#menu { background-image: url(../Bilder/noshadow/navi.gif); background-repeat: no-repeat; text-align: left; position: absolute; z-index: 99; top: 0; left: 0; width: 175px; height: 220px; float: left; }
#menu ul { margin-top: 20px; }
#menu li { list-style: none; }
#menu li a { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 90%; text-decoration: none; letter-spacing: -0.02em; height: 10px; padding-left: 3px; border-left: 1px solid #666; display: block; }
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover { border-left: 1px solid fuchsia; }

<div id="menu">
	<ul>
		<li><a id="selected" href="index.html">Home</a></li>
		<li><a href="history.html">Firmengeschichte</a></li>
		<li><a href="team.html">Team</a></li>
	</ul>
</div>

Und als letztes ist mir noch aufgefallen, daß alle IEs bei dieser Liste keine Punkte, Kreise oder was auch immer davor setzt. Alle anderen machen es natürlich richtig. Ich hab schon so ziemlich alle Varianten für Listenformatierung ausprobiert, aber er verweigert die Punkte hartnäckig.

#toptitel { text-align: left; position: absolute; top: 60px; left: 330px; width: 200px; height: 100px; float: left; }
#toptitel ul { position: relative; top: 10px; left: -25px; }
#toptitel li { color: black; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; height: 20px; float: left; list-style-type: disc; list-style-position: outside; }

<div id="header">
	<div id="logo"></div>
	<div id="toptitel1">Fliesen für Ihre (T)Räume</div>
	<div id="toptitel">
		<ul>
			<li>Ausstellung</li>
			<li>Beratung</li>
			<li>Lieferservice</li>
		</ul>
	</div>
</div>

Ich hoffe, ich hab hier nicht zu viele Wünsche auf einmal geäußert. Wenn doch, schlag ich mit den Antworten unseren Designer tot.

 

[Maik]

Hi,

da ich abgesehen vom letzten Punkt mit deinen Codeauszügen von den übrigen Merkwürdigkeiten bei mir im IE7 überhaupt nichts davon entdecken kann, wäre zur Gegenkontrolle ein Link zur Seite ganz hilfreich.

Ursache für die fehlenden Listenpunkte ist nach einem Probedurchgang die float:left-Deklaration für das li-Element.

mfg Maik

 

[Sprint]

Hi,

da ich abgesehen vom letzten Punkt mit deinen Codeauszügen von den übrigen Merkwürdigkeiten bei mir im IE7 überhaupt nichts davon entdecken kann, wäre zur Gegenkontrolle ein Link zur Seite ganz hilfreich.

Ursache für die fehlenden Listenpunkte ist nach einem Probedurchgang die float:left-Deklaration für das li-Element.

mfg Maik

Der Listenpunkt ist jetzt da, auch wenn es noch nicht sehr hübsch ist. Alles andere ist hier zu sehen: Link

Um alles andere auszuschließen, habe ich eine eigene Testseite für die PNGs gebaut: Link

 

[Maik]

Das PNG wird bei mir im IE7 korrekt dargestellt:


Und was das Abschneiden des Textes in #toptitel1 betrifft, liegt es wohl an der "geringen" Höhenangabe gegenüber der Schriftgröße.

mfg Maik

 

[Maik]

Und was das Abschneiden des Textes in #toptitel1 betrifft, liegt es wohl an der "geringen" Höhenangabe gegenüber der Schriftgröße.

Moin,

da du die Höhe für besagtes Element erfolglos aufgestockt hast, hab ich eben das Stylesheet css2-ies.css nochmal genauer angeschaut, und nun den "Übeltäter" ausfindig gemacht:

body { color: black; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 130%; background: #8e8e8e url(../Bilder/randoben.gif) repeat-x fixed 0 top; }

... einfach mal diese Deklaration auskommentieren und das Resultat im IE7 begutachten.

mfg Maik

 

[Sprint]

Moin Maik,

ich hatte inzwischen angefangen, mit einer kleinen Testseite das Stylesheet auszutesten. Allerdings hatte ich von unten angefangen und lt. Murphys Law mußte es natürlich ganz oben sein.
Jetzt stimmt es wieder und auch die abgeschnittenen Linien im Menü sind erledigt. War auch die Zeilenhöhe.
Wundert mich nur, daß der 6er da keine Probleme hatte. Das ist doch normalerweise immer das Sorgenkind.
Der Rahmen um die PNGs lagen am IE Tester. Hatte gerade mal das "Vergnügen", an einer echten Dose das am IE7 zu testen und da stimmte wenigstens das.

Auf jeden Fall mal wieder herzlichen Dank für deine Hilfe.