Tabellenzellen unregelmäßg

kellykatz

Grünschnabel
Hallo,

mein Problem ist folgendes: Ich möchte einfach eine Tabelle mit Bildinhalten erstellen. Aus irgendeinem Grund sind die Zellen unregelmäßig hoch und die Bilder darin unterschiedlich Positioniert. Auch wenn ich align=middle eingebe und im css code padding und margin auf 0 setze (auch bei den Bildern) passiert nichts. Die Bilder sind auch 100ig gleichgroß. Ich weiß nicht, ob es an HTML oder am CSS liegen könnte.

hier einmal der HTML Code:

Code:
<table class="gallery" cellpadding="0" cellspacing="3px" border="0" id="tabelle2" style="display:none;">
      <tr>
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/1.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_1.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg'" /></a>

       </td>
       
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/2.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_2.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg'" /></a>
       </td>
       
       <td align="center">   
        <a href="inhalte/galerie/bilder/charis/Digital/bilder/3.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_3.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg'" /></a>
       </td>
      </tr>
       
        <tr>
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/4.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_4.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg'" /></a>
       </td>
       
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_5.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg'" /></a>
       </td>
       
       <td align="center"> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_6.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg'"/>  
       </td>
       </tr>
       
       <tr>
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/7.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_7.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg'"/></a>
       </td>
       
       <td align="center">
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/8.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_8.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg'" />
       </td>
       
       <td align="center"> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/9.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_9.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg'" /></a>
       </td>
       </tr>
       
       <tr>
       <td align="center" >
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/10.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_10.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg'" /></a>
       </td>
       
       <td>
       </td>
       
       <td> 

       </td>
       </tr>
       
     </table>
    
    </div>

und hier das CSS:

Code:
.gallery{
width:100%;
}

.gallery td{
height:56px;
width:77px;
padding:0;
margin:0;
}

.gallery img{
border:0;
border:3px solid black;
padding:0;
margin:0;
}

Ich bedanke mich im Voraus :)

kelly
 
M

Maik

Hi,

beim Überfliegen deines HTML-Codes fällt auf, dass zwischendurch ein paar schliessende </a>-Tags fehlen, wie z.B. hier:
HTML:
<a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_6.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg'"/>


Und welches Breitenmaß ist hier nun maßgeblich? Das der Tabelle (width:100%), oder das der Tabellenzellen (width:77px)?

Übrigens ist die margin:0-Regel für die Tabellenzellen sinnfrei, da das <td>-Element im Tabellengerüst überhaupt keinen Außenabstand besitzt, der auf null zurückgesetzt werden müsste ;)

Und in HTML-Attributen wird grundsätzlich keine Einheit (px) angegeben, wie im Falle des cellspacing-Attributs.

mfg Maik
 
M

Maik

Aus irgendeinem Grund sind die Zellen unregelmäßig hoch und die Bilder darin unterschiedlich Positioniert.
Kann ich mit deinem gezeigten Code nicht bestätigen:

tabellen-ueberblick.jpg

In welchem Browser taucht denn bei dir dieser Fehler auf?

Ich hab's mir eben in den aktuellen Versionen von Firefox, IE, Opera und Safari angeschaut, und das Ergebnis siehst du ja.

mfg Maik
 

kellykatz

Grünschnabel
Heya, danke für die Antworten, es lag tatsächlich daran, dass ich die a-tags nicht geschlossen hatte.

Ich bin leider sehr schusselig und selbst fällt einem ein Fehler meist schwieriger auf, als einem Unabhängigen.

Jetzt klappt es jedenfalls :)

Vielen Dank nochmal

kelly
 
M

Maik

Ob du's glaubst, oder nicht, mein Schnappschuß basiert auf deinem geposteten Original-Code, den ich nicht fehlerkorrigiert, sondern lediglich mein schickes Avatar darin eingepflanzt habe :)

Und in welchem Browser trat bei dir nun der Fehler auf?

mfg Maik