valign=bottom im IE

[Jeena Paradies]

http://home.arcor.de/maedchen.schluckt.net/mp3/koorbash/index.htm

<tr style="height:31" valign="bottom">
    <td><img src="back-unt.png" border="0" alt=""></td>
    <td>
    <img src="hell.png" width="606" height="14" border="0">
    </td>
    <td><img src="top-li-unt.png" border="0" alt=""></td>
   </tr>

Die Tabelle unten bündig bemacht, aber im IE und Konqueror wird das hell.png falsch formatiert, und zwar in die mitte von <tr></tr> gemacht. Die beiden Bilder links und rechts sind aber unten ich kann mir irgendwie nicht helfen warum das so komisch aussieht. Der IE interpretiert aber auch noch andere von meinen angaben irgendwie total anders als Mozilla und Opera.

Was lässt den IE glauben, dass ich das in die mitte und nicht ganz unten haben will?

Jeena Paradies

[Nina]

Was hastn für ne Version vom IE sollte doch eigentlich funktionieren.

Bist du zufällig aus Jena (Thür)??

cu

[Jeena Paradies]

Bist du zufällig aus Jena (Thür)??

Ne bin da nur auf dem Weg zur Loveparade vor 5 Jahren durchgefahren.

Der NS 4.7 macht das genau so.

[Thomas Luethi]

Hallo,

<tr style="height:31" valign="bottom">

^^ da fehlt die Einheit (px)

<td><img src="back-unt.png" border="0" alt=""></td>

^^
falls dies ein Navigations-Button ist, solltest Du ein
sinnvolleres ALT-Attribut setzen. Fuer reine Deko ist es so OK.

<td>
    <img src="hell.png" width="606" height="14" border="0">

da fehlt das ALT-Attribut

</td>
    <td><img src="top-li-unt.png" border="0" alt=""></td>
   </tr>

Die Tabelle unten bündig bemacht, aber im IE und Konqueror wird das hell.png falsch formatiert, und zwar in die mitte von <tr></tr> gemacht. Die beiden Bilder links und rechts sind aber unten ich kann mir irgendwie nicht helfen warum das so komisch aussieht.

Das valign-Attribut ist wider Erwarten im TR-Element erlaubt:
http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TR

Trotzdem koennte es sein, dass manche Browser es nur beachten,
wenn es direkt im TD- bzw. TH-Element steht:
<td valign="bottom"><img ...></td>

Der IE interpretiert aber auch noch andere von meinen angaben irgendwie total anders als Mozilla und Opera.

Das ist bekannt...
Eine haeufige Ursache ist das kaputte Box-Modell des MS IE <6.0.
http://tantek.com/CSS/Examples/boxmodelhack.html
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp#cssenhancements_topic3

Was lässt den IE glauben, dass ich das in die mitte und nicht ganz unten haben will?

Schlechte Gewohnheit ("das haben wir Browser doch schon immer
so gemacht...")?

Ich vermute den "Fehler" im "Whitespace", d.h. in den "beruechtigten"
Zeilenumbruechen und Leerschlaegen in Deinem Quelltext.
Versuch's mal mit:
<td><img ...></td>

Ansonsten wuerde ich Dir stark zu reinem CSS raten:

tr.navi   { height:31px; }
.navi td  { vertical-align:bottom; }
.navi img { border:0 none; display:block; }

Dann kannst Du Dir die meisten Attribute im HTML schenken,
so auch das ueberfluessige border="0".

<tr class="navi">
  <td><img ...></td>
  <td><img ...></td>
  <td><img ...></td>
</tr>

--

Allenfalls helfen auch vollstaendige Angaben der Bild-Dimensionen
(die wuerde ich nach wie vor als HTML-Attribute height/width machen).
Sind alle betroffenen Bilder gleich hoch?

HTH, mfg
Thomas

[Jeena Paradies]

<tr style="height:31" valign="bottom">
                        ^^ da fehlt die Einheit (px)

Jo hab ich jetzt auch gesehen, und geändert

<td><img src="back-unt.png" border="0" alt=""></td>
                                                  ^^

is nur Deko

<td>
    <img src="hell.png" width="606" height="14" border="0">

ist auch nur deko, und das eigentlich auch nur 1x1 px groß soll ich trotzdem bei jedem Ding ein alt="" hinschreiben?

</td>
    <td><img src="top-li-unt.png" border="0" alt=""></td>
   </tr>
Trotzdem koennte es sein, dass manche Browser es nur beachten,
wenn es direkt im TD- bzw. TH-Element steht:
<td valign="bottom"><img ...></td>

Das hab ich ausprobiert, hat aber nicht geholfen.

Eine haeufige Ursache ist das kaputte Box-Modell des MS IE <6.0.
http://tantek.com/CSS/Examples/boxmodelhack.html
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp#cssenhancements_topic3

Werd mich da mal durchlesen, danke.

Ich vermute den "Fehler" im "Whitespace", d.h. in den "beruechtigten"
Zeilenumbruechen und Leerschlaegen in Deinem Quelltext.
Versuch's mal mit:
<td><img ...></td>

Das hat geholfen DANKESCHÖN!!!

Ansonsten wuerde ich Dir stark zu reinem CSS raten:

tr.navi   { height:31px; }
.navi td  { vertical-align:bottom; }
.navi img { border:0 none; display:block; }

Dann kannst Du Dir die meisten Attribute im HTML schenken,
so auch das ueberfluessige border="0".

<tr class="navi">
  <td><img ...></td>
  <td><img ...></td>
  <td><img ...></td>
</tr>

Bin gerade am anfang von css, also mitten in der lernphase; Ich werde es mir zu Herzen nehmen, und es auch irgendwann schaffen so zu verfahren. Vor allem weil das ja auf jeder Seite gleich ist, könnte es ja auch Ladezeit sparen, wenn das alles in einer Externen Datei ist, die nur einmal Runtergeladen werden muss, um immer wieder aus dem chache (oder wie das heißt) ausgelesen wird, und nicht durch die Leitungen gejagt wird. Sowas habe ich auch oben für das Javascript vor.

Allenfalls helfen auch vollstaendige Angaben der Bild-Dimensionen
(die wuerde ich nach wie vor als HTML-Attribute height/width machen).
Sind alle betroffenen Bilder gleich hoch?

Nein