CSS Layout in Internet Explorer

AlexS · 4 Juli 2009

Hallo,
ich ändere gerade unsere Vereinshomepage (früher mit Frames) in ein CSS-Layout (Anhang: Style.css). In Firefox wird soweit alles richtig angezeigt. Im Internet Explorer allerdings werden zum einen die "position:fixed" sowie die Ausrichtungs-Befehle scheinbar einfach ignoriert. Außerdem werden dort die Tabellen (Anhang: Willkommen.inc) statt untereinander hintereinander angezeigt.
Hier der Link, da könnt ihr es euch angucken: TTC Eschmar Homepage

Im Anhang sind die CSS und die inc-Datei mit den wohl fehlinterpretierten Angaben (könnt auch den Quelltext nachlesen).
Die Frage wäre nun, inwiefern die CSS-Angaben nun für den IE geändert werden müssen (z.b. mit )?
Alternativ wäre die Möglichkeit, irgendwie die Benutzung von Firefox zu erzwingen (z.b. indem die Portable-Version auch auf dem Server liegt und die Seite dann immer in dieser dargestellt wird?)?
Ich hoffe ihr könnt mir helfen
Mit freundlichen Grüßen und ein schönes Wochenende
Alex

Style.css:

Code:

@charset "ISO-8859-1"
<!--
        body  {background-image:url(Dateien/Bilder/Background.gif);}

        .twoColLiqLt #container {width: 100%;
                                 background-image:url(Dateien/Bilder/Background.gif);
                                 margin: 0 0;
                                 border: 0px solid #000000;
                                 text-align: center;}

        .twoColLiqLt #sidebar1 {position: fixed;
                                top: 0%; left: 0%;
                                float: left;
                                width: 15%;
                                background-image:url(Dateien/Bilder/Background.gif);
                                margin-top: 0,75%;
                                margin-left: 1%;
                                text-align: left;}

    .twoColLiqLt #header {position: fixed;
                              top:0;
                              width: 100%;
                              margin: 0 0 0 0;
                              padding: 0 0;
                              background-image:url(Dateien/Bilder/Background.gif);}


        .twoColLiqLt #mainContent {margin-top: 55px;
                                   widht: 100%;                                  
                                   background-image:url(Dateien/Bilder/Background.gif);}

        
        .clearfloat {clear:both;
                     height:0;
                     font-size: 1px;
                     line-height: 0px;}
-->

Willkommen.inc

Code:

<!--Ueberschriften-->       
        <table border="0" width=85% align="right" cellpadding="0">
          <tr>
            <td width=100%><p align="center"><font color="#990000" size="6"><b>Willkommen auf unserer Homepage</b></font></p></td>
          </tr>
        </table>  
<!--Wappen/Counter-->  
        <table border="0" width=85% align="right" cellpadding="0">
          <tr>
            <td width="68%" height="195"><br><img border="0" src="Dateien/Bilder/Vereinswappen.gif" width="285" height="274" align="right"></td>
            <td width="32%" height="195">
              <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
              <p><a href="http://www.andyhoppe.com/" target="_blank"><img src="http://www.andyhoppe.com/count/?s=mechanik&f=padded&id=1031569786" border="0" align="right"></a></p>
              <p>&nbsp;</td>
          </tr>
          <tr>
            <td width="68%" height="50">&nbsp;</td>
            <td width="32%" height="50">&nbsp;</td>
          </tr>
        </table>
<!--Durchlaufbanner-->
            <table border="0" width=85% height="1" align="center">
              <tr>
                <td width=30%>&nbsp;</td>
                <td width=40% height="1"><font color="#990000"><marquee behavior="scroll" scrolldelay="20">+++  Sommerpause  +++  Sommerpause  +++  Sommerpause  +++  Sommerpause  +++</marquee></font></td>
                <td width=15%>&nbsp;</td>
              </tr>
            </table>         
<!--Erste Mannschaft:-->         
      <table border="0" width=85% align="right" cellpadding="0">
        <tr>
          <td width=13% cellpadding="0">&nbsp;</td> 
          <td width=74%>
            <table border="0" width=100% cellpadding="0">
              <tr>
                <td width="22%" height="17"><font color="#990000">Kreisliga</font></td>
                <td width="20%" height="17"><b><font color="#000000">1. Herren</font></b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="21"><b><a href="mannsch1/04m1afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Zweite Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">1. Kreisklasse 1</font></td>
                <td width="20%" height="17"><b><font color="#000000">2. Herren</font></b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="21"><b><a href="mannsch2/04m2afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Dritte Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">2. Kreisklasse 1</font></td>
                <td width="20%" height="17"><b>3<font color="#000000">. Herren</font></b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="mannsch3/04m3afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Vierte Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">2. Kreisklasse 2</font></td>
                <td width="20%" height="17"><b><font color="#000000">4. Herren</font></b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="mannsch4/04m4afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Fünfte Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">3. Kreisklasse 1</font></td>
                <td width="20%" height="17"><b>5. Herren</b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="mannsch5/04m5afra.htm"><font color="#990000">&gt;&gt;mehr</font></a></b></td>
              </tr>
<!--Sechste Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">Hobbyklasse 2</font></td>
                <td width="20%" height="17"><b><font color="#000000">6. Herren</font></b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="mannsch4/04m4afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Jugend Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">2. Kreisklasse</font></td>
                <td width="20%" height="17"><b>Jugend</b></td>
                <td width="3%" height="17">-</td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="jugend1/04j1afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
<!--Schler Mannschaft-->
              <tr>
                <td width="22%" height="17"><font color="#990000">Kreisklasse</font></td>
                <td width="20%" height="17"><b>Sch&uuml;ler</b></td>
                <td width="3%" height="17"><b>-</b></td>
                <td width="22%" height="17"></td>
                <td width="20%" height="17"></td>
                <td width="13%" height="17"><b><a href="schueler/04s1afra.htm"><font color="#990000">>>mehr</font></a></b></td>
              </tr>
            </table>
          </td>
        <td width=13% cellpadding="0">&nbsp;</td>
      </tr>
    </table>
<!--Meldungen-->
<table border="0" width=85% align="right" cellpadding="0">
        <tr>
          <td width=15% cellpadding="0">&nbsp;</td> 
          <td width=75%>            
<table border="0" width=100% cellpadding="0">
              <tr>
                <td width="80%" height="30"><font color="#990000"><b>Ergebnisse vom TT-Kreistag 2009</b></font></td>
                <td width="20%" height="30">mehr unter <b><font color="#990000"><a href="aktuelles.htm"><font color="#990000">Nachrichten</font></a></font></b></td>
              </tr>
              <tr>
                <td width="80%" height="30"><font color="#990000"><b>1. Herren gewinnt das Finale der Relegation zur Bezirksklasse</b></font></td>
                <td width="20%" height="30">mehr unter <b><font color="#990000"><a href="aktuelles.htm"><font color="#990000">Nachrichten</font></a></font></b></td>
              </tr>
              <tr>
                <td width="80%" height="30"><font color="#990000"><b>Vereinsmeisterschaften 2009</b></font></td>
                <td width="20%" height="30">mehr unter <b><font color="#990000"><a href="aktuelles.htm"><font color="#990000">Nachrichten</font></a></font></b></td>
              </tr>
            </table>
          </td>
          <td width=10% cellpadding="0">&nbsp;</td>
        </tr>
      </table>

freakXHTML · 4 Juli 2009

Hallo,
ich bin selbst noch ein Anfänger, doch habe ich durch dieses Forum u.a. schon gelernt, dass hier die Tabelle fehl am Platz ist.

So eine benutzt man nur, wenn man wirklich tabellarisch Inhalt aufreihen möchte.

Du benutzt sie aber zur Layoutgliederung!!

Bis dann.

lg, freakXHTML

PS. Deine eigentliche Frage muss ich erfahrenden Mitgliedern überlassen

AlexS · 4 Juli 2009

Hallo,
danke schonmal hatte ich schon überlegt:)
Dann mache ich das erstmal:)

thuemmy · 5 Juli 2009

Das allerschlimmste, für jeden Browser, ist der fehlende Doctype am Anfang der Seite. Wenn kein Doctype angegeben wird, dann verhalten sich Browser nicht standardkonform, sondern so, wie sie meinen, dass es richtig ist.

Auch im CSS sind Fehler, sagt mir mein WebDeveloper. Beim überfliegen habe ich auf jeden Fall eine %-Angabe gefunden, die ein Dezimalkomma enthielt, CSS aber Dezimalpunkte erwartet.

Fazit, versuche erstmal die Fehler in HTML und CSS zu beseitigen. Eventuell haben sich dann schon die Darstellungsprobleme behoben.

Links für Dich:
SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei
HTML/XHTML/XML/WML Validierungsservice
The W3C CSS Validation Service
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Gruß thuemmy

AlexS · 5 Juli 2009

Hallo,
vielen Dank. Das aht schon sehr geholfen. Dass CSS-Layout wird nun akzeptiert. Allerdings werden leider immernoch die Tabellen alle hintereinander angezeigt. Sämtliche Tabellenformatierungen scheinen nicht beachtet zu werden. Hat dazu jemand eine Idee?
MfG
Alex

Link: TTC Eschmar Homepage

thuemmy · 5 Juli 2009

Also der Validator zeigt immer noch Fehler: HTML/XHTML/XML/WML Validierungsservice

Gruß thuemmy

AlexS · 5 Juli 2009

Hallo,
vielen Dank, jetzt klappt alles. Hatte cellpadding in nem td benutzt-.-'
Noch ein kleines Problem:
Der Link zu Nachrichten sollte blinken. Das tut er auch, aber die Unterstreichung tut es nicht. Hier der Quellcode des Abschnittes:

  
<blink><a href="Nachrichten-shtml" style="color:#990000">Nachrichten</a></blink>

Wies aussehen soll kann man unter TTC Eschmar Homepage sehen (aber selbst mit identischem Code klappts nicht...).
MfG
Alex

tarik02 · 5 Juli 2009

? ICh hab gerade mit dem Code versucht bei mir blinkt alles?

Die Zahl · 5 Juli 2009

tarik02 schrieb:
? ICh hab gerade mit dem Code versucht bei mir blinkt alles?

Das ist normal: Die Goldenen Regeln für schlechtes HTML - Alle Regeln. Regel #18 ...

Nein Spaß bei Seite. Also auf der Homepage von AlexS blinkt der Text "Nachrichten"... Ich nehme mal an, du hast bei dem Code-Übernahme was falsch gemacht (etwas nicht geschlossen etc).

Mfg

AlexS · 5 Juli 2009

Also wenn du nur den oben angegeben Text kopiert hast sollte der ganze Text blinken, weil der einzige Text darin ja eben das Wort "Nachrichten" ist:)

Hba ja auhc schon probiert, den gesamten Frame-Quelltext (ich darf das:) ) zu kopieren aber dann gehts voll daneben

Also falls noch jemandem was einfällt wäre schön sonst lass ich den Strich halt weg:)

Alex

CSS Layout in Internet Explorer

AlexS

Neues Mitglied

Anhänge

freakXHTML

Mitglied

AlexS

Neues Mitglied

thuemmy

Aktives Mitglied

AlexS

Neues Mitglied

thuemmy

Aktives Mitglied

AlexS

Neues Mitglied

tarik02

Mitglied

Die Zahl

Neues Mitglied

AlexS

Neues Mitglied

Neueste Beiträge