Ankündigung

Einklappen
Keine Ankündigung bisher.

IE6 verwirft das Design

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • IE6 verwirft das Design

    hallo zusammen

    Leider habe ich noch wenig Erfahrung in HTML und CSS, nun stehe ich vor einem Problem wo ich einfach nicht mehr weiter weiss.
    Meine Seite Http://booom.ch wird im IE7 richtig dargestellt, mit dem IE6 wird aber das ganze Design über den Haufen geworfen, die Layer sind plötzlich übereinader gestapelt und zentriert, die Seite ist im IE7 zentriert im IE6 plötzlich linksbündig.

    Wäre super wenn mir da jemand den richtigen Tip geben könnte.

    hier das CSS, Danke!


    * { margin:0; padding:0; font-size: 100%; }

    html { height: auto;
    }

    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #000000;
    font-size: 62.5%;
    padding: 0px;
    }

    a {
    color: #666666;
    }

    a:link {
    color: #666666;
    }

    a:active {
    color: #666666;
    }

    a:visited {
    color: #666666;
    }

    a:hover {
    color: #ff6600;
    }

    ul li {/*list-style: none;*/
    padding: 0em 0em 0em 0em;
    margin:0em 0em 0em 1.1em;}

    ol li {/*list-style: none;*/
    padding: 0em 0em 0em 0em;
    margin:0em 0em 0em 1.7em;}

    h1 {font-size:1.2em;
    margin: 1.1em 0em 0.3em 0em;
    padding: 0em 0em 0em 0em;
    color:#FF6600;
    font-weight:bold;
    }

    /* no border */
    fieldset, img { border:0; }

    /* needed for safari */

    /* mm overwritten in special cases */

    select, input, textarea {
    font-size: 99%
    }

    p.bodytext {
    margin:0.4em 0em 1.2em 0em;
    padding:0em 0em 0em 0em;
    color: #999999;
    }

    #pageContainer {
    margin:auto;
    background-color: #00FF00;
    }

    #pageContainerLeftow {
    /* background-image: url(../media/4.jpg); */
    background-position: left;
    background-color: #0000FF;
    background-repeat: repeat-y;
    font-size: 100%;
    }



    #page {
    width: 790px;
    margin: 0 auto;
    }

    #main {
    background-image: url(../media/2.gif);
    background-repeat: no-repeat;
    clear:both;
    list-style-type: none;
    width: auto;
    z-index: 10;
    overflow:hidden;
    }

    #colRightContainer {
    float:right;
    width: 85%;
    z-index: 10;
    padding-top: 0px;
    }

    #colRight {
    margin-left: 0.5em;
    z-index: 10;
    }

    #colLeftContainer {
    width:auto;
    z-index: 10;
    height: 380px;
    padding:10px;
    }

    #colLeft {
    z-index: 10;
    }

    #footer {
    font-size: 1.2em;
    text-align: right;
    clear:both;
    width: 100%;
    }

    #logoContainer {
    height: 10px;
    }

    #logo {
    margin: 0em 0em 0em 2em;
    padding: 0em 0em 0em 0em;
    }

    /** Main Navigation

    ------------------------------*/

    #logo-top {
    background-image: url(../media/2.gif);
    background-repeat: no-repeat;
    background-position: right;
    height: 140px;
    margin: 0 auto;
    }

    #nav {
    width: 100%;
    height: 160px;
    margin: 20px -20px;
    float: left;
    font-size: 1.5em;
    }

    #nav ul {
    margin: 0em;
    padding: 140px;
    list-style: none;
    text-align: left;
    }

    #nav li {
    float:left;
    }

    #nav a {
    text-decoration: none;
    display: block;
    padding: 0em 0em;
    border-style: solid;
    border-color: #FF6600;
    border-width: 0px 0px 0px 0px;
    /* bottom */
    }

    #nav a.l1-no {
    background-color: #ff6600;
    color: #ff6600;
    }

    #nav a.l1-no:hover {
    background-color: #ff6600;
    color: #ff6600;
    }

    #nav a.l1-act {
    background-color: #666666;
    color: #C97016;
    }

    #mainnavi {
    border-style: solid;
    border-color: #FF6600;
    border-width: 0px 0px 0px 0px;
    font-size: 1em;
    }

    #mainnavi ul {
    margin: 0em;
    padding: 0em;
    list-style: none;
    display: inline;
    }

    #mainnavi li {
    padding: 0;
    margin: 0;
    }

    #mainnavi a {
    text-decoration: none;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    border-color: #ff6600;
    display: block;
    padding: 0.6em 1em;
    }

    #mainnavi a.l2-no{
    background-color: #ff6600;
    color: #ff6600;
    }

    #mainnavi a.l2-no:hover {
    background-color: #333333;
    color: #00FF00;
    }

    #mainnavi a.l2-act {
    background-color: #00FF99 ;
    }

    .headerimg {
    width: 100%;
    }

    /** Breadcrumb

    ------------------------------*/
    #breadcrumb {
    margin: 0 0 2em 0;
    padding: 0px 0px 0px 12px;
    font-size: 1.2em;
    }

    #breadcrumb a {
    text-decoration: none;
    color: #999999 }

    #pageFunctions {
    margin: 0;
    padding: 0;
    float: right;
    text-align: right;
    width: 100%;
    }

    #pageFunctions li {
    display: inline;
    list-style: none;
    }

    #pageFunctions li a {
    text-decoration: none;
    }



    /** Container in Container

    ------------------------------*/

    .subContainer {
    width: 100%;
    padding: 0 1px 0 1px;
    margin: 0 -1px 0 -1px;
    overflow:hidden;
    }



    .subLeftContainer {
    float: left;
    overflow: hidden;
    padding: 10px 0px 0px 0px;
    }


    .subRightContainer {
    padding: 20px 0px 10px 0px;
    margin:0em 0em 0em 0em;
    float: right;
    overflow: hidden;
    }

    /* .breadCrumbContainer, */

    .contentLeftContainer {
    width: 40.00%;
    height: 360px;
    }

    .contentRightContainer {
    width: 60.00%;
    height: 360px;
    }

    /* .layoutChangesContainer,.loginContainer { width: 49.999%; }*/

    .subLeft {
    padding: 0 10px 0 10px;
    margin: 0 0 0 0px;
    overflow: hidden;
    }

    .subRight {

    padding: 0px 10px 0 10px;
    margin: 20px 10px 0 10px;
    overflow: visible;
    }

    /** Content
    ------------------------------*/

    #content {
    font-size: 1.2em; /* set font-size in the contentarea to 12px */
    margin: 0em 1em 0em 1em;
    }

    .contentLeftContainer .subLeft {
    padding-right: 1em;
    }

    .contentRightContainer .subRight {
    }

    #footer {
    color:#333333;
    margin: 0;
    background: none;
    padding: 0 0 0 0;
    line-height: 2em;
    }


    /* Clearfix-Methode zum Clearen der Float-Umgebungen */

    .col-clearing:after {
    /* content: "."; */
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    /* needed for Safari */
    .col-clearing { display: block; }

    /* Overflow-Methode zum Clearen der Float-Umgebungen */
    .floatbox { overflow:hidden; }

    /* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
    #ie_clearing { display: none }

  • #2
    AW: IE6 verwirft das Design

    Diese erste Zeile wirft ihn in den Quirksmode, so dass er das Boxmodell nicht richtig anzeigt:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    Sieh mal hier ziemlich unten unter "Der XML-Prolog" nach.

    sigpic

    sejumas CSS-Einsteigerkurs

    Kommentar


    • #3
      AW: IE6 verwirft das Design

      Sejuma
      Danke für die schnelle Antwort, nur leider komme ich immer noch nicht weiter, egal ob ich die Zeile weglasse oder nicht, am Layout (IE6 & IE7) ändert sich nichts. Wie komme ich da weiter?
      Hier noch mein html zur ansicht:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
      <title>Seitentemplate</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <!-- Fügen Sie hier ihre Meta-Daten ein -->
      <link href="css/screen.css" rel="stylesheet" type="text/css" media="all" />
      <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
      [if lte IE 7]
      <link href="css/ie.css" rel="stylesheet" type="text/css" />
      [endif]

      </head>
      <body>
      <!-- ###DOCUMENT_BODY### begin -->
      <div id="page" class="hold_floats">
      <div id="main">
      <div>
      <!-- navigation -->
      <!-- <div id="logo-top">
      </div> -->
      <div id="nav">
      <!-- ###MAINNAVI### begin -->
      <ul>
      <li><a href="http://booom.ch" class="l2-no">Flugzeugpark</a></li>
      <li><a href="#" class="l2-act">Flugberichte</a></li>
      <li><a href="#" class="l2-no">Flugsicherheit</a></li>
      </ul>
      <!-- ###MAINNAVI### end -->
      </div>
      <!-- Right Column -->
      <div id="colRightContainer">
      <div id="colRight" class="col-clearing">
      </div>
      <!-- ###HEADERIMG### begin -->
      <!-- ###HEADERIMG### end -->
      <!-- Content -->
      <a name="content"></a> <!-- Skiplink-Anker: Content -->
      <div id="content">
      <div class="subContainer">
      <div class="subLeftContainer contentLeftContainer">
      <div class="subLeft">
      <!-- ###CONTENT### begin -->
      Inhalt in der linken Spalte<br /><br />
      <!-- ###CONTENT### end -->
      </div>
      </div>
      <div class="subRightContainer contentRightContainer">
      <div class="subRight">
      <!-- ###CONTENT_RIGHT### begin -->
      Inhalt in der rechten Spalte
      <!-- ###CONTENT_RIGHT### end -->
      </div>
      </div>
      </div>
      </div>
      <!-- <!-- Breadcrumb --
      <div id="breadcrumb" class="subContainer">
      <!-- ###BREADCRUMB### begin --
      <a href="#">Fliegen</a> &gt;
      <a href="#">Flugberichte</a> &gt;
      <a href="#">KISI in den Pyrenäen</a>
      <!-- ###BREADCRUMB### end --
      </div> -->
      </div>
      </div>
      <div id="colLeftContainer">
      <div id="colLeft" class="col-clearing" >
      <div id="logoContainer">
      </div>
      <!-- navigation -->
      <div id="mainnavi">
      <!-- ###LMAINNAVI### begin -->
      <ul>
      <li><a href="#" class="l1-no">Startseite</a></li>
      <li><a href="#" class="l1-no">Aktuelles</a></li>
      <li><a href="#" class="l1-act">Fliegen</a></li>
      <li><a href="#" class="l1-no">Vereinsimpressionen</a></li>
      <li><a href="#" class="l1-no">Kontakt</a></li>
      </ul>
      <!-- ###LMAINNAVI### end -->
      </div>
      </div>
      </div>
      <div class="Stil2" id="footer">
      &copy; ###YEAR### Ihre Firma, Letzte Änderung ###LAST_CHANGE### </div>
      </div>
      </div>
      <!-- ###DOCUMENT_BODY### end -->
      </body>
      </html>

      Kommentar


      • #4
        AW: IE6 verwirft das Design

        Hi,
        du wirst Dein Seitenkonzept ohnehin überarbeiten müssen, denn overflow:hidden ist ganz böse... Längere Seiten wie http://booom.ch/index.php?id=5 werden hierdurch (bereits in einem Standardfenster) abgeschnitten.

        Und räume bei dieser Gelegenheit Dein CSS auf - ist so viel zu unübersichtlich und enthält auch einiges unnötige wie z.B. z-index.

        Gruß
        Ingo
        Ingo Webdesign

        Kommentar

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 57.255   Beiträge: 432.197   Mitglieder: 29.677   Aktive Mitglieder: 21
        Willkommen an unser neuestes Mitglied, Euro_crem.

        Online-Benutzer

        Einklappen

        453 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 452.

        Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎