✔ IE 6 und 7 brechen Liste um

[Sprint]

Hallo,

der IE 7 macht wieder mal Probleme. Das Menü einer bestehenden Seite soll erweitert werden. Während alle Browser den zusätzlichen Menüpunkt klaglos aufnehmen, geht dem IE 7 der Platz aus, obwohl definitiv genügend da wäre, wie auf dem Screenshot zu sehen.

<div id="mainnavi">
	<ul>
		<li class="navtrenner">
		<a href="news.php" onfocus="if(this.blur)this.blur();"><i></i><b>News</b></a></li>
		<li><a href="angebote.php" onfocus="if(this.blur)this.blur();"><i></i><b>Aktion</b></a></li>
		<li><a href="http://www.toyota.de/cars/new_cars/index.asp" onfocus="if(this.blur)this.blur();" target="_blank"><i></i><b>Neuwagen</b></a></li>
		<li><a href="http://home.mobile.de/Autohaus-Ederer" onfocus="if(this.blur)this.blur();" target="_blank"><i></i><b>Gebrauchtwagen</b></a></li>
		<li><a href="http://www.toyota.de/finance/index.asp" onfocus="if(this.blur)this.blur();" target="_blank"><i></i><b>Finanzierung</b></a></li>
		<li><a href="service.html" onfocus="if(this.blur)this.blur();"><i></i><b>Service</b></a></li>
		<li><a href="unternehmen.html" onfocus="if(this.blur)this.blur();"><i></i><b>Unternehmensinfos</b></a></li>
	</ul>
</div>

	#mainnavi { width: auto; margin: 0; padding: 0; background-color: #ffffff; position: relative; z-index: 98; height: 42px; float: right; }
	#mainnavi ul { list-style:none; float: right; clear: right; margin: 0; padding: 0; }
	#mainnavi li { float: left; }
	#mainnavi a { text-decoration: none; cursor: pointer; font-size: 13px; line-height: 14px; color: #999; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
	#mainnavi a:hover,#mainnavi a.on { color: #e50000 }
	#mainnavi i, #mainnavi b { display: block; float: left; padding: 7px 6px 10px 6px; }
	#mainnavi b { background: url(../img/nav_sep.gif) top left no-repeat; font-weight: normal; }
	#mainnavi i { padding-right: 0; padding-left: 0; width: 6px; background-position: -1px 0; }
	#mainnavi b { background-position: top right; padding-left: 0; }
	#mainnavi .navtrenner i { background: url(../img/nav_sep.gif) top left no-repeat; }

Aufgrund sehr strenger Designvorgaben kann ich da auch nichts an der Schriftgröße oder so ändern. Vielleicht ließe es sich mit einer pixelgenauen Breite irgendwie hinbiegen, aber ich würde es gerne bei der automatischen Breite lassen. Kann man das den alten IEs irgendwie beibringen?

 

[Maik]

Moin,

Aufgrund sehr strenger Designvorgaben kann ich da auch nichts an der Schriftgröße oder so ändern.

Wie lauten denn die globalen Schriftformatierungen für das Dokument im einzelnen?

Ich frag danach, weil mit deinem gezeigten CSS im IE6 und IE7 überhaupt nichts in der Liste umbricht.

mfg Maik

 

[Sprint]

Hm, sehr merkwürdig. Irgendwie habe ich den Verdacht, daß das an der IECollection liegt.
Die originale Testseite dazu ist hier. Wenn das bei dir richtig angezeigt wird, ist der Fall klar. Hättest du dann eine andere Lösung, wie man mehrere IE Versionen auf einem Rechner bzw. virtuellem Rechner testen kann?

 

[Maik]

Nö, am "IETester" liegt es definitiv nicht, denn bei mir tritt das Problem in der genannten Seite ebenfalls auf.

Ich hab mir auf meinem System (WinXP / IE6) zwei virtuelle Maschinen eingerichtet, und dort jeweils eine "offizielle" IE-Version (IE7 u. IE8) installiert, nachdem ich es leid war, mich mit den funktionell beschnittenen IE-Standalone-Versionen herumzuplagen. Für gelegentliche Testläufe in den ollen 5er-Versionen reichen mir diese allemal.

So streng die Designvorgaben hier auch sein mögen, ein Pixel weniger für die Schriftgröße der Links in #mainnavi dürfte niemanden einen Zacken aus der Krone brechen. Notfalls bekommen halt die beiden IE-Versionen diese Schriftgröße mittels eines Conditional Comments alleine zugeteilt.

Ansonsten hättest du hier auch die Möglichkeit, den deklarierten horizontalen Innenabstand für <i> und <b> zu verringern.

Im IE6 macht sich zudem sein 3px-Gap-Bug bemerkbar, der ebenso zum Umbruch des hinzugefügten Menüpunktes führt.

Lösung:

styles.ie.css

#mainnavi li {
    margin-right:-3px; /* fixt 3px-Gap-Bug im IE6 */
}

mfg Maik

 

[Sprint]

Die haben da gewaltige Zacken in ihren Kronen. Da sind sämtliche Schriftgrößen, Farben, Abstände usw. genau festgelegt. Das Problem ist, daß der Händler, wenn die Seite nicht dem Styleguide entspricht, mit seiner Seite nicht ins offizielle Verzeichnis eingetragen wird. Ich habe aber festgestellt, daß die Innenabstände scheinbar nicht vorgeschrieben sind. Also werde ich da mal etwas dran fummeln.

Der Verdacht auf die IECollection kam nicht von ungefähr, da ein paar scheinbare Fehler auftreten, die in einzelstehenden IEs nicht vorkommen. Ist also nicht 100% gleich.

Danke für die Tips und ein schönes Wochenende,
Sprint

 

[Maik]

Die haben da gewaltige Zacken in ihren Kronen. Da sind sämtliche Schriftgrößen, Farben, Abstände usw. genau festgelegt. Das Problem ist, daß der Händler, wenn die Seite nicht dem Styleguide entspricht, mit seiner Seite nicht ins offizielle Verzeichnis eingetragen wird. Ich habe aber festgestellt, daß die Innenabstände scheinbar nicht vorgeschrieben sind. Also werde ich da mal etwas dran fummeln.

Die dritte Möglichkeit wäre hier eine Absenkung der festgelegten Breite für das <i>-Element um einen Pixel, sofern der "Styleguide" dies zulässt

mfg Maik

 

[Sprint]

Die dritte Möglichkeit wäre hier eine Absenkung der festgelegten Breite für das <i>-Element um einen Pixel, sofern der "Styleguide" dies zulässt

mfg Maik

Ich habe das <i> Element inzwischen um 1 Pixel schmäler gemacht und für den IE 7 reicht es jetzt. Der 6 bricht zwar immer noch um, aber den ignoriere ich inzwischen. Jetzt ist der Inhaber dran zu sagen, was er will.

 

[Maik]

Ich habe das <i> Element inzwischen um 1 Pixel schmäler gemacht und für den IE 7 reicht es jetzt. Der 6 bricht zwar immer noch um, aber den ignoriere ich inzwischen. Jetzt ist der Inhaber dran zu sagen, was er will.

Im CSS der Seite (http://www.4dpi.de/toyota/css/styles.css) sehe ich darin keine Veränderung:

	#mainnavi i {
    padding-right: 0;
    padding-left: 0;
    width: 6px;
    background-position: -1px 0;
}

Wenn ich hier width:5px angebe, bricht bei mir der IE6 den Menüpunkt nicht um.

mfg Maik

 

[Sprint]

Ich habe für den IE 7 eine eigene CSS Anweisung navi_ie.css geschrieben, um alle anderen Browser nicht zu beeinflussen.

<!--[if lte IE 7]>
	<link href="css/navi_ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Bei meinem 6er wird immer noch umgebrochen. Vielleicht wegen der Unterschiede in der IECollection?

 

[Maik]

Entferne mal im HTML-Code das jeweils enthaltende Leerzeichen zwischen <i> und </i>.

Oder wandel es in ein geschütztes Leerzeichen um:

<i>&nbsp;</i>

und ergänze im CSS die Regel so:

#mainnavi i {
    padding-right: 0;
    padding-left: 0;
    width: 5px;
    background-position: -1px 0;
    font-size: 0;
}

mfg Maik