Liste entwickelt Eigenleben in ihrem Layout

sriver

Liebe Leute,
in einer Liste, welche in einfacher Weise Dinge untereinander angeordnet und zentriert zeigen soll, passiert auch genau dieses - aber zwei der Listenelemente fallen aus der Rolle und entwickeln ein Eigenleben. Ich kann nicht heraus finden warum das so ist - gleicher Code, gleiche CSS, eigentlich alles gleich.... sehr mysteriös.....sicher gibt es eine simple Erklärung, aber ich sehe wohl den Wald vor lauter Bäumen nicht. Kann jemand helfen? Danke!

Die Liste popt auf, wenn man unter

http://www.learn-spanish-thoroughly.de/

über "Deutsches Fernsehen" hovert. Es ist sofort ersichtlich, dass die Liste falsch ist, sozusagen 'verzogen', aber Warum???? Und warum nur teilweise?????

Der Code lautet so:

Code

<div id="thirdleft"> <br />
      Deutsches Fernsehen<br />
      <br />
      Watch<br />
      German Television<br />
      here! 
      <div id="popup"> <br />
        Courtesy of ARD and ZDF - many thanks! <br />
        <br />
        <li class="list"><a href="http://www.tagesschau.de/multimedia/livestreams/index.html" target="blank">ARD 
          Tagesschau</a></li>
        <br />
        <li class="list"><a href="http://www.ardmediathek.de" target="blank">ARD 
          Mediathek</a></li>
        <br />
        <li class="list"><a href="http://www.zdf.de" target="blank">ZDF Homepage</a></li>
        <br />
        <li class="list"><a href="http://www.heute.de/ZDFheute" target="blank">ZDF 
          Heute Nachrichten</a></li>
        <br />

      </div>
    </div>


Die CSS ist so:


#popup {
	position: relative;
	width: 430px;
	padding: 15px;
}


.list {
	height: 25px;
	list-style-image: none;
	list-style-type: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
	background-color: #CCCCCC;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
}

Alles anzeigen

Bin für jeden Hinweis sehr dankbar!

TanjaP.

Eine Liste wird z.B. mit <ul> begonnen und mit </ul> beendet. Dazwischen dürfen nur <li> stehen. Selfhtml und W3C

alxy

Zitat von TanjaP.

Eine Liste wird z.B. mit <ul> begonnen und mit </ul> beendet. Dazwischen dürfen nur <li> stehen. Selfhtml und W3C

Nicht ganz richtig. es können zB noch weitere ul's eingebaut werden. In den li's selbst sind wiederum noch weitere Tags möglich

alxy

Bandit

Und manchmal muss man einfach nur mal einen Validator über den HTML-Code laufen lassen, um die Fehler zu entdecken: http://validator.w3.org/check?verbose=…horoughly.de%2F

sejuma

gelöscht

sriver

Liebe Leute,

erst einmal herzlichen Dank an Tanja P., an alxy und an den Banditen für die Ratschläge!

Das Problem ist noch immer ungelöst. Wie von Euch aufgezeigt und vom Validator bestätigt ist mein Code nicht einwandfrei (ein li-tag soll in einem div nicht erlaubt sein), allerdings ändert eine Reparatur nichts, aber auch gar nichts. Will sagen, ich kann den Code ändern und die li's in eine ol oder ul einfassen oder auch den div durch einen anderen Tag ersetzen - hilft nichts. Immer noch ist die Liste nicht richtig dargestellt.

Außerdem ist komisch: Den von mir gemachten Fehler (wenn es denn einer ist (?) ) habe ich laut Validator noch an vielen anderen Stellen gemacht - es wird mehr als dreißigmal der gleiche Fehler moniert! Aber: alle diese Listen werden in jedem Browser korrekt dargestellt, alles funzt ganz wunderbar..... nur diese eine Fernsehliste eben ncht.

Ferner: Der Fehler tritt auf in IE und Opera (zwei Listenelemente korrekt, zwei falsch). In Google und Safari tritt der Fehler nicht auf (alle Elemente korrekt dargestellt) In Firefox tritt der Fehler abgemildert auf (drei Listenelemente falsch, eines korrekt). Das ist doch mehr als kurios, oder?

Zusätzlich noch kurioser: Im unteren Bereich der Seite sind vier (identische!!!) divs. Sie enthalten nichts außer einem einzigen Wort. Der Text steht in einem der vier divs nicht (wie sonst) in der Mitte. Kann mir einer sagen warum? Die divs sind in jeder Hinsicht identisch (abgesehen vom Text). Dieser Fehler tritt nur in den Browsern auf, welche auch die o.a. Fernseh-Liste vermasseln.

Ich bin komplett ratlos. Die einzige Spur, die ich habe -obwohl ich mir keinen Reim darauf machen kann - ist dass evtl irgendein Zusammenhang mit der DW-Box besteht. Denn wenn ich diese deaktiviere, verschwinden die genannten Probleme. Versteh ich allerdings nicht. Was hat die DW-box mit dem Rest zu tun?

Das ist das mysteriöseste Problem, das mir je untergekommen ist. Hoffe ich hab mich verständlich ausgedrückt. Für hilfreiche Ideen und Hinweise bin ich ganz wahnsinnig,außerordentlich, tierisch und ganz gewaltig richtig dankbar!

TanjaP.

Das würde schon einiges ändern, wenn die Liste korrekt sein würde:

Code

<div id="grammar_popup">            <li class="list"><a href="[URL='http://www.forum-hilfe.de/view-source:http://www.learn-spanish-thoroughly.de/grammar/definite_and_indefinite_article_001_en.php']grammar/definite_and_indefinite_article_001_en.php[/URL]">The              definite and the indefinite article</a></li>           <br />           <li class="list">...

hier fehlt z.B. immer noch <ul>, die <br> dazwischen haben da nichts zu suchen, den Abstand der li untereinander werden per css geregelt.

Code

<div id="grammar_popup">  <ul>          
<li class="list">...</li> <li class="list">...</li>
<li class="list">...</li>
</ul>

Das es teilweise wie gewünscht dargestellt wird, liegt daran das manche Browser "netter" sind als andere. Solange die gravierenden Fehler nicht beseitigt sind (li in ul) bleibt es ein Glücksspiel.

Die vier divs am Ende sind nicht gleich - die einen enthalten Text, der aber weder z.B. als Überschrift, Absatz oder sonstiges ausgezeichnet ist, die anderen enthalten Inline-Elemente:

Code

<div>text</div>
<div><a>text</a></div>

Du siehst, das etwas fehlt?
Zum nachlesen

djheke

So sollte es klappen.

HTML

<!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8" />
<title>navi</title>
<style>


* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


ul {
 width:200px;
 margin:10px;
 padding:20px 0;
 background:#ffa;
 border:1px solid #a33;
}


ul li span {
 display:block;
 padding-top:3px;
 text-align:center;
}


ul li span.df {
 padding-bottom:20px;
}


ul li {
 position:relative;
}


li ul {
 position:absolute;
 left:-99999px;
 top:-20px;
 width:400px;
 padding:10px;
 margin:0;
 background:#fff;
 border:3px solid #a33;
}


li ul li {
 border:1px solid #000;
 background:#eee;
 margin:20px;
 padding:0px;
}


li ul li.caption {
 border:none;
 background:transparent;
}


li a {
 display:block;
 padding:5px;
 background:#eee;
 color:#000;
 font-weight:bold;
}


li:hover ul {
 left:200px;
}


li a:hover {
 background:#ffa;
}


li ul a {
 text-align:center;
}


</style>
</head>
<body>
  <ul> 
    <li><span class="df">Deutsches Fernsehen</span> <span>Watch</span> <span>German Television</span> <span>here! </span>
     <ul>
        <li class="caption">Courtesy of ARD and ZDF - many thanks!</li> 
        <li><a href="http://www.tagesschau.de/multimedia/livestreams/index.html" target="blank">ARD Tagesschau</a></li>
        <li><a href="http://www.ardmediathek.de" target="blank">ARD Mediathek</a></li>
        <li><a href="http://www.zdf.de" target="blank">ZDF Homepage</a></li>
        <li><a href="http://www.heute.de/ZDFheute" target="blank">ZDF Heute Nachrichten</a></li>
     </ul>
    </li>
   </ul> 
</body>
</html>

Alles anzeigen

sriver

Hallo,

besten Dank an Tanja und djheke für die Hinweise. Habe dieses WE leider wenig Zeit weiterzuarbeiten, aber wenigstens habe ich schon einmal die li's im Fernseh-popup in eine ul eingefasst. Damit müsste der Code doch an dieser Stelle doch zumindest nicht fehlerhaft sein, oder?

Ändern tut das aber leider nichts.

@ Tanja:
Wenigstens die divs 4,5 und 6 sind identisch, bitte noch einmal reinsehen. Kann dort auch keinen fehlerhaften Code entdecken ( Sind ja noch fast leer, die divs).Hast Du eine Idee, warum div 5 anders aussieht?

djheke
Werde am Montag deine ausführlichen Hinweise sehr genau studieren, danke dafür. Für den Moment, wüsstest Du warum einfassen der li's in ul nichts ändert?

An alle:
Wenn ich die DW box auskommentiere (sie ist also als aktiver Code dann nicht mehr vorhanden), verschwinden die Probleme mit den Listen und dem fünften div sofort, sogar dann, wenn ich den alten, fehlerbehafteten Code drin lasse. Hat jemand eine Idee, warum das so ist? Ich kann keinen Zusammenhang mit der DW box und dem Rest erkennen.

Gruß
Sriver

TanjaP.

Zitat von sriver

...
Wenigstens die divs 4,5 und 6 sind identisch

Nein.

Code

<div id="fourth">fourth</div>
    <div id="fifth">fifth</div>
    <div id="sixth"><script language=JavaScript type="text/javascript">document.write("Javascript-text")</script></div>

in div sixth steht ein inline-Element (script) und in den anderen? Anders würde es aussehen, wenn z.B. es so aussehen würde:

Code

<div id="fourth"><p>fourth</p></div>
    <div id="fifth"><span>fifth</span></div>
    <div id="sixth"><script language=JavaScript type="text/javascript">document.write("Javascript-text")</script></div>

Das mit dem validieren hat schon seinen Grund. Nimm mal ein großes Brett (deine Seite) und hau es mit 50 krummen Nägeln (deine Fehler) an die Wand - kann halten, muss aber nicht. Es wird dann auch nicht reichen, wenn Du zwei krumme Nägel gegen 2 gute ersetzt

djheke

Zitat von sriver

Hallo,

djheke
Werde am Montag deine ausführlichen Hinweise sehr genau studieren, danke dafür. Für den Moment, wüsstest Du warum einfassen der li's in ul nichts ändert?
Sriver

Kopiere dir diesen Code und teste es offline. Du wirst sehen, dass alles klappt
Oder hier das Beispielhttp://www.gipspferd.de/forumhilfe/navi/

sriver

Muss mich entschuldigen, habe nach dem letzten Post die angegebenen Änderungen nur lokal vorgenommen, aber nicht hochgeladen. Danke an Tanja, die das offensichtlich gemerkt hat.

Also nunmehr sind die li's im Fernseh-popup-div in eine ul eingefasst, ändert aber nichts wie schon erwähnt.

Auch sind die divs 4,5,6 jetzt gleich (ja tatsächlich, sorry für meinen Lapsus). Also noch einmal die Frage: Warum sehen sie nicht gleich aus? Und warum sehen sie gleich aus - und warum verschwindet auch der Darstellungsfehler im Fernseh-popup (sein es mit dem fehlerhaften oder mit dem reparierten Code), wenn die DW-Box auskommentiert wird?

Bandit

Wenn du jetzt den aktuellen Stand hochgeladen hast, ist jede weitere Diskussion sinnlos, denn du hast 48 Validator-Fehler auf der Seite, die u.a. auch deine Listen betreffen. Siehe http://validator.w3.org/check?uri=http…=Inline&group=0

TanjaP.

Sorry, aber ganz ehrlich- hast Du Dir die Antworten hier auch durchgelesen?

Zitat

die <br> dazwischen haben da nichts zu suchen

Post 7

Zitat

enthalten Text, der aber weder z.B. als Überschrift, Absatz oder sonstiges ausgezeichnet ist

auch Post 7
und wie Bandit schon sagt, ohne validieren kommst Du nicht weit

sriver

@ Bandit: nicht sehr ermutigend, diese Bemerkung, danke.

Aber zur Sache:es ist weniger schlimm als es scheint. KEINER der monierten Fehler betrifft die popup box (<br> jetzt entfernt) um die es hier geht. DIese ist laut Validator ok, aber sie sieht mehr als merkwürdig aus.
Auch die divs 4 bis 6 sind laut Validator ok, aber Nummer 5 wird anders dargestellt.
Was die anderen Fehrler angeht so werde ich selbstverständlich versuchen sie zu reparieren. Es ist allerdings mehr als 30 mal derselbe Fehler an anderer Stelle. Werde das abstellen, aber vor allem müßte ich im Moment mal verstehen warum die popup Box und die divs 4-6 fehlerhaft aussehen. Ein paar andere Fehler sind (im Moment) leider außerhalb meiner Kontrolle, da es nicht mein Code ist, sonder der von der DW.

Werter Bandit, siehst du in div 4,5,6 vielleicht irgend einen dummen Fehler, den ich gemacht habe und den der Validator nicht sieht? Oder wüßtest Du was die popup-Box so durcheinander schmeißt? Falls ja, wär es nett wenn Du es mich wissen ließest.

Bandit

Ich sag's ja nicht gerne, aber langsam macht es keinen Sinn, dir irgendwelche Tipps zu geben. Du hast schwerwiegende Fehler im Quellcode und solange du die nicht beseitigst, werden wir nicht wissen, wo sonst noch Probleme sind. Ist es jetzt so schwer, die Fehler zu beseitigen?

sriver

ok, melde mich wieder sobald ich den Code valider gemacht habe soweit ich es vermag.

sriver

Hallo Leutz,

da mir hier fast jeder geraten hat, den Code erstmal valider zu machen, habe ich das auch ganz artig versucht (will ja nicht als unbelehrbar dastehen ;-)).

Die 48 Fehler sind jetzt auf zehn reduziert - immer noch ne Menge, ich weiß. Die ersten drei Fehler (einmal encoding und zweimal ein überflüssiges align="center") werde ich auch noch versuchen zu eliminieren (ist mir bislang noch nicht gelungen), die restlichen sieben betreffen allesamt den Code von der DW, auf welchen ich (z.Zt.) keinen Einfluss habe.

Alle Fehler, die die divs betreffen, um die es geht, sind, denke ich, eliminiert. Jedenfall findet der Validator hier nix mehr zum Meckern.

Das ändert leider alles nichts an dem Problem, also zurück zum Ausgangspunkt:

1) Das Fernsehpopup wird nach wie vor merkwürdig dargestellt (aber nicht in Safari und Chrome).
2) die divs 4,5 und 6 sehen nicht gleich aus (5 nicht in der Mitte) (auch dieser Fehler nicht in Safari und Chrome auf)

Eigentlich müßte die divs 4-6 doch gleich aussehen, oder ? ( Tanja: danke für deine Hinweise dass sie unformatierten Text enthalten, dennoch: die divs sind gleich!) Wenn ein div nichts enthält außer einem einzigen Wort, auch ohne Kennzeichnung, müßte dann nicht einfach genau dieses Wort angezeigt werden?

Die divs sehen so aus:

<div id="fourth">
fourth
</div><div id="fifth">
fifth
</div>
<div id="sixth">
sixth
</div>

Keine Ahnung warum 5 anders aussieht. Weiß jemand warum?
Hier einzusehen:
http://www.learn-spanish-thoroughly.de/

djheke: nochmals vielen Dank für Deinen Code, obwohl ich dann einen etwas anderen Weg gegangen bin. Statt die li's in eine ul zu packen, habe ich sie durch divs ersetzt. Dem Validator gefällt das.

Komisch ist: Wenn die DW Bos auskommentiert wird, verschwinden sofort alle Fehler. Ohne DW Box traten sie auch mit dem alten, fehlerhaften Code nicht auf - alles war prächtig. Ist da ein Zusammenhang den ich nicht erkenne? Sind die sieben noch vorhandenen Fehler im DW Code die Übeltäter? Klänge plausibel, obwohl ich andererseits nicht verstehe, was die DW mit div 5 oder dem Fernseh popup zu tun hat.

Wie immer danke für jedweden Hinweis!

TanjaP.

Zitat von sriver

Statt die li's in eine ul zu packen, habe ich sie durch divs ersetzt. Dem Validator gefällt das.

Dem Validator ist es egal, der prüft nur die korrekte Anordnung und sucht nach fehlenden Sachen. Eine Aufzählung gehört nunmal in eine Liste und es wäre völlig egal, ob Du die LI oder die DIV anpasst. Stichwort Semantik. Nur weil ich einen Ackergaul in einen Rennstall stelle wird daraus kein Galopper des Jahres.
Das Beispiel von djheke schon mal eingebaut?
Arbeite eine Baustelle nach der anderen ab, nicht alle kunterbunt durcheinander und irgendwas machen. Manches mal kann man zu einer quick&dirty Lösung greifen aber was Du machst geht so gar nicht.