Problem mit IE6 - Zahlen im SPAN verschieben sich?

[hinkel11]

Hallo,

ich hab mal wieder ein Problem mit dem IE6. Im Firefox und IE8 sah von Anfang an alles so aus wie es soll. Für den IE7 musste ich ein separates Stylesheet anlegen. Haut soweit auch hin. Doch für den IE6 bekomme ich es einfach nicht hin.

Hier die Seite:
SC Corona Gehren 09

Nun zum Problem:
In der mittigen Slideshow springen rechts in der Slide-Navigation die Zahlen (Ergebnisse) hin und her, je nachdem welcher Slide aktiv ist. Das Problem kann man sehen, wenn man mit der Maus über die Ergebnisse fährt und der Slide wechselt.

Hier die betreffenden Klassen:

#navi-outer li a span.navbar-tagline { 
padding-top:10%; 
padding-left:54%; 
display:block; 
z-index:100; 
font-family:Verdana; 
font-weight:normal; 
font-size:3.0em; 
line-height:12px; color:#f2f2f2; 
} 

#navi-outer li a:hover span.navbar-tagline, #navi-outer li a.navi-active span.navbar-tagline { 
padding-top:10%; 
padding-left:54%; 
display:block; 
z-index:100; 
font-family:Verdana; 
font-weight:normal; 
font-size:3.0em; 
line-height:12px; 
color:#333; 
}

Wie man sieht unterscheiden sich beide Klassen nur bei "color: ..." und sonst nicht, deshalb wundert es mich, warum die Zahlen hin und her springen.

 

[Imbericle]

Bevor du Ausweichschienen legst solltest du erst mal das CSS komplett sauber machen.

Ergebnisse des CSS-Validators http://www.corona-gehren.de/main/ (CSS level 2.1)

Ansonsten ist das HTML eigentlich ganz ok, bis auf die Tatsache das du meiner Ansicht nach viel zu viele Divs benutzt, die unnötig wären.
Warum du zum Beispiel sowas machst ist mir nicht klar:

<div id="mainwrap">
<div id="maincontent">
<div id="rand">

Also einer der Dreien ist mit Sicherheit nach etwas umbasteln unnötig, wenn nicht zwei.



MfG

 

[hinkel11]

Nun gut, die Fehler die der Validator ausgegeben hatte, sind nun korrigiert bis auf die paar unwichtigen Mozilla proprietären Eigenschaften. Das Problem besteht aber weiterhin... welch' Überraschung;)!

Was den Aufbau des Templates anbelangt, da geb ich dir recht. Das div mit der Rand-ID ist eigentlich fehl am Platze. Wollte ich schon längst mal ändern, steh in der Sache nur etwas aufm Schlauch. Das div mit der Rand-ID ist ja für den Rahmen mit den abgerundeten Ecken zuständig. Kann man sicherlich auch ganz einfach mit ner Klasse lösen, die man der div mit der Maincontent-ID hinzufügt. Bekomme ich aber so irgendwie nicht ganz hin. Ein weiteres div neben dem mit der Rand-ID darf aber auf keinen Fall weggelassen werden.

Mein Template sollte grafisch übertragen in etwa so aussehen wie im Anhang dargestellt. Und wenn ich mir meine index.php so anschaue, tuts das auch, wenn man das div mit der Rand-ID mal aussen vorlässt.

Vielleicht noch einen Vorschlag zum eigentlichen Problem?

 

[stachelbeer]

Komischer Bug. Wenn ich mich recht entsinne gab es Probleme mit Padding im IE6. Probier mal mit Margins zu arbeiten.

Ansonsten würde ich den IE6 bei dieser Kleinigkeit außen vor lassen. Die Zeit und Energie die man damit verschwändet ist es nicht wert. Zumindestens bei so einer Kleinigkeit.

 

[Efchen]

Ansonsten ist das HTML eigentlich ganz ok, bis auf die Tatsache das du meiner Ansicht nach viel zu viele Divs benutzt, die unnötig wären.

Ach, da sind schon noch einige Patzer drin. Tabellen ohne tabellarische Daten hab ich gesehen, nicht ausgezeichneter Text, unbenutzte spans, Überschriften, die nicht als Überschriften ausgezeichnet sind, Alternativtexte für Images, die dem Nutzer nichts sagen, die nur so hingeklatscht sind, ohne sich darüber Gedanken zu machen, wozu der Alternativtext eigentlich da ist, veraltete Tags für physische Inhaltsauszeichnung usw.

Das ist die klassische falsche Vorgehensweise, das Image vom Layout bekräftigt mich in meiner Annahme, hier hat jemand versucht, "Layout mit div" zu machen, ohne begriffen zu haben, dass das genauso Nonsense ist, wie Layout mit Tabellen (oder generell mit HTML).

 

[neuroleptika]

Zur Ursprünglichen Frage:
Das Tanzen scheint am Script zu liegen.

Füge #navi-outer li mal zoom:1; hinzu.
Damit erhälst du im IE < 8 einen inline-block was hier stabiler sein dürfte.

Wenn das nicht hilft kannst du auch ein weiteres Element in li schreiben welches float und width bekommt.

Der Code sieht ziemlich geraten aus

 

[hinkel11]

Echt klasse...dass mit dem "zoom:1" hat echt geklappt. Hatte mich mit diesem Problem schon an so einige Foren gewandt, wo die Moderatoren alle ratlos waren. Wäre mir im Leben nicht gekommen der Gedanke dort ein zoom hinzuzufügen.

Tabellen ohne tabellarische Daten hab ich gesehen, nicht ausgezeichneter Text, unbenutzte spans, Überschriften, die nicht als Überschriften ausgezeichnet sind, Alternativtexte für Images, die dem Nutzer nichts sagen, die nur so hingeklatscht sind, ohne sich darüber Gedanken zu machen, wozu der Alternativtext eigentlich da ist, veraltete Tags für physische Inhaltsauszeichnung usw.

Danke für deine Kritik efchen. Könntest du oder vielleicht sonst jemand etwas genauer ausführen, vielleicht an konkreten Beispielen, wo was nicht ganz richtig erscheint, damit ich es korrigieren kann, weil gerade dass mit den Überschirften und leeren Tabellen kapier ich nicht so richtig. Wo hast du die gesehen?

 

[Efchen]

<center> ist physische Inhaltsauszeichnung und hat daher im HTML-Code nichts verloren.

<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
				</td>
</tr>
</table>

ist für mich ne leere Tabelle.

<div class="gamesheader" style="margin-top: 10px">Letztes Event</div>

ist eine Überschrift, die aber als "Gruppe" (<div>), nicht als Überschrift ausgezeichnet ist.

Zu mehr hab ich keine Lust, weil der gesamte Code zu übersichtlich ist, hauptsächlich aufgrund der viel zu vielen überflüssigen divs. Mach Dich schlau, was man unter "Semantik" versteht (am besten hier im Forum, dazu hab ich schon viele Romane geschrieben). Das ist nämlich der eigentliche Sinn von HTML. Den bringst Du IMHO in Deinem Code nicht rüber.