Tabellenfelder mit komischen overflow-Verhalten

Firzen · #1 (**permalink**) 17.10.2008, 14:32

Servus,

ich habe hier eine Tabelle mit Werten aus einer MySQL-Tabelle.
Die Spaltenheader (ths) enthalten eine kleine Tabelle mit zwei Bildern (zum Sortieren) und daneben den Titel der Spalte.
Für die ths wurde kein overflow-Verhalten angegeben. Dennoch verhalten sie sich wie mit overflow:visible. Zumindest im Firefox...

Ich habe mal zwei Screens hochgeladen, damit man sich das Ganze besser vorstellen kann.
Darstellung im Firefox 3
Darstellung im Internet Explorer 7

Zur Information noch:
Das ist erst so passiert, als ich den Inhalt des th mit <nobr> umschlossen habe. Vorher wurde der Text nach der kleinen Table mit den Pfeilen umgebrochen was ich aber nicht möchte.

So sieht ein th-Feld aus im Quellcode:

HTML-Code:

<th>
 <nobr>
  <table align="left" class="sortArrows" cellpadding="0" cellspacing="0">
   <tr>
    <td style="vertical-align:bottom;">
     <a href="index.php?module=4&amp;action=view&amp;type=users&amp;sort=id&amp;order=ASC">
      <img src="img/arr_up_gray.gif" alt="asc" width="9" height="6" onMouseOver="this.src='img/arr_up_black.gif';" onMouseOut="this.src='img/arr_up_gray.gif';">
     </a>
    </td>
   </tr>
   <tr>
    <td style="vertical-align:top;">
     <a href="index.php?module=4&amp;action=view&amp;type=users&amp;sort=id&amp;order=DESC">
      <img src="img/arr_down_gray.gif" alt="asc" width="9" height="6" onMouseOver="this.src='img/arr_down_black.gif';" onMouseOut="this.src='img/arr_down_gray.gif';">
     </a>
    </td>
   </tr>
  </table>
  &nbsp;id
 </nobr>
</th>

Man bemerke auch die Darstellung des linken Tabellenborders, die beim FF fehlt, beim IE jedoch da ist...
*vom FF enttäuscht ist*
Die ganze Tabelle ist übrigens in einem div mit overflow:auto...

EDIT:
Was ich vielleicht auch noch erwähnen sollte, ist, dass die kleinen Pfeilbilder mit display:block; ausgestattet sind.

fricca · #2 (**permalink**) 17.10.2008, 14:35

Poste einen Link zum Problem. Siehe auch: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Firzen · #3 (**permalink**) 17.10.2008, 14:47

Da das ganze eine PHP-Seite mit Login ist und es sich um die Administrationsoberfläche handelt (

) habe ich die relevante Seite mal als htm-Dokument abgespeichert und private Daten rausgestrichen.

Das Problem ist dennoch gut zu erkennen und man kann die Seite auch mit verschiedenen Browsern testen.

NeoN RpG 1.6: Federal Statistical Office of San Andreas (v0.1a)

CSS: http://www.neon-polas.de/xhtml_forum/style.css

fricca · #4 (**permalink**) 17.10.2008, 15:02

Boah. Mehrfach verschachtelte Tabellen, 268 Syntaxfehler laut HTML-Validator. Da muss ich passen. Mit sowas kann ich nicht umgehen.

Meiner Vermutung nach entsteht das Problem durch die Kombination aus nobr und align-Attribut.
Wenn du eh schon Tabellen missbrauchst kannst du doch auch einfach eine Tabelle nutzen, um deine Pfeile und den Text nebeneinander zu stellen.

Firzen · #5 (**permalink**) 17.10.2008, 16:03

Hm, frage mich gerade, warum ich nicht selbst drauf gekommen bin, den Titel mit in die Tabelle von den Pfeilen zu tun <.<
Habe es mal gemacht und nun wird es richtig dargestellt.

Und um die Syntaxfehler werde ich mich mal kümmern. Normalerweise halte ich mich an die Vorgaben vom W3C aber eine solche Kontrolle mache ich meistens erst am Schluss (Und der kam noch nicht ^^).

Verschachtelte Tabellen sehen im Quellcode sicherlich nicht gut aus, aber ich wusste nicht, wie ich es sonst machen sollte...
Alles in eine Tabelle stecken und mit col- und rowspan arbeiten hätte nur wieder alle Breiten und Höhen durcheinandergewürfelt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mysteriöse weiße Linie	Xethon	CSS	3	27.02.2010 16:50
Firefox display bug: overflow und javascript	Rauno	(X)HTML	0	05.08.2008 13:40
overflow: scroll Verarsche im IE	nick	CSS	0	23.01.2008 19:32
position:fixed löscht background-color des Container	alivecc	CSS	9	25.10.2007 14:25
FF overflow Problem 3-spaltiges Layout	smartt	CSS	14	26.07.2006 19:11