nicht angemeldet
CSS und Ausrichtung oder nur dummer Fehler
Guten Abend zusammen,
nach dem Umstellen auf ein neuen Dokumententyp wird der selector sowie die jeweils angrenzenden Tabellenzeilen linksbündig ausgerichtet im IE 6.0, in Mozilla 1.1 zentriert. Finde den Fehler nicht. Bitte helft mir.
Das Javascript habe ich übernommen. Da ich mich selbst erst grad in HTML einarbeite, habe ich keine Ahnung von der Funktionsweise des Skriptes. Weiß nur, dass es funzt.
Vielen Dank schon mal
André
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
table {border:solid 1px navy;}
th {width:84px; height:30px;}
//-->
</style>
</head>
<body>
<h1>Der Kurs WST 2000 B stellt sich vor:</h1>
<hr>
<table>
<tr>
<th><a href="pixx_alix.htm">Alix</a></th>
<th><a href="pixx_andre.htm">André</a></th>
<th><a href="pixx_bernd.htm">Bernd</a></th>
<th><a href="pixx_christian.htm">Christian</a></th>
<th><a href="pixx_conny.htm">Conny</a></th>
<th><a href="pixx_doris.htm">Doris</a></th>
</tr>
<tr>
<th><a href="pixx_elisabeth_b.htm">Elisabeth B.</a></th>
<th><a href="pixx_elisabeth_g.htm">Elisabeth G.</a></th>
<th><a href="pixx_evi.htm">Evi</a></th>
<th><a href="pixx_hannes.htm">Hannes</a></th>
<th><a href="pixx_judith.htm">Judith<br></th>
<th><a href="pixx_klaus.htm">Klaus</a></th>
</tr>
<tr><th colspan="6"><a href="pixx_manuel.htm">Manuel</a></th></tr>
<tr><th colspan="6">
<select name=wahl onChange="javascript: ac=document.selector.wahl.options[document.selector.wahl.selectedIndex].value; if (ac!='-') { window.location=ac; }"
size="1" style="FONT-SIZE:10px; WIDTH:130px; max-width:150px">
<option class="menu1" selected value="-">Geburtstage:</option>
<option value="pixx_nadine.htm">Geburtsdatum</option>
<!--25 weitere options-Tags mit Geburtstagen-->
</select>
</form>
</small>
</th>
</tr>
<tr>
<th colspan="6"><a href="pixx_mario.htm">Mario</a></th></tr>
<tr>
<th><a href="pixx_marion.htm">Marion</a></th>
<th><a href="pixx_marcus.htm">Marcus</a></th>
<th><a href="pixx_nadine.htm">Nadine</a></th>
<th><a href="pixx_rene.htm">René</a></th>
<th><a href="pixx_robert.htm">Robert</a></th>
<th><a href="pixx_sandra.htm">Sandra</a></th>
</tr>
<tr>
<th><a href="pixx_silvia.htm">Silvia</a></th>
<th><a href="pixx_stefan.htm">Stefan</a></th>
<th><a href="pixx_susi.htm">Susi</a></th>
<th><a href="pixx_tanja.htm">Tanja</a></th>
<th><a href="pixx_timo.htm">Timo</a></th>
<th><a href="pixx_tobias.htm">Tobi</a></th>
</tr>
</table>
</body>
</html>
-
Hallo, André,
nach dem Umstellen auf ein neuen Dokumententyp wird der selector sowie die jeweils angrenzenden Tabellenzeilen linksbündig ausgerichtet im IE 6.0, in Mozilla 1.1 zentriert. Finde den Fehler nicht. Bitte helft mir.
Es liegt eigentlich nicht an der Ausrichtung (text-align), sondern an der festgelegten Breite (width).
Erst einmal solltest du für normale Zellen das td-Element verwenden, th ist nämlich nur für Zeilen- und Spaltenbeschriftungen gedacht. Wenn du den Text formatieren willst (zentriert, fett), dann benutzt nicht th, sondern die entsprechenden Stylesheets:
td {width:84px; height:30px; font-weight:bold; text-align:center;}Dann fehlt ein form-Starttag, sodass die Auswahlliste vermutlich nicht als Linkliste wirken kann. Eventuell solltest du mit einem noscript-Element arbeiten, wenn du möchtest, dass auch Benutzer, welche JavaScript deaktiviert haben, die Unterseiten aufrufen können. Du musst dir bewusst sein, dass dies auch eine Barriere für Suchmaschinen darstellt, welche die Seiten nicht indizieren können.
Das Javascript habe ich übernommen. Da ich mich selbst erst grad in HTML einarbeite, habe ich keine Ahnung von der Funktionsweise des Skriptes. Weiß nur, dass es funzt.
Die Funktionsweise ist recht einfach, beim Ändern des Formularfeldes wird der Wert des ausgewählten Punktes ausgelesen und der Dateiname wird annavigiert.
Wie oben angesprochen ist der entscheidende Punkt, dass du *jeder* Tabellenzelle mit width:84px; eine feste Breite zuordnest. Trotz des colspan="6" zeigt der MSIE diese Zellen (beziehungsweise deren Zelleninhalt, denn border-right ist am richtigen Platz, auch die Hintergrundfarbe erstreckt sich über 6 Spalten) nur mit dieser Breite an, wodurch es so aussieht, als sei der Text linksbündig ausgerichtet. Folglich muss du die Breitenangabe für die Zellen mit colspan="6" wieder aufheben, das erreichst du, indem du allen anderen Zellen mit fester Breite eine Klasse zuordnest und sie somit gesondert mit fester Breite behandelst (td.festebreite {width:84px;} und <td class="festebreite">) oder dass du den mittleren Zellen einfach einen Breitenwert zuweist, welcher das 84px aufhebt, das wäre: width:auto;.
Der betreffende Teil sähe wie folgt aus:
<tr><td colspan="6" style="width:auto;"><a href="pixx_manuel.htm">Manuel</a></td></tr>
<tr><td colspan="6" style="width:auto;">
<form name="selector">
<select name="wahl" onchange="ac=document.selector.wahl.options[document.selector.wahl.selectedIndex].value; if (ac!='-') window.location=ac;" size="1" style="font-size:10px; width:130px; max-width:150px">
<option class="menu1" selected value="-">Geburtstage:</option>
<option value="pixx_nadine.htm">Geburtsdatum</option>
<!--25 weitere options-Tags mit Geburtstagen-->
</select>
</form>
</td>
</tr>
<tr>
<td colspan="6" style="width:auto;"><a href="pixx_mario.htm">Mario</a></td></tr>Wenn du auf die style-Attribute verzichten möchtest, kannst du natürlich auch hier eine Klasse verwenden:
Styledeklarationen:
td {width:84px; ...}
td.keinebreite {width:auto;}
Markup:
<td colspan="6" class="keinebreite"> ...Den Starttag des form-Elements (<form name="selector">) habe ich auch schon eingefügt.
Damit dürfte alles klappen... soweit ich weiß ist es tatsächlich ein Fehler des MSIE.Grüße,
Mathias-
Hallo, André,
Wie oben angesprochen ist der entscheidende Punkt, dass du *jeder* Tabellenzelle mit width:84px; eine feste Breite zuordnest.Gott, 'ne. Auf die einfachsten Dinge kommt man nicht!!!
Vielen Dank für die Hilfe
André
-