IE rückt untere Tabelle ein

[Ser4phiM]

Hallo community,

Um den Besuchern meiner Homepage die Möglichkeit zu geben, die Schriftfarbe zu verändern (Stichwort Styleswitcher), übertrage ich mein derzeitiges Frame-layout (siehe http://roman.abakus-world.de/design_b/) nach PHP. Ich bin noch ein Anfänger, was PHP angeht, daher bitte nicht hauen, wenn das script umständlich ist oä : )
Aber um PHP geht es mir im Moment gar nicht : P

Mein Problem ist mal wieder eine "andere" Darstellung durch den IE.
Um es deutlich zu sehen, öffne man bitte folgende Seite einmal mit Firefox:
http://roman.abakus-world.de/design_b_php/kontakt.php?style=7

Alles schön untereinander, klasse! Jetzt nochmal mit dem IE...

Nix schön untereinader! Die Tabelle vom Kontaktformular wird nach rechts versetzt. Leider bin ich mit meinem Latein am Ende, habe kA, warum die untere Tabelle eingerückt, die obere aber richtig stehen gelassen wird.

Hier der Ausriss aus dem Quelltext:

<table align="center" border="0" cellspacing="0" cellpadding="0" id="rahmen_oben"> //1. Tabelle mit nur einer Zelle NUR für den Rahmen
    <tr>
      <td align="center">
        <strong>Ich bin erreichbar per...</strong>
        <table border="0" align="center" width="260"> //Tabelle mit Kontaktinfos
          <tr>
            <td align="right">eMail:&nbsp;</td>
            <td align="center">[e-mail]</td>
          </tr>
          <tr>
            <td align="right">ICQ:&nbsp;</td>
            <td align="center">172947xxx</td>
          </tr>
          <tr>
            <td align="right">MSN:&nbsp;</td>
            <td align="center">[e-mail]</td>
          </tr>
          <tr>
            <td align="right">G&auml;stebuch:&nbsp;</td>
            <td align="center">
            <a href="gb.php<?php
   if($_GET['style']=="1") {echo "?style=1";}
   if($_GET['style']=="2") {echo "?style=2";}
   if($_GET['style']=="3") {echo "?style=3";}
   if($_GET['style']=="4") {echo "?style=4";}
   if($_GET['style']=="5") {echo "?style=5";}
   if($_GET['style']=="6") {echo "?style=6";}
   if($_GET['style']=="7") {echo "?style=7";}
   ?>" hidefocus>Hier geht's zum G&auml;stebuch</a></td>
          </tr>
        </table>
      </td>
    </tr>
  </table><br />
<table align="center" border="0" id="rahmen_unten"> //2. Tabelle mit nur einer Zelle NUR für den Rahmen
    <tr>
      <td align="center"><form...//HIER steht ganz viel Schweinskram für das Formular>
        <table width="400" border="0" cellpadding="2" cellspacing="0" class="kf_table"> //Tabelle mit den Feldern für das Kontakformular
            <tr>
              <td width="82">&nbsp;</td>
              <td width="310" align="left"><strong>Es geht auch ohne Umwege... </strong></td>
            </tr>
            <tr>
              <td align="right">* Name:&nbsp;</td>
              <td align="left">
                  <input class="kf_textfeld" type="text" name="NAME" size="30" />
              </td>
            </tr>
            <tr>
              <td align="right">Ort:&nbsp;</td>
              <td align="left">
                  <input class="kf_textfeld" type="text" name="ORT" size="30" />
              </td>
            </tr>
            <tr>
              <td align="right">* e-Mail:&nbsp;</td>
              <td align="left">
                  <input class="kf_textfeld" type="text" name="EMAIL" size="30" />
              </td>
            </tr>
            <tr>
              <td align="right">Homepage:&nbsp;</td>
              <td align="left">
                  <input class="kf_textfeld" type="text" name="HOMEPAGE" size="30" />
              </td>
            </tr>
            <tr>
              <td align="right" valign="top">* Nachricht:&nbsp;</td>
              <td align="left">
                  <textarea class="kf_textarea" rows="6" name="NACHRICHT" cols="30"></textarea>
              </td>
            </tr>
            <tr>
              <td align="right"><span class="kontakt_kleine_schrift">* Notwendige Angaben</span></td>
              <td align="left"><input name="submit" type="submit" class="kf_button" value="Abschicken" />
                &nbsp;
                <input class="kf_button" type="reset" value="L&ouml;schen" name="B1" />
              </td>
            </tr>
            <tr>
              <td colspan="2"><span class="kontakt_kleine_schrift"></span><a class="kf_link" target="_blank" href="http://www.fueralles.de/kostenloses-Kontaktformular.html" hidefocus> <font size="1">Kontaktformular</font></a><a class="kf_link" target="_blank" href="http://www.fueralles.de" hidefocus><font size="1">-Service</font></a></td>
            </tr>
          </table>
      </form>
      </td>
    </tr>
  </table>

Die beiden IDs:
<style type="text/css">
<!--
.kontakt_kleine_schrift {font-size: 10px}
#rahmen_oben {
  width: 503px;
  border: 1px solid #CCCCCC; }
#rahmen_unten {
  width: 503px;
  border: 1px solid #CCCCCC;
  padding: 0em; }
-->
</style>

Falls es nicht an diesem Abschnitt liegt, sagt mir bitte, woraus ich noch Quellttext posten soll...

Ich hoffe, ihr könnt mir den Fehler vor die Nase halten, auf dass ich daraus für mein Leben lerne ; )

In dem Sinne und Danke im voraus,
Ser4phiM

[wahsaga]

hi,

Um es deutlich zu sehen, öffne man bitte folgende Seite einmal mit Firefox:
http://roman.abakus-world.de/design_b_php/kontakt.php?style=7

Fehler beseitigen, dann kann man weitersehen.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,

»»Fehler »»beseitigen, dann kann man weitersehen.

gruß,
wahsaga

Habe die Fehler soweit beseitigt. Abgesehen von den _hidefocus_-Fehlern, die eine eher unkonforme Lösung für das Ausblenden des gestrichelten Markierungsrahmens um Links beim IE sind (Luft holen), ist da noch dieses unsaubere _<td><a><div align="left">_. Leider habe ich bisher keine andere Lösung für den von mir gewünschten MouseOver-Effekt des Zitat-DIVs und seinem content gefunden. Bin für Vorschläge natürlich offen : )

Nun aber btt: Die untere Tabelle ist im IE immer noch eingerückt... T.T

In dem Sinne,
Ser4phiM

[wahsaga]

hi,

[...] ist da noch dieses unsaubere _<td><a><div align="left">_. Leider habe ich bisher keine andere Lösung für den von mir gewünschten MouseOver-Effekt des Zitat-DIVs und seinem content gefunden.

Div als Block Element hat in A als Inline Element nichts verloren.

Wenn du eine bestimmte Darstellung eines Links erreichen willst, dann formatiere ihn entsprechend.
Bspw. mit display:block, dann kann er auch eine width-/height-Angabe erhalten.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,
auch wenns ot ist, das DIV im a-tag ist nötig, um den MouseOver-Effekt zu erzielen. Anders war der nicht zu realisieren, denn sonst würde sich nur das Zitat umfärben, nicht aber der Rahmen drumrum.

btt:
Hast du denn eine Idee, warum der Internet Explorer die untere Tabelle einrückt?
Ein ähnliches Problem macht er auch auf der Startseite: Dort stellt er den Mitteltext nicht zentriert (symmetrisch) dar. FF machts mal wieder 'besser' : )

In dem Sinne,
Ser4phiM

[wahsaga]

hi,

auch wenns ot ist, das DIV im a-tag ist nötig, um den MouseOver-Effekt zu erzielen.

Es kann nicht "nötig" sein, weil's überhaupt nicht erlaubt ist.

Anders war der nicht zu realisieren

Natürlich ist er.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,

Es kann nicht "nötig" sein, weil's überhaupt nicht erlaubt ist.

Sagt wer? ; )

Natürlich ist er.

Schubst du mich auch in die richtige Richtung?

btw warum ist eigentlich die untere Tabelle auf
http://localhost/design_b_php/kontakt.php?style=7
im IE eingerückt dargestellt? : P

In dem Sinne,
Ser4phiM

[wahsaga]

hi,

Natürlich ist er.
Schubst du mich auch in die richtige Richtung?

Habe ich doch schon versucht: Packe das Zitat in den Link, und formatiere diesen wie gewünscht.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,

Habe ich doch schon versucht: Packe das Zitat in den Link, und formatiere diesen wie gewünscht.

Das habe ich damals in den verschiedensten Variationen ausprobiert - valide und (in)valide : P Leider ohne den gewünschten Erfolg.

Das Problem sind die voneinander unterschiedlich ausgerichteten Zeilen "Zitat" (linksbündig) und "Autor" (rechtsbündig).
Zudem sollen sich aber beide Zeilen auf einmal UND der Rahmen des Divs verfärben.
Beide Zeilen aber getrennt von einander zu formatieren, also
<div align="left"><a>Zitat</a><div><br />
<div align="right"><a>Autor</a><div>
bringt auch einen getrennten MouseOver.
Möchte ich aber beide Zeilen aufeinmal ansprechen, die Ausrichtung aber beibehalten, bleibt mir kaum etwas anderes übrig.
//Zu genau dieser Frage hatte ich damals eigens einen Thread erstellt - ohne passender Lösung afaik...

Aber warum ist denn nun die untere Tabelle auf
http://localhost/design_b_php/kontakt.php?style=7
im IE eingerückt?!

In dem Sinne,
Ser4phiM

[wahsaga]

hi,

Das Problem sind die voneinander unterschiedlich ausgerichteten Zeilen "Zitat" (linksbündig) und "Autor" (rechtsbündig).

Q darf innerhalb von A vorkommen, CITE darf innerhalb von A vorkommen.

Zudem sollen sich aber beide Zeilen auf einmal UND der Rahmen des Divs verfärben.

Wenn du noch mal vom Div redest, gibt's Haue, einverstanden?

Beide Zeilen aber getrennt von einander zu formatieren, also
<div align="left"><a>Zitat</a><div><br />
<div align="right"><a>Autor</a><div>
bringt auch einen getrennten MouseOver.

Dann tu's halt nicht.

Möchte ich aber beide Zeilen aufeinmal ansprechen, die Ausrichtung aber beibehalten, bleibt mir kaum etwas anderes übrig.

NNatürlich, dir bleibt jede Menge anderes übrig.

Schreibe dir jetzt bitte folgendes auf ein Blatt Papier:

"HTML zeichnet die Struktur aus.
CSS regelt die Darstellung."

Dann hältst du dir dieses Blatt Papier vor die Stirn, und schlägst so lange mit der Hand davor - bis du das endlich im Schädel hast ...

Aber warum ist denn nun die untere Tabelle auf
http://localhost/design_b_php/kontakt.php?style=7
im IE eingerückt?!

Schick mir deinen Rechner vorbei - Porto zahlst du! - dann schaue ich vielleicht mal nach, was auf deinem localhost los ist.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,

Schick mir deinen Rechner vorbei - Porto zahlst du! - dann schaue ich »» vielleicht mal nach, was auf deinem localhost los ist.

Um das Problempotential des eigenen Rechners auszuschließen, ließ ich den Fehler von 3 weiteren unabhängigen Rechnern bestätigen. An meinem kanns nicht liegen - aber was kann deiner, was meiner und die der anderen nicht können?! Leider sagst du nichts über die Darstellung bei _dir_ aus, aber deinem Kommentar nach zu urteilen, tritt bei dir dieses Problem nicht(?) auf.

In dem Sinne,
Ser4phiM

[wahsaga]

hi,

Schick mir deinen Rechner vorbei - Porto zahlst du! - dann schaue ich »» vielleicht mal nach, was auf deinem localhost los ist.

Um das Problempotential des eigenen Rechners auszuschließen, ließ ich den Fehler von 3 weiteren unabhängigen Rechnern bestätigen. An meinem kanns nicht liegen - aber was kann deiner, was meiner und die der anderen nicht können?!

Deiner kann etwas, was meiner nicht kann - auf deinen _localhost_ zugreifen ...

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,

oh... das ist mir jetzt aber peinlich : )

Nach etlichem posten des Links, um wieder zum Thema zu kommen, hab ich gar nicht mhr darauf geachtet, aus welchem Tab ich kopiere : P

http://roman.abakus-world.de/design_b_php/kontakt.php?style=7

So, nun ists der Richtige *schäm*

In dem Sinne,
Ser4phiM

PS: Wenn man von der oben genannten Seite auf "Startseite" wechselt, wird der Text in der Mitte ebenfalls nicht symmetrisch angezeigt. Ist es dasselbe Problem, dessen Lösung immer noch in den Sternen steht?

[Ser4phiM]

Habe blöderweise auf den 2. Beitrag dieses Threads geantwortet, möcht aber vermeiden, dass man meinen post übersieht:

Hallo wahsaga,
»»Fehler beseitigen, dann kann man weitersehen.

Da hält sich jemand nicht an seinen Vorschlag ; )
http://roman.abakus-world.de/design_b_php/kontakt.php?style=1
ist nun, abgesehen von den unkonformen hidefoci (sg Fokus, pl Foki?) valide.

Auch das Zitat sieht nun so aus
<a style="display:block;"><cite>et cetera pp</cite><br />
      <cite style="text-align:right;">( o'lala )</cite>

Leider bewirkt das style="text-align:right;" nichts, der Autor wird links ausgerichtet : |

In dem Sinne,
Ser4phiM

PS: Sehen wir denn beim Ursprungsproblem weiter?

[wahsaga]

hi,

Auch das Zitat sieht nun so aus
<a style="display:block;"><cite>et cetera pp</cite><br />
      <cite style="text-align:right;">( o'lala )</cite>

Leider bewirkt das style="text-align:right;" nichts, der Autor wird links ausgerichtet : |

Cite ist ein Inline-Element, also nur so breit wie es sein Inhalt erfordert - in etwas, was sowieso links und rechts keinen Platz mehr frei hat, etwas horizontal auszurichten, ist aber schlecht möglich.

Cite auch noch display:block verpassen.

gruß,
wahsaga

[Ser4phiM]

Hallo wahsaga,
Vielen Dank, nun klappts und ist auch noch valide (abgesehen von den hidefoci).
Schade nur, dass ich solche Hinweise nicht schon damals bekommen habe, dann hätten wir uns die Diskussion darüber sparen und uns ums eigentliche Problem, die eingerückte Tabelle im IE, kümmern können.

Hier nochmal die Adresse:
http://roman.abakus-world.de/design_b_php/kontakt.php?style=7
Hast du da auch schon einen Verdacht oder eine Vermutung?
Oder vielleicht bezüglich der (Un)Symmetrie, die man unter Worte -> Roman, bzw schon auf der Startseite erkennen kann?

Vielleicht ist es noch erwähnenswert, dass ich eine layout.css habe, die wie folgt aussieht:

#links_menu {
z-index : 1;
float : left;
position : relative;
top : 37px;
margin-left : 2px;
width : 100px;
min-width : 100px;
min-height : 370px;
}

#rechts_menu {
z-index : 1;
float : right;
position : relative;
top : 37px;
margin-right : 2px;
width : 100px;
min-width : 100px;
min-height : 370px;
}

#content {
margin-right : auto;
margin-left : auto;
text-align : center;
position : relative;
top : 37px;
min-width : 300px;
}

Ich habe versucht, mich an den Beispielen auf http://d-graff.de/selfhtml/dreidivs.html zu orientieren, ob ich aber nun etwas falsch gemacht habe und die Unsymmetrie daher stammt, kann ich leider nicht sagen : |

In dem Sinne,
Ser4phiM

[Ser4phiM]

Hallo wahsaga,
»»Fehler beseitigen, dann kann man weitersehen.

Da hält sich jemand nicht an seinen Vorschlag ; )
http://roman.abakus-world.de/design_b_php/kontakt.php?style=1
ist nun, abgesehen von den unkonformen hidefoci (sg Fokus, pl Foki?) valide.

Auch das Zitat sieht nun so aus
<a style="display:block;"><cite>et cetera pp</cite><br />
      <cite style="text-align:right;">( o'lala )</cite>

Leider bewirkt das style="text-align:right;" nichts, der Autor wird links ausgerichtet : |

In dem Sinne,
Ser4phiM

PS: Sehen wir denn beim Ursprungsproblem weiter?