[html] Der IE richtet den Zelleninhalt nicht richtig aus

Quidoff

Lieutenant
Registriert
Feb. 2005
Beiträge
897
Also ich hab das Problem, das der IE die Höhe einer Zelle unnötig groß macht. Ich hab mal den nötigen Code aus der ganzen Seite genommen und in eine extra HTML Datei gespeichert.

Link

Im Firefox wird es wie gewünscht dargestellt.

Hier nochmal der ganze Code.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Problem mit Zellenausrichtung</title>
</head>

<body>
<table style="width: 100%; text-align: left;" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="width: 174px; vertical-align: top;">&nbsp;</td>
      <td style="text-align: center; vertical-align: top;">

      <table style="width: 80%; text-align: left;" border="1" cellpadding="2" cellspacing="0">
          <tr>
            <td style="vertical-align: top; text-align: center; font-weight: bold;">Name<br></td>
            <td style="vertical-align: top; text-align: center; font-weight: bold;">Sprache/Link<br></td>
            <td style="vertical-align: top; text-align: center; font-weight: bold;">Vote<br></td>
          </tr>
          <tr>
            <td style="width: 50%; vertical-align: top; text-align: center;">Text Text Text Text Text&nbsp;&nbsp;</td>
            <td style="vertical-align: top; text-align: center;">
            	<img alt="Englisch" title="Englisch" src="pageimages/Englisch.jpg" style="width: 18px; height: 13px;" align="middle">
            	&nbsp;&nbsp; <a href="#">
                <img alt="" src="pageimages/LinkPic.jpg" style="border: 0px solid ; width: 64px; height: 11px;" align="middle"></a>
            </td>
            <td valign="top" align="center">
            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
            		<tr>
            			<td align="center" valign="middle">
                            <table width="60" border="0" cellspacing="0" cellpadding="0" style="height: 10px;">
                                <tr>
                                    <td bgcolor="#666666">
                                        <table width="100%" cellspacing="1" cellpadding="0" border="0" style="height: 10px;">
                                            <tr>
                                                <td width="10" bgcolor="#FFCC00"><font size="1">&nbsp;</font></td>
                                                <td width="10" bgcolor="#FFCC00"><font size="1">&nbsp;</font></td>
                                                <td width="10" bgcolor="#FFCC00"><font size="1">&nbsp;</font></td>
                                                <td width="10" bgcolor="#FFCC00"><font size="1">&nbsp;</font></td>
                                                <td width="10" bgcolor="#DDDDDD">
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="height: 10px;">
                                                        <tr>
                                                            <td width="33%" bgcolor="#FFCC00"><font size="1">&nbsp;</font></td>
                                                            <td width="67%" bgcolor="#DDDDDD"><font size="1">&nbsp;</font></td>
                                                        </tr>
                	                                </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="10" bgcolor="#FFFFFF"><font face="arial" size="1">&nbsp;<b>4.3</b></font></td>
                                </tr>
                            </table>
                        </td>
                        <td align="center" valign="middle">
                            <form method="post" action="#" name="Link1Form">
                                <select style="FONT-FAMILY: Tahoma, Verdana, Helvetica, Geneva, Arial; FONT-SIZE: 11px;" name="vote" size="1">
                                    <option value="1337" selected="selected">Bewerten:</option>
                                    <option value="5">5 - gut</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1 - schlecht</option>
                                </select>
                                <input style="FONT-FAMILY: Tahoma, Verdana, Helvetica, Geneva, Arial; FONT-SIZE: 11px;" type="submit" value="Vote!" />
                            </form>
                        </td>
                    </tr>
                </table>
            </td>
          </tr>
      </table>
      </td>
    </tr>
</table>
</body>
</html>
Wer kann erklären was ich falsch gemacht habe?

//edit
Ich habe den Thread-Titel falsch gewählt. Die Ausrichtung ist gar nicht das Problem, sondern die Höhe der Tabelle. Bitte in "
HTML:
 Der IE macht die Tabelle unnötig groß" umbenennen.

KoЯn
 
Zuletzt bearbeitet:
auch wenn ich leider keinen IE unter Linux habe, kann ich dir sagen, das der Code total unübersichtlich ist, dein CSS inkonsistent (manchmal klein, manchmal gross) und du längst überflüssige tags wie <font> benutzt. Meinst du nicht, dass es mit nem rein CSS basierten Layout einfacher zu handhaben und v.a. zu bearbeiten ist ?
 
Hättest mal sehen sollen, wie der Code vorher aussah. :D
Ich hab mich schon gar nicht getraut ihn in seiner eigentlichen Form von der ganzen Seite zu posten, weil das sonst nur noch mehr Leute verschreckt hätte. Ich nehme an, dass mein Kumpel ein HTML-Editor Programm benutzt.
Der Code ist auch von zwei Leuten geschrieben worden. Mein Kumpel hat die große Tabelle mit Name, Link und Vote geschrieben. In Vote sollte dann mein Voting php-Script rein. Also dieser Teil wird von meinem PHP Script ausgegeben.
Für Leute, die keinen IE haben mach ich am besten mal einen Screenshot.

Firefox 1.0.6:
snap2qf.jpg


Internet Explorer 6:
snap4kg.jpg


KoЯn
 
Das ist ein altbekanntes Problem mit Formularen. Füge mal dem form-Tag folgendes Style-Attribut hinzu:
style="display:inline;"

Damit sollte es dann auch im IE gehen.
 
1000 Dank. Klappt einwandfrei. Hab mir schon gedacht, dass es was mit dem Formular als Block-Element zu tun hat.

KoЯn
 
Zurück
Oben