nicht angemeldet
Probleme mit Listendarstellung im IE
0 0 0 0 0 0 0 0 0 
MudGuard
0 0
Probleme mit Listendarstellung im IE
Hallo Forum,
wie schon im Thema geschrieben habe ich ein Problem mit der Darstellung von Listen (UL) im IE. IE6 unter Windows2000.
Konkret werden die Listen bei bestimmten Grössen des Browserfensters einfach nicht dargestellt.
Dieses Phänomen kann ich nur beim IE beobachten, Firefox, Opera und Mozilla bereiten keine Probleme. Der Code ist css-validiert. Online kann ich das leider noch nicht demonstrieren, da die Listen mit Werten aus einer Datenbank generiert werden, und diese ist online noch nicht verfügbar ist. Einen Prgrammfehler kann ich aber auch deshalb ausschliessen, da sich beim Resizen der generierte Quelltext nicht ändert.
Um den Effekt zu veranschaulichen habe ich einen Beispiel-Screenshot hochgeladen (von oben nach unten: Vergrösserung des Browserfensters, bei ca. 830 Pixel Anzeigebreite erscheinen die Listen nicht):
http://www.brazil.de/_images/resize.jpg (101 KB)
Es ist nicht so, daß es immer bei ca. 830 Pixel auftritt oder nur beim Ändern der Grösse des Browserfensters, sondern je nach Grösse der dynamisch generierten Liste tritt das Problem ein oder mehrfach bei verschiedenen Grössen des Browserfensters auf, und wenn zufälligerweise das Browserfenster beim Seitenaufruf einen dieser "kritischen" Werte hat, werden die Listen gar nicht erst dargestellt, sondern erscheinen erst wenn die Fenstergrösse entsprechend geändert wird.
Gut, wer konnte dieses Problem auch schon beobachten oder weiß woran es liegen könnte?
Die Listen werden übrigens mit css formatiert, siehe unten.
Danke für eure Hilfe.
Grüsse
Frankie
P.S.:
Das Elternelement ist eine einfache Tabellenzelle td, die Listen selbst sind so formatiert:
.navStatusULbig {
color: #fff;
font-size: 1.0em;
background-color: #5F9BC8;
margin: 5px 0 5px 0;
padding: 3px;
}
.navStatusULbig li {
font-weight: bold;
white-space: nowrap;
display: inline;
list-style-type: none;
padding: 0;
}
.navStatusULbig a:link, .navStatusULbig a:visited {
color: #036;
background-color: transparent;
text-decoration: none;
}
.navStatusULbig a:hover, .navStatusULbig a:active {
color: #fff;
background-color: #2D5781;
}
Und im Quelltext sieht es so aus:
<ul class="navStatusULbig">
<li> A </li>
<li><a href="9,9030,0.htm?cur_letter=B&sort=XEntry&order=ASC"> B </a></li>
<li><a href="9,9030,0.htm?cur_letter=C&sort=XEntry&order=ASC"> C </a></li>
<li><a href="9,9030,0.htm?cur_letter=D&sort=XEntry&order=ASC"> D </a></li>
<li><a href="9,9030,0.htm?cur_letter=E&sort=XEntry&order=ASC"> E </a></li>
...
-
Hi,
Um den Effekt zu veranschaulichen habe ich einen Beispiel-Screenshot hochgeladen
wesentlich hilfreicher wäre in diesem Fall eine Beispielseite.
freundliche Grüße
Ingo-
Hallo Ingo,
Um den Effekt zu veranschaulichen habe ich einen Beispiel-Screenshot hochgeladen
wesentlich hilfreicher wäre in diesem Fall eine Beispielseite.Da hast Du vollkommen recht!
Ich hatte zwar schon geschrieben, daß ich die Seite, weil dynamisch generiert, nicht so einfach hochladen kann, aber an die Möglichkeit, daß ich ja auch einen statischen Code online stellen könnte, habe ich ehrlich gesagt nicht gedacht ;-(
Gut, jetzt habe ich mal eine Testseite hochgeladen. Allerdings sind die meisten Grafiken nicht verknüpft und werden daher nicht dargestellt, das hat aber nichts mit meinem Problem zu tun.
Zumindest bei mir kann ich das im OP beschriebene Verhalten des IE weiterhin feststellen und auch reproduzieren.http://www.brazil.de/_test/_testcode.php
Hinweis: die Links auf dieser Testseite existieren _nicht_ und werden alle auf eine Fehlerseite mit Umleitung zu meiner alten Homepage weitergeleitet. Also bitte nicht erschrecken deshalb.
Grüsse
Frankie-
Hi,
sorry, aber diese als text/plain ausgelieferte Seite wird mir im Firefox, den ich zur Analyse schon nutzen wollte, nur im Quelltext angezeigt.
freundliche Grüße
Ingo-
Hallo Ingo,
http://www.brazil.de/_test/_testcode.php
sorry, aber diese als text/plain ausgelieferte Seite wird mir im Firefox, den ich zur Analyse schon nutzen wollte, nur im Quelltext angezeigt.Sorry, das habe ich nicht bedacht. Habe nach dem Upload nur kurz im Problembrowser nachgesehen, ob sich mein Problem nachvollziehen lässt.
Also hier die Seite nochmals mit mit *.html.
http://www.brazil.de/_test/_testcode.html
Grüsse
Frankie-
Hi,
oops, das ist ja ein reines Tabellen- und Klassen-Chaos. Wie blickst Du da nur noch durch?
Das Einzige, was mir dazu ohne wirklich längere Analyse einfällt ist, den unteren Bereich aus der Haupttabelle rauszunehmen.freundliche Grüße
Ingo-
Hallo Ingo,
erstmal danke für deine Antwort.
http://www.brazil.de/_test/_testcode.html
oops, das ist ja ein reines Tabellen- und Klassen-Chaos. Wie blickst Du da nur noch durch?Warum Tabellen- und Klassen-Chaos? Es gibt lediglich 1 übergeordnete (für Puristen überflüssige) Tabelle, der Rest sollte aber schon einigermaßen "symantisch sinnvoll" augezeichnet sein. Grund für diese Tabelle ist alleinig der, daß ich es absolut nicht mag, wenn gefloatete Bereiche plötzlich "verschwinden" (natürlich nicht wirklich, aber ich denke Du weißt von was ich spreche ...).
Und natürlich ist der Code nicht sauber eingerückt (usw...), das rührt aber daher, daß dieser dynamisch generiert wird. Fakt ist auf jeden Fall, daß mein Problem unabhängig vom Quellcode (habe es natürlich auch schon mit reduziertem Quellcode getestet!) auftritt.
Das Einzige, was mir dazu ohne wirklich längere Analyse einfällt ist, den unteren Bereich aus der Haupttabelle rauszunehmen.
Warum? Konntest Du mein Problem nachvollziehen? Tritt es dann bei dir (im IE) nicht mehr auf wenn Du den unteren Bereich (ab Zeile?) rausnimmst?
Grüsse
Frankie-
Hi,
Warum Tabellen- und Klassen-Chaos? Es gibt lediglich 1 übergeordnete (für Puristen überflüssige) Tabelle, der Rest sollte aber schon einigermaßen "symantisch sinnvoll" augezeichnet sein.
Der Rest befindet sich in zig Tabellenzellen mit fast genausoviel Klassen...;-)
Das Einzige, was mir dazu ohne wirklich längere Analyse einfällt ist, den unteren Bereich aus der Haupttabelle rauszunehmen.
Warum? Konntest Du mein Problem nachvollziehen? Tritt es dann bei dir (im IE) nicht mehr auf wenn Du den unteren Bereich (ab Zeile?) rausnimmst?
Soweit war ich nicht. Das Problem ist, daß der Effekt im Firefox ja nicht auftritt und ich im IE nicht soviele Möglichkeiten habe, dran rumzuspielen.
Im IE überlagert doch der untere Bereich die Liste. Daher meine Idee, eben diesen einfach aus der Tabelle zu nehmen und einzeln darunter zu setzen.
freundliche Grüße
Ingo-
Hallo Ingo,
erstmal danke, daß Du dich mit meinem Problemchen beschäftigt hast. Was ich jetzt aber noch gar nicht gefragt habe, ob denn der Effekt bei dir im IE auch zu beobachten ist, oder nur bei mir?
Warum Tabellen- und Klassen-Chaos? Es gibt lediglich 1 übergeordnete (für Puristen überflüssige) Tabelle, der Rest sollte aber schon einigermaßen "symantisch sinnvoll" augezeichnet sein.
Der Rest befindet sich in zig Tabellenzellen mit fast genausoviel Klassen...;-)Wie schon gesagt, daß der Code soviele überflüssige Leerzeilen enthält und unsauber eingerückt ist, liegt daran, daß er dynamisch erzeugt wird. Ich habe den Code bewußt nicht schön formatiert, sondern so gelassen wie er generiert wird, hätte ja sein können, daß der Darstellungsfehler damit zu tun hat.
Du hattes doch gefragt, wie ich mich in dem "Chaos" zurechtfinde. Naja, im php-File ist es ja wesentlich übersichtlicher, die Listen werden so erzeugt:
<div class="navOben">
<ul class="navObenUL">
<?php
foreach ($top_menu as $top_menu_item) {
echo "<li>".$top_menu_item['menu_item']."</li>\n";
}
?>
</ul>
</div>Und da behalte ich auch bei den 5-6 Listen die im Dokument vorkommen durchaus noch den Überblick, auch wenn außenrum noch eine Layouttabelle liegt ;-)
Das Einzige, was mir dazu ohne wirklich längere Analyse einfällt ist, den unteren Bereich aus der Haupttabelle rauszunehmen.
Habe auch schon alles außer dem Problembereich rausgenommen, leider keine Änderung.
Das "blöde" ist ja, daß ich keine Idee habe wo ich ansetzen soll. Und es tritt nur auf Seiten mit dieser Untenavigation (A-Z) auf, und auch nur, wenn ausreichend viele Listenelemente in den Navigationslisten vorhanden sind, so daß es zu einem Zeilenwechsel (innerhalb der Navigationsliste) kommt.
Naja, werde jetzt einfach mal Klasse für Klasse durchgehen und hoffen, daß ich was finde, und vor allem, daß ich, sofern ich den Auslöser finde, die Ursache auch nachvollziehen kann.
Grüsse
Frankie-
Hi,
Du hattes doch gefragt, wie ich mich in dem "Chaos" zurechtfinde. Naja, im php-File ist es ja wesentlich übersichtlicher, die Listen werden so erzeugt:
<div class="navOben">
<ul class="navObenUL">
</ul>
</div>Welchen zusätzlichen Nutzen bringt hier das div?
Was machst Du mit dem div, das Du nicht auch direkt mit der ul machen könntest?.navOben {
margin: 0px 0px 0px 0px;
padding: 0px;
/* border-top: 1px solid #fff;*/
border-top: 1px solid #ccccff;
border-bottom: 1px solid #ccccff;
}Aha, border-top und border-bottom werden gesetzt.
Das ginge aber durchaus auch direkt bei ul.==> ein vollkommen überflüssiges div.
Und so gäbe es einiges, was wegfallen könnte.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard,
<div class="navOben">
<ul class="navObenUL">
</ul>
</div>Welchen zusätzlichen Nutzen bringt hier das div?
Was machst Du mit dem div, das Du nicht auch direkt mit der ul machen könntest?
[...]
==> ein vollkommen überflüssiges div.Auf den ersten Blick scheint es überflüssig zu sein, brauche das div aber wegen einem Alphatransparenzfilter-"Hack" für den IE. Den Effekt kann man aber auf dieser Testseite nicht sehen.
Und so gäbe es einiges, was wegfallen könnte.
Mag sein, die Seite ist ja auch erst im Entwicklungsstadium.
Grüsse
Frankie
-
-
-
Hallo Ingo,
Also ich habe das Problem eingrenzen können, es liegt definitiv an den Listen selbst.
Auf's Wesentliche reduzierte Version:
http://www.brazil.de/_test/_testcode2.html
Wäre nett, wenn Du als CSS-Pabst[tm] nochmals einen Blick darauf werfen könntest, vielleicht entdeckst Du ja den Übeltäter.
Grüsse
Frankie-
Hi,
Auf's Wesentliche reduzierte Version:
sehr schön. Noch mehr würde die Fehlersuche erleichtert, wenn Du auf die Klassen weitgehend verzichten würdest...
Wäre nett, wenn Du als CSS-Pabst[tm] nochmals einen Blick darauf werfen könntest, vielleicht entdeckst Du ja den Übeltäter.
Entdeckt zwar nicht, aber es ist einer der üblichen Bugs des IE, den man schwer eingrenzen kann, aber gegen den eines der Standardmittel hilft:
* html * {height:1em;}
ggfls. den Selektor noch etwas eingrenzen, wenn das mit anderen Definitionen der restlichen Seitre kollidiert.freundliche Grüße
Ingo-
Hallo Ingo,
danke Ingo, you made my day!
Mit
* html * {height:1em;}
scheint das Problem nicht mehr aufzutreten. Werde es gleich mal im Orginaldokument einsetzen und austesten, ob es mit anderen Formatierungen kollidiert.
Habe auch ein bisschen nach "* html * {height:1em;}" gegoogelt, aber sooo verbreitet scheint das Problem ja nicht zu sein, zumindest habe ich nichts spezielles dazu gefunden, wie z.B. zum Box-Model-Bug. kennst Du vielleicht eine Seite, der sich genau mit dieser Problematik näher befasst? Ich bin zwar schon sehr glücklich darüber, daß es mein Problem damit behoben werden kann, aber doch noch nicht so richtig zufrieden, da ich nicht weiß warum der IE genau da rumzickt (außer dem Totschlag-Argument "selbst schuld, wenn man IE benutzt ..."). Ich verwende solche Listen schliesslich nicht zum ersten Mal, und hatte bis jetzt keinerlei Probleme damit, zumindest nicht in dieser Art.
http://www.brazil.de/_test/_testcode2.html
sehr schön. Noch mehr würde die Fehlersuche erleichtert, wenn Du auf die Klassen weitgehend verzichten würdest...Warum sollte ich auf die Klassen verzichten? Oder andersrum gefragt: Wie bekomme ich es ohne Verwendung von Klassen gebacken z.B. 6 verschiedene Listen in einem Dokument individuell zu formatieren?
Entdeckt zwar nicht, aber es ist einer der üblichen Bugs des IE, den man schwer eingrenzen kann, aber gegen den eines der Standardmittel hilft:
* html * {height:1em;}
ggfls. den Selektor noch etwas eingrenzen, wenn das mit anderen Definitionen der restlichen Seitre kollidiert.Ok, werde mich noch ein bisschen damit beschäftigen, und, falls ich es näher eingrenzen kann, das Ergebnis meiner Bemühungen auf jeden Fall hier mitteilen.
Grüsse
Frankie-
Hi,
Habe auch ein bisschen nach "* html * {height:1em;}" gegoogelt, aber sooo verbreitet scheint das Problem ja nicht zu sein, zumindest habe ich nichts spezielles dazu gefunden, wie z.B. zum Box-Model-Bug. kennst Du vielleicht eine Seite, der sich genau mit dieser Problematik näher befasst?
Nö. Aber splitte Deine Suche: "* html" ist ein CSS-Hack, um nur die IEs anzusprechen und "height:1" sollte Dich zu Seiten führen, die sich mit IE-Bugs beschäftigen, gegen die dieser Workaround hilft.
Warum sollte ich auf die Klassen verzichten? Oder andersrum gefragt: Wie bekomme ich es ohne Verwendung von Klassen gebacken z.B. 6 verschiedene Listen in einem Dokument individuell zu formatieren?
Zumindest eine Klasse ist unnötig. In diesem Beispiel wäre das .navStatusUL - stattdessen kannst Du diese Definitionen für UL machen - ggfls. für Elternelement ul. Und bei .navStatusULbig würden dann übrigens bereits die zwei kleinen Änderungen ausreichen.
Oder bei <h1 class="first"> erscheint mir die Klasse nun wirklich überflüssig. H1 sollte nicht nur "first" sondern auch einmalig vorkommen.
freundliche Grüße
Ingo-
Hallo Ingo,
Nö. Aber splitte Deine Suche: "* html" ist ein CSS-Hack, um nur die IEs anzusprechen und "height:1" sollte Dich zu Seiten führen, die sich mit IE-Bugs beschäftigen, gegen die dieser Workaround hilft.
Also natürlich habe ich nicht nur nach dem "exakten" Suchstring gesucht, ein bisschen Transferdenken kannst Du schon von mir erwarten ;-)
Zumindest eine Klasse ist unnötig. In diesem Beispiel wäre das .navStatusUL - stattdessen kannst Du diese Definitionen für UL machen - ggfls. für Elternelement ul. Und bei .navStatusULbig würden dann übrigens bereits die zwei kleinen Änderungen ausreichen.
Selbstverständlich werde ich in diesem Fall die beiden Klassen zusammenfassen. Gleiches gilt auch für viele andere Klassen.
Aber die Seite ist ja noch in der Entwicklung und ich bin gerade dabei viele unabhängig voneinander geschriebene Seiten aus meiner Feder zusammenzufassen. Die Seiten stammen meist aus unterschiedlichen Evolutionszyklen meiner Fähigkeiten was html, css, php usw. angeht, und das muß ich erst mal unter einen Hut bekommen (ohne Alles neu zu schreiben). Dies ist keine Entschuldigung, sondern eine Erklärung warum ich oft doppelt gemoppelt habe.
Oder bei <h1 class="first"> erscheint mir die Klasse nun wirklich überflüssig. H1 sollte nicht nur "first" sondern auch einmalig vorkommen.
Ja, aber das <h1 class="first"> soll auch nur eine, sich vom standard-<h1> unterscheidende Überschrift 1. Ordnung sein. Wie würdest Du so etwas lösen? Ich meine, eine Überschrift 1. Ordnung abhängig vom Inhalt unterschiedlich zu formatieren? Vielleicht blicke ich es aber einfach nur nicht. Ich habe mir das so gedacht:
basic.css
h1 { color:normal; }
seiteX.css
h1.first { color:anders; }
Natürlich könnte ich das auch so lösen, daß die Werte überschreibe (eigenes Stylesheet pro Seite möchte ich vermeiden), aber wie schon geschrieben sind manche Formatierungen historisch bedingt suboptimal.
Grüsse
Frankie-
Hi,
Oder bei <h1 class="first"> erscheint mir die Klasse nun wirklich überflüssig. H1 sollte nicht nur "first" sondern auch einmalig vorkommen.
Ja, aber das <h1 class="first"> soll auch nur eine, sich vom standard-<h1> unterscheidende Überschrift 1. Ordnung sein. Wie würdest Du so etwas lösen? Ich meine, eine Überschrift 1. Ordnung abhängig vom Inhalt unterschiedlich zu formatieren?
Schau' Dich auf meinen Seiten um: Ich habe verschiedene Themenbereiche und für jeden lediglich dem body eine unterschiedliche ID zugewiesen.
freundliche Grüße
Ingo-
Hallo Ingo,
Schau' Dich auf meinen Seiten um: Ich habe verschiedene Themenbereiche und für jeden lediglich dem body eine unterschiedliche ID zugewiesen.
Deine Seiten sind mir seit langem bekannt, habe mich schon oft darauf rumgetrieben ;-)
<body id="web" onload="init('webdesign')">
<p class="Layout"><script type="text/javascript">Layout();</script></p>
<h1 id="webtitel"><span>barrierefreies</span> Webdesign</h1>^^^^^^^^^^^^
Kannst Du mir bitte kurz erklären, was hier anders ist als sein soll als bei meiner Variante mit class='first'? Ausser der Verwendung von id anstatt class natürlich.
Grüsse
Frankie-
Hi,
<h1 id="webtitel"><span>barrierefreies</span> Webdesign</h1>
^^^^^^^^^^^^Kannst Du mir bitte kurz erklären, was hier anders ist als sein soll als bei meiner Variante mit class='first'? Ausser der Verwendung von id anstatt class natürlich.
hehe. Ja: 1. übriggebliebenes Relikt ;-)
2.: <a href="#webtitel" title="nach oben">freundliche Grüße
Ingo-
Hallo Ingo,
<h1 id="webtitel"><span>barrierefreies</span> Webdesign</h1>
^^^^^^^^^^^^
Kannst Du mir bitte kurz erklären, was hier anders ist als sein soll als bei meiner Variante mit class='first'? Ausser der Verwendung von id anstatt class natürlich.hehe. Ja: 1. übriggebliebenes Relikt ;-)
2.: <a href="#webtitel" title="nach oben">Da bin ich ja froh, daß nicht nur ich Probleme mit der Migration alter "Sünden" habe, aber eigentlich solltest Du dann auch ein gewisses Verständnis für meine Fehler aufbringen, deren Beseitigung ich mir, wie Du siehst, zwar spät, aber dennoch, zur Aufgabe gemacht habe ;-)
Grüsse
Frankie-
Hi,
Da bin ich ja froh, daß nicht nur ich Probleme mit der Migration alter "Sünden" habe, aber eigentlich solltest Du dann auch ein gewisses Verständnis für meine Fehler aufbringen, deren Beseitigung ich mir, wie Du siehst, zwar spät, aber dennoch, zur Aufgabe gemacht habe ;-)
hab' ich ja. Allerdings gerade in Entwicklung befindliche Seiten würde ich als erstes versuchen, soweit wie möglich zu vereinfachen.
Und immer wenn ich mal Zeit und Lust habe, entschlacke ich auch meine Seiten. Kürzlich z.B. dateiübergreifend span.quelltext durch code und p.quelltext durch code.box ersetzt. ;-)freundliche Grüße
Ingo-
Hallo Ingo,
hab' ich ja. Allerdings gerade in Entwicklung befindliche Seiten würde ich als erstes versuchen, soweit wie möglich zu vereinfachen.
Das ist ja aber (zumindest bei mir) gerade das Problem. Ich will ja auch entscheidend vereinfachen, aber aus "historischen" Gründen sind viele Klassen mit ähnlichen Eigenschaften in unterschiedlichen Projekten gleich benamst (war ein Fehler, weiß ich, ist aber leider nicht mehr rückgängig zu machen ...). Daher mache ich es derzeit so, daß ich bei zu integrierenden Seiten die Klassen (die unter gleichem Namen durchaus schon existieren könnten) so umbenenne, daß es keinen Namenskonflikt mit bestehenden Klassen gibt. Danach suche ich nach Gemeinsamkeiten und fasse Klassen zusammen bzw. eliminiere manche Klassen komplett. Und erst dann benamse ich die "neue" Klasse um und ersetze die betroffenen Klassen durch die neue "Universalklasse", Projekt- bzw. Dateiübergreifend, versteht sich. Ich bin halt gerade mittendrin, daher erscheint mein Code auch noch als unnütz aufgebläht.
Und immer wenn ich mal Zeit und Lust habe, entschlacke ich auch meine Seiten. Kürzlich z.B. dateiübergreifend span.quelltext durch code und p.quelltext durch code.box ersetzt. ;-)
ich sehe, wir verstehen uns ;-)
Grüsse
Frankie
-
-
-
-
-
-
-
-
-
Hallo Ingo,
habe
* html * {height:1em;}
jetzt in meiner "richtigen" Datei ausprobiert, und es ergab sich ein erschreckendes Ergebnis,
ggfls. den Selektor noch etwas eingrenzen, wenn das mit anderen Definitionen der restlichen Seitre kollidiert.
weil es erwartungsgemäss mit vielen anderen Formatierungen kollidiert.
Durch Eingrenzung auf den entscheidenden Selektor kam ich dann zum Ergebnis, daß es ausreicht, der Listen-Klasse eine feste Höhe zuzuweisen, in meinem speziellen Fall habe ich als Höhe den Wert der Schriftgrösse gewählt.
.navStatusULbig * {height:1.0em;}
.navStatusUL * {height:0.9em;}Getestet auch mit Firefox, Mozilla und Opera. Schaut ordentlich aus.
Warum ich bis jetzt bei ähnlich formatierten Listen das Problem noch nie feststellen konnte, weiß ich allerdings nicht ;-(
Grüsse
Frankie
-
-
-
-
-
-
-
-
-