bech: Chrome, Firefox, Safari super - nur IE macht Probleme

Hallo,

ich habe heute gemerkt, dass meine Homepage Probleme mit der Interpretation des IE macht.

Dabei habe ich mit div-Boxen gearbeitet, welche überall bestens funktionieren.
Jedoch verschlägt mir der IE das Design. Ich habe auch das Gefühl, dass der Padding-Begriff völlig anders interpretiert wird, da in den 3 kleinen Bannern die Bilder auch in einem völlig anderem Format dargestellt werden.

Ich hatte den margin-Befehl in verdacht, da ich ausschließlich von links und oben die div-Boxen positioniert habe, aber auch eine Korrektur der anderen beiden half nicht.

Habt ihr eine Idee woran es liegen könnte?

Hierfür schnell meinen Grundaufbau

<div id="all">

<div id="header">

<div id="teamlogo">
  </div>
  <div id="navigation">
  </div>
  <div id="banner_main">
  </div>
  <div id="banner_sub">
   <div id="banner_sub1">
   </div>
   <div id="banner_sub2">
   </div>
   <div id="banner_sub3">
   </div>
  </div>
  <div id="plugin_twitter">
  </div>
 </div>

<div id="main_left">
  <h1 class="news">NeWS</h1>
 </div>

<div id="main_right">
  <div id="mright1">
  </div>
  <div id="mright2">
  </div>
  <div id="mright3">
  </div>
  <div id="mright4">
  </div>
  <div id="mright5">
  </div>
 </div>

<div id="footer">
 </div>

<div id="social_nw">
  kleine box an der seite
 </div

</div>

DANKE FÜR EURE HILFE

(Die CSS kann ich gern mitsenden, wenn gewünscht)

  1. (Die CSS kann ich gern mitsenden, wenn gewünscht)

    Nachdem du extra noch auf padding usw. hinweist, bin ich ja fast schon traurig darüber dass du wirklich dachtest, mit leerem HTML könnte jemand sehen wo dein Problem ist.

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>

      <link rel="shortcut icon" href="pic/favicon.ico">

      <TITLE>Team Biketech24</TITLE>

      <link rel="stylesheet" type="text/css" href="jscss/news.css">

      </head>

      <body>

      <div id="all">

      <div id="header">

      <div id="teamlogo">
          <?php $datei1 = "inc/page/teamlogo.inc"; include $datei1; ?>
        </div>

      <div id="navigation">
         <?php $datei1 = "inc/navigation.inc"; include $datei1; ?>
        </div>

      <div id="banner_main">
         <?php $datei1 = "inc/banner_main.inc"; include $datei1; ?>
        </div>

      <div id="banner_sub">

      <div id="banner_sub1">
          <?php $datei1 = "inc/artikel_banner1.inc"; include $datei1; ?>
         </div>

      <div id="banner_sub2">
          <?php $datei1 = "inc/biketech24werbung.inc"; include $datei1; ?>
         </div>

      <div id="banner_sub3">
          <?php $datei1 = "inc/artikel_banner3.inc"; include $datei1; ?>
         </div>

      </div>

      <div id="plugin_twitter">
         <?php $datei1 = "inc/plugin_twitter.inc"; include $datei1; ?>
        </div>

      </div>

      <div id="main_left">
        <h1 class="news">NeWS</h1>

      <?php $datei1 = "archiv/1207/prev120721.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120714_1.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120714_2.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120714.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120707.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120701.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1207/prev120701_2.inc"; include $datei1; ?>
        <?php $datei1 = "archiv/1206/prev120630.inc"; include $datei1; ?>

      </div>

      <div id="main_right">

      <div id="mright1">
          <?php $datei1 = "inc/sponsoren.inc"; include $datei1; ?>
        </div>

      <div id="mright2">
         <?php $datei1 = "inc/randnotiz.inc"; include $datei1; ?>
        </div>

      <div id="mright3">
         <?php $datei1 = "inc/plugin_facebook.inc"; include $datei1; ?>
        </div>

      <div id="mright4">
         <?php $datei1 = "inc/plugin_wetter.inc"; include $datei1; ?>
        </div>

      <div id="mright5">

      </div>

      </div>

      <div id="footer">

      <?php $datei1 = "inc/page/footer.inc"; include $datei1; ?>

      </div>

      <div id="social_nw">
        <?php $datei1 = "inc/page/social_nw.inc"; include $datei1; ?>
       </div

      </div>

      </body>
      </html>

      CSS:

      #all {
      border: 0px solid #000000;
      position: relative;
      margin: 0px auto auto auto;
      height: 3270px;
      width: 1000px;
      color: #666666;
      background-color:#131415;
      }

      #header {
      border: 0px solid #00FF00;
      position: relative;
      margin: 0px 0px 0px 0px;
      height: 150px;
      width: 1000px;
      background-color:#131415;
      }

      #teamlogo {
      border: 0px solid #000000;
      position: absolute;
      margin: 30px 0px 0px 20px;
      height: 100px;
      width: 960px;
      background-color:#131415;
      }

      #navigation {
      border: 0px solid #FF0000;
      position: absolute;
      margin: 130px 0px 0px 0px;
      height: 30px;
      width: 980px;
      background-color:#393;
      overflow: visible;
      z-index: 5;
      padding:10px;
      }

      #banner_main {
      border: 0px solid #00ffff;
      position: absolute;
      margin: 200px 0px 0px 20px;
      height: 420px;
      width: 960px;
      background-color:#f1f1f1;
      z-index: 3;
      }

      #plugin_twitter {
      border: 0px solid #000000;
      position: absolute;
      margin: 640px 0px 0px 0px;
      height: 30px;
      width: 1000px;
      background-color: #131415;
      z-index: 2}

      #banner_sub {
      border: 1px black;
      position: absolute;
      margin: 690px 0px 0px 20px;
      height: 200px;
      width: 960px;
      background-color: black;
      z-index: 3}

      #banner_sub1 {
      border: 20px solid #131415;
      position: absolute;
      margin: 1px 0px 0px -20px;
      height: 138px;
      width: 279px;
      background-color: #131415;
      z-index: 3;
      }

      #banner_sub2 {
      border: 20px solid #131415;
      position: absolute;
      margin: 0px 0px 0px 300px;
      height: 140px;
      width: 300px;
      background-color: #131415;
      }

      #banner_sub3 {
      border: 20px solid #131415;
      position: absolute;
      margin: 0px 0px 0px 640px;
      height: 140px;
      width: 300px;
      background-color: #131415;
      z-index: 3;
      }

      #main_left {
      border: 0px solid #000000;
      background-color:#f1f1f1;
      font-family: verdana, Trebuchet MS, Arial;
      color: #666666;
      height: 2300px;
      width: 619px;
      position: absolute;
      margin: 722px 0px 0px 0px;
      padding-left: 20px;
      padding-right: 20px;
      z-index: 4;
      }

      #main_right {
      border: 1px solid #000000;
      position: absolute;
      font-family: verdana, Trebuchet MS, Arial;
      font-weight: normal;
      color: #666;
      background-color: #f1f1f1;
      margin: 721px 0px 0px 659px;
      height: 2300px;
      width: 300px;
      padding-left: 20px;
      padding-right: 20px;
      z-index: 4;
      }

      #mright1 {
      border: 0px solid #000000;
      width: 318px;
      padding-top: 10px;
      }

      #mright2 {
      border: 0px solid #000000;
      width: 318px;
      padding-top: 10px;
      margin: 0 auto;
      }

      #mright3 {
      border: 0px solid #000000;
      width: 318px;
      padding-top: 10px;

      }

      #mright4 {
      border: 0px solid #000000;
      width: 318px;
      padding-top: 10px;
      }

      #mright5 {
      border: 0px solid #000000;
      width: 318px;
      padding-top: 10px;
      }

      #footer {
      border:0px solid #FF0000;
      position: absolute;
      margin: 3022px 0px 0px 0px;
      height: 100px;
      width: 1000px;
      background-color:#232425;
      z-index: 5;
      }

      #social_nw {
      border: 0px solid #FF0000;
      position: fixed;
      margin: -102px 0px 0px 1015px;
      height: 170px;
      width: 60px;
      background-color:#343536;
      border-top-right-radius:20px;
      border-bottom-left-radius:10px;
      border-bottom-right-radius:10px;
      }

      So....nur weils so lang war, blieb das bisher aus.

      1. @@bechi:

        nuqneH

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

        Also Quirksmodus.

        Qapla'

        --
        Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        1. @@bechi:

          nuqneH

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          Also Quirksmodus.

          Qapla'

          Okay der Quirkmodus ist mir jetzt klar.
          Doctype Zeile habe ich ersetzt,dennoch habe ich unangenehme Phänomene.

          • Zum einen haben einige Bilder einen blauen Border - andere widerrum nicht.
          • Zum anderen läuft die Twitterzeile nicht in ihrem vorgegebenem Fenster.
          • Und die Navigationszeile spielt auch noch ein wenig verrückt.

          Wie kann ich diese Dinge beheben?

          Gruß&Danke

          1. Hi,

            • Zum einen haben einige Bilder einen blauen Border - andere widerrum nicht.

            Sind manche davon vielleicht Nachfahrenelemente eines Links - andere wiederum nicht …?

            • Zum anderen läuft die Twitterzeile nicht in ihrem vorgegebenem Fenster.

            Na sowas.

            • Und die Navigationszeile spielt auch noch ein wenig verrückt.

            Wie kann ich diese Dinge beheben?

            Fehler beseitigen, danach ggf. weiteres Debugging betreiben. (Tools wie bspw. Firebug helfen dabei oft schon viel.)

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
          2. @@bechi:

            nuqneH

            • Zum anderen läuft die Twitterzeile nicht in ihrem vorgegebenem Fenster.

            Das Problem ist, dass sie überhaupt läuft.

            Zu beachten wäre auch, dass Twitter sein Logo geändert hat und „t“ und „twitter“ nicht mehr verwendet werden sollen.

            Die Automarke heißt übrigens „Škoda“.

            Qapla'

            --
            Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
            1. @@bechi:

              nuqneH

              • Zum anderen läuft die Twitterzeile nicht in ihrem vorgegebenem Fenster.

              Das Problem ist, dass sie überhaupt läuft.

              Alles klar den Wink habe ich verstanden ;-)

              Zu beachten wäre auch, dass Twitter sein Logo geändert hat und „t“ und „twitter“ nicht mehr verwendet werden sollen.

              Die Automarke heißt übrigens „Škoda“.

              Danke für die beiden Tipps/Hinweise.

              Dennoch hätte ich die ein oder andere frage.
              Durch das angeben der URL beim Doctype löste sich auf den meisten Seiten das Problem: Lediglich hier nicht: http://www.team-biketech24.de/rider.php?content=christian
              Woran kann das liegen?

              Weiter werden einige Images immer noch blau umrandet. Welchen Hintergrund hat das?

              Die Problem-Beseitigungs-Hexe sagte, geöffnete Tags wie img, br müssen nicht geschlossen werden, weil kein DT xhtml verwandt wird? Da wurde mir mal anderes gelehrt...

              Nun bleibt für mich noch die Frage, warum in der Navileiste das margin SO unterschiedlich interpretiert wird.passe ich das ganze jetzt für den IE an, siehts bei den anderen bescheiden aus.
              Gibts denn noch eine Hilfsoption dafür?

              Runde Ecken von Div-Boxen werden ja durch den Befehl:
              -moz-border-radius: 15px; (firefox)
              border-radius: 15px; (sonstiges)
              ermöglicht.
              Gibt es diese möglichkeit auch für IE?

              Gruß

              Qapla'

              1. @@bechi:

                nuqneH

                • Zum anderen läuft die Twitterzeile nicht in ihrem vorgegebenem Fenster.

                Das Problem ist, dass sie überhaupt läuft.

                Alles klar den Wink habe ich verstanden ;-)

                Zu beachten wäre auch, dass Twitter sein Logo geändert hat und „t“ und „twitter“ nicht mehr verwendet werden sollen.

                Die Automarke heißt übrigens „Škoda“.

                Danke für die beiden Tipps/Hinweise.

                Dennoch hätte ich die ein oder andere frage.
                Durch das angeben der URL beim Doctype löste sich auf den meisten Seiten das Problem: Lediglich hier nicht: http://www.team-biketech24.de/rider.php?content=christian
                Woran kann das liegen?

                Weiter werden einige Images immer noch blau umrandet. Welchen Hintergrund hat das?

                --> gelöst.der rest leider noch nicht.

                Die Problem-Beseitigungs-Hexe sagte, geöffnete Tags wie img, br müssen nicht geschlossen werden, weil kein DT xhtml verwandt wird? Da wurde mir mal anderes gelehrt...

                Nun bleibt für mich noch die Frage, warum in der Navileiste das margin SO unterschiedlich interpretiert wird.passe ich das ganze jetzt für den IE an, siehts bei den anderen bescheiden aus.
                Gibts denn noch eine Hilfsoption dafür?

                Runde Ecken von Div-Boxen werden ja durch den Befehl:
                -moz-border-radius: 15px; (firefox)
                border-radius: 15px; (sonstiges)
                ermöglicht.
                Gibt es diese möglichkeit auch für IE?

                Gruß

                Qapla'

  2. Hi,

    ich habe heute gemerkt, dass meine Homepage Probleme mit der Interpretation des IE macht.

    lass mich raten: Dein Dokument hat keine DOCTYPE-Angabe. Du betreibst den IE also im Quirks Mode, in dem er die Bugs des IE5 nachahmt, so gut er kann. Einer von diesen Bugs ist die fehlerhafte Berechnung des Box Model.

    (Die CSS kann ich gern mitsenden, wenn gewünscht)

    Darum geht es doch wohl primär?!

    Abgesehen davon ist auch das HTML schwer krank. Diagnose: Divitis.
    Meinst du nicht, dass HTML eine ganze Fülle semantisch sinnvollerer, besser passender Elemente bereithält als nur aussagefreie neutrale Blockelemente?

    Ciao,
     Martin

    --
    Die letzten Worte des Hardware-Bastlers:
    Das Netzkabel lass ich wegen der Erdung lieber dran.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(