IE und Boxmodell ...

**kaffee** · 16.11.2005 18:51

Hallo zusammen,
der Internet Explorer zerschiesst mir mal wieder das Design und ich hoffe ihr könnt mir da kompetent wie immer raushelfen.

Folgendes Problem ergibt sich bei meiner HP:
Dass der IE Abstände im Boxenmodell anderst versteht is ja soweit bekannt, also habe ich das gesamte Design verbreitert, damit auch alle enthaltenen Div's darin Platz haben (vorher hat er die Zeilen zu früh umgebrochen, jetzt sind genau so viele Kästchen wie ich möchte in jeder Zeile). Nur schieben die enthaltenen Divs jetzt den zugrunde liegenden body so weit auf, dass die obere Leiste da nicht mehr nachkommt.
Wie umgehe ich das? Habe mir schon einige Themen dazu durchgelesen aber keine vorgeschlagene Lösung (die sich ausschließlich auf den angegebenen doctype bezogen) hat etwas geändert.

ps: da mein browser grade zickt muss ich den quelltext ins nächste post reinpacken sry...

Danke schonmal!

**kaffee** · 16.11.2005 18:58

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>haa-tee-tee-pee-//wee-wee-wee-gummib&auml;rli-tante.dee-eee</title>
    <link rel="stylesheet" type="text/css" href="../default.css">
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  </head>
  <body>

  <div class="general">

    <div class="headline"><img src="./pics/banner.gif" width="700" height="70" alt="Banner"></div>

    <div class="body">
      <div class="bildcontainer" style="background-image: url(./pics/001.jpg)"><a class="bestellen" href="../pics/gross/001.jpg">Bestellnummer 001</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/002.jpg)"><a class="bestellen" href="../pics/gross/002.jpg">Bestellnummer 002</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/003.jpg)"><a class="bestellen" href="../pics/gross/003.jpg">Bestellnummer 003</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/004.jpg)"><a class="bestellen" href="../pics/gross/004.jpg">Bestellnummer 004</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/005.jpg)"><a class="bestellen" href="../pics/gross/005.jpg">Bestellnummer 005</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/006.jpg)"><a class="bestellen" href="../pics/gross/006.jpg">Bestellnummer 006</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/007.jpg)"><a class="bestellen" href="../pics/gross/007.jpg">Bestellnummer 007</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/008.jpg)"><a class="bestellen" href="../pics/gross/008.jpg">Bestellnummer 008</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/009.jpg)"><a class="bestellen" href="../pics/gross/009.jpg">Bestellnummer 009</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/010.jpg)"><a class="bestellen" href="../pics/gross/010.jpg">Bestellnummer 010</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/011.jpg)"><a class="bestellen" href="../pics/gross/011.jpg">Bestellnummer 011</a></div>
      <div class="bildcontainer" style="background-image: url(./pics/012.jpg)"><a class="bestellen" href="../pics/gross/012.jpg">Bestellnummer 012</a></div>
    </div>

    <div class="foot">

      <p class="buttonb">
      <a href="../index.html"><img src="back.gif" border="0" alt="zurueck"></a>
      </p>

      <p class="buttonn">
      <a href="bilder1.html"><img src="next.gif" border="0" alt="weiter"></a>
      </p>

    </div>

  </div>

  </body>
</html>

Code:

/* CSS STYLESHEET */
 
body  { background-color: #FFE4E1;
      }

div.general  { width: 700px;
               margin: 0 auto;
               border: 1pt solid #000000;
               background-color: #F7F7F7;
             }



div.headline  { width: 700px;
                height: 70px;
                background-color: #8B2252;
              }



div.body  { height: 500px;
            background-color: #F7F7F7;
          }



div.foot { width: 700px;
           clear: both;
           height: 70px;
           background-color: #8B2252;
         }

div.foot { width: 700px;
           clear: both;
           height: 70px;
           background-color: #8B2252;
         }



div.bildcontainer  { float: left;
                     width: 150px;
                     height: 150px;
                     border: 1px solid #8B2252;
                     background-color: #FFE4E1;
                     background-repeat: no-repeat;
                     background-position: center center;
                     margin: 10px;
                   }



p  { width: 620px;
     margin-left: 20px;
     margin-right: 20px;
     margin-bottom: 10px;
     text-align: justify;
   }


p.foot  { width: 200px;
          margin-left: 450px;
          padding-top: 35px;
        }


p.buttonn { margin-top: 10px;
            text-align: right; 
            position: relative;
            top: 0px; width: 50px; height: 50px; rigth: 0px;
            float: right;
          }


p.buttonb { margin-top: 10px;
            text-align: left;
            position: relative;
            left: 0px; top: 0px; width: 50px; height: 50px;
            float: left;
          }



h1  { font-family: Arial;
      font-size: 16pt;
      font-weight: bold;
      text-align: center;
      padding-top: 20px;
      padding-bottom: 10px;
      color: #8B2252;
    }


a  { text-decoration: none;
     color: #FFFFFF;
   }


a.text { text-decoration: none;
         color: #000000;
       }


a.bestellen  { display: block;
               width: 150px;
               height: 150px;
               text-align: center;
               font-size: 0.7em;
               color: #8B2252 !important; /* Wird damit "&#252;berschrieben" */
               text-decoration: none !important;
             }

**hero-master** · 17.11.2005 15:19

Hi

Zitat von kaffee

Folgendes Problem ergibt sich bei meiner HP:
Dass der IE Abstände im Boxenmodell anderst versteht is ja soweit bekannt,

Das ist so nicht ganz richtig

Der IE interpretiert das Boxmodell nur bis Version 5.5 falsch und im Quirksmode bei Version 6

Zitat von kaffee

Nur schieben die enthaltenen Divs jetzt den zugrunde liegenden body so weit auf, dass die obere Leiste da nicht mehr nachkommt.

Das Problem liegt bei den Rahmen des Containers nehm ich mal an, dadurch kommt es zum Abstand rechts

was du amchen könntest, ist einfach ein IE-Hack einbauen, der dann den Außenabstand um 1px reduziert.

**kaffee** · 18.11.2005 12:35

hero-master:
ja genau das war die lösung die mir vorschwebte nur leider weiss ich einfach nicht wie man einen solche 'hack' erstellt...
wenn du mir da weiterhelfen könntest...

**hero-master** · 18.11.2005 15:00

Zitat von kaffee

ja genau das war die lösung die mir vorschwebte nur leider weiss ich einfach nicht wie man einen solche 'hack' erstellt...
wenn du mir da weiterhelfen könntest...

klar

der "beste" und einfachste IE-Hack ist der Sternchenhack:

Code:

* html div#name {}

Diesen Hack interpretiert nur der IE (Version 5-6) und somit zeigt die Definitionen, die du darin machst nur der IE an

Mehr dazu mit anderen Hack-Varianten, findest du beispielsweise auch hier:
http://standards.webmasterpro.de/ind...CSS+Hacks.html

zur Startseite vom TP

Thema: IE und Boxmodell ...

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

IE und Boxmodell ...

Aktive Benutzer

Aktive Benutzer