Liste/Baumansicht: LI verrutscht

[Olli]

Hallo zusammen,

ich verwende ein TreeControl (http://www.silverstripe.com/tree-control/), um auf- und zuklappbare Baumstrukturen mit einfachen UL-Listen darzustellen. Der Code läßt sich sehr einfach in eigene Seiten einbauen und anpassen.

Einziges Problem im IE6/7 (das, wie ich vermute, ein allgemeines Problem mit Listen im IE ist): Wenn eine Listenzeile (<li><a href="#"><span>Viel Text</span></a></li>) breiter als das die Liste umgebende Div/Frame/Browserfenster wird, rutscht das BackgroundImage von [ul.tree a] (das SeitenIcon) mit dem Text nach links. Hier müßte wie im FF aber nur eine Scrolleiste ohne Verrutschen erscheinen.

Ich vermute das Problem in [ul.tree li], das display:inline verhindert hier schon einen Zeilenumbruch hinter dem backgroundImage, der die Darstellung völlig versaut.

Das HTML: (Icons und Javascript zum auf- und zuklappen finden sich auf der angegebenen Seite):

<ul class="tree">
<li><a href="#" onfocus="blur()"><span id="i0">&lt;data&gt;</span></a>
 <ul>
 <li><a href="#" onfocus="blur()"><span id="i1">&lt;comment&gt; mitteilungen &lt;/comment&gt;</span></a></li>
 <li><a href="#" onfocus="blur()"><span id="i2">&lt;aktuell bild="malerei_vorschau.jpg" ueberschrift="Malerei" kurztext="Lorem ipsum dolor sit amet, consetetur Lorem ipsum dolor sit amet, consetetur" detailseite="studienmaterial/malerei.xml"&gt;&lt;/aktuell&gt;</span></a>
  <ul>
   <li><a href="#" onfocus="blur()"><span id="i3">&lt;aktuell bild="video_vorschau.jpg" detailseite="studienmaterial/video.xml"&gt;&lt;/aktuell&gt;</span></a></li>
  </ul>
 </li>
 <li><a href="#" onfocus="blur()"><span id="i4">&lt;aktuell detailseite="studienmaterial/skulptur.xml"&gt;&lt;/aktuell&gt;</span></a></li>
 <li><a href="#" onfocus="blur()"><span id="i5">&lt;aktuell  detailseite="studienmaterial/graphik.xml"&gt;&lt;/aktuell&gt;</span></a></li>
 <li><a href="#" onfocus="blur()"><span id="i6">&lt;aktuell bild="video_vorschau.jpg" detailseite="studienmaterial/video.xml"&gt;&lt;/aktuell&gt;</span></a></li>
 </ul>
</li>
</ul>

Das CSS:

/*
 * CSS for Standard tree layout
 * Copyright (C) 2005 SilverStripe Limited
 * Feel free to use this on your websites, but please leave this message in the fies
 * http://www.silverstripe.com/blog
 */

ul.tree{
 width: auto;
 padding-left : 0px;
 margin-left : 0px;
}

ul.tree img{
  border : none;
}

ul.tree, ul.tree ul {
 padding-left: 0;
}

ul.tree ul {
 margin-left: 16px;

}
ul.tree li.closed ul {
 display: none;
}

ul.tree li {
 list-style: none;
 background: url(../icons/tree/i-repeater.gif) 0 0 repeat-y;
 display: inline; /*block;*/
 width: auto;
 /* background-color:#FFFFFF; */
}

ul.tree li.last {
 list-style: none;
 background-image: none;
}

/* Span-A: I/L/I glpyhs */
ul.tree span.a {
 background: url(../icons/tree/t.gif) 0 50% no-repeat;
 display: block;
}
ul.tree span.a.last {
 background: url(../icons/tree/l.gif) 0 50% no-repeat;
}

/* Span-B: Plus/Minus icon */
ul.tree span.b {
}
ul.tree span.a.children span.b {
 background: url(../icons/tree/minus.gif) 0 50% no-repeat;
 cursor: pointer;
}
ul.tree li.closed span.a.children span.b {
 background: url(../icons/tree/plus.gif) 0 50% no-repeat;
 cursor: pointer;
}

/* Span-C: Spacing and extending tree line below the icon */
ul.tree span.c {
 margin-left: 16px;
}
ul.tree span.a.children span.c {
 background: url(../icons/tree/i-bottom.gif) 0 50% no-repeat;
}
ul.tree span.a.spanClosed span.c {
 background-image: none;
}

/* Anchor tag: Page icon */
ul.tree a  {
 white-space: nowrap;
 overflow: hidden;

padding: 10px 0px 10px 18px;
 line-height: 16px;

background: url(../icons/tree/page-file.png) 0 50% no-repeat;
}
ul.tree span.a.children a {
 background-image: url(../icons/tree/page-openfoldericon.png);
}
ul.tree span.a.children.spanClosed a {
 background-image: url(../icons/tree/page-foldericon.png);
}

/* Unformatted tree */
ul.tree.unformatted li {
 background-image: none;
 padding-left: 16px;
}
ul.tree.unformatted li li {
 background-image: none;
 padding-left: 0px;
}

/*
 * Divs, by default store vertically aligned data
 */

ul.tree li div {
 float: right;
 clear: right;
 height: 1em;
 margin-top: -26px;
}
/* As inside DIVs should be treated normally */
ul.tree div a  {
 padding: 0;
 background-image: none;
 min-height: auto;
 height: auto;
}

ul.tree li A:link, ul.tree li A:hover, ul.tree li A:visited {
 color : #111111;
}

ul.tree li .over{
 background-color : pink;
}

[Hopsel]

Hi Olli!

Mein internes Parsing-Modul ist gerade ausgefallen.

So wie ich dich versteh geht es doch nur um die Positionierung des Hintergrundbildes, oder?
Das hat ja nun nichts mit irgendwelchen Treecontrols zu tun, sondern sollte sich auf einfachen HTML-Code von ein paar Zeilen (inklusive Doctype und allem Pipapo) und ein wenig CSS reduzieren lassen.

Wenn du meine Hilfe möchtest, wäre entweder ein funktionierendes Minimalbeispiel oder eine Onlineversion der Problemseite nicht schlecht.
Ich denke, andere sehen das ähnlich.

MfG H☼psel

[Olli]

Das Problem noch einmal mit einem ganz einfachen Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>test</title>
 <style>
  ul {
   list-style-type:none;
  }
  li {
   list-style: none;
   background: url(icons/tree/i-repeater.gif) 0 0 repeat-y;
   display:block;
   width:auto;
  }
  a {
   white-space: nowrap;
   padding: 10px 0px 10px 18px;
   line-height: 16px;
   background:url(icons/tree/page-file.png) 0 50% no-repeat;
  }
 </style>
</head>
<body>
 <ul>
  <li><a href=""><span>kurz</span>
   <ul>
    <li><a href=""><span>lang lang lang lang lang lang lang lang lang lang lang lang lang lang lang lang</span></a></li>
    <li><a href=""><span>kurz</span></li>
   </ul>
  </li>
  <li><a href=""><span>kurz</span></li>
 </ul>
</body>
</html>

Wenn das IE-Browserfenster schmaler gestellt wird, rutscht der Langtext nach links.

[Olli]

Argh, im Beispiel muss das a auch wieder geschlossen werden: </a>

[Hopsel]

Hi Olli!

Wenn das IE-Browserfenster schmaler gestellt wird, rutscht der Langtext nach links.

Setze die Links auf display:inline-block; und gib ihnen passende Dimensionen und Abstände.

MfG H☼psel

[Olli]

Setze die Links auf display:inline-block; und gib ihnen passende Dimensionen und Abstände.

Besten Dank!
Wer das obige Silverstripe-CSS um folgende Angaben erweitert, bekommt ein perfekt funktionierendes TreeControl für FF, IE und Safari:

* html ul.tree a  {
 display:inline-block;
 padding:0px 0px 0px 18px;
}