tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
5
ZUGRIFFE
320
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    sonnenscheinds sonnenscheinds ist offline Grünschnabel
    Registriert seit
    Aug 2011
    Beiträge
    4
    Hallo zusammen,
    die Seite steht soweit und auch die Darstellungsprobleme im IE sind fast behoben. Nur im IE 6 wird mir der Footer nicht angezeigt.

    Außerdem habe ich in verschiedenen Foren gelesen, dass der Opera eigentlich keine Probleme macht, aber bei meiner Site ist die Navi gestaucht.

    Wäre super, wenn jemand eine Idee hätte, wie ich das noch beheben kann.

    Die Site lautet: www.seo-bayern.com

    die ie6.css hat folgenden Inhalt:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    ]@charset "utf-8";
    /* CSS Document */
     
    div, h1, h2, h3, p {
        margin:0;
        padding:0;
        }
     
    a img {
        borderwidth: 0;
        border-style:solid; 
        }
        
    #navi ul li {
        padding-bottom: 15px;
    }
     
    div#rightcontent p {
        line-height: 1.3em;
    }

    Da ich davon ausgehe, dass der IE-Fehler mit DIV und Floating zusammen hängt, hier die CSS auf Navi und diesen Teil reduziert

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    
    /*umfließender Container*****************************************/
    div#wrapper {
        position: relative;
        width: 980px;
        border: 1px solid #E7DBC0;
    }
    /*ende***********************************************************/
    /*head-bereich***************************************************/
    div#oben {
        width: 980px;
        height: 145px;
        background-position: center top;
        border: 0;
    }
    /*headbereich-ende************************************************/
    /*navigation*****************************************************/
    div#navi {
        float: left;
        width: 245px;
        height: 584px;
        font-size: 0.75em;
        letter-spacing: 0.1em;
        background-image: url(images/navigation.png);
        background-repeat: no-repeat;
        background-position: left top;
        font-weight: normal;
        line-height: 1em;
    }
    #navi ul li {
        list-style-image: url(images/seo-icon-leer15.gif);
        list-style-position: outside;
        margin: 0 0 0 20px;
        padding-bottom: 9px;
    }
    ul li:active, #navi ul li:hover, #navi a:hover {
        list-style-image: url(images/seo-icon15.png);
    }
    #navi a:link, #navi a:visited {
        text-decoration: none;
        color: #333;
    }
    #current {
        font-weight: bold;
    }
    /*navigation-ende*********************************************/
    /*beginn-inhalt***********************************************/
    div#content {
        padding-top: 0;
        width: 455px;
        height: 584px;
        float: left;
        padding-right: 20px;
        padding-left: 10px;
    }
    /*mittel-teil-content - ende**********************************/
    /*beginn-steine-rechts***************************************/
    div#rightcontent {
        width: 240px;
        height: 584px;
        background-image: url(images/content-links.png);
        background-repeat: no-repeat;
        background-position: right top;
        float: right;
    }
    .links {
        float: left;
        margin: 0;
        padding: 0;
    }
    .rechts {
        float: right;
        margin: 0;
        padding: 0 29px 0 0;
    }
    /*inhalt-ende************************************************/
    /*beginn-fusszeile********************************************/
    div#footer {
        height: 60px;
        background-image: url(images/footer.png);
        background-repeat: no-repeat;
        background-position: left bottom;
        clear: both;
    }
    /*fusszeile-ende**********************************************/

    und der html-Code lautet:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if IE 6]><link rel="Stylesheet" href="ie6.css" type="text/css" /><![endif]-->
    <!--[if IE 7]><link rel="Stylesheet" href="ie7.css" type="text/css" /><![endif]-->
    </head>
    <body>
    <div id="wrapper">
      <div id="oben"></div>  
      <div id="navi">
        <ul>
          <li><a href="#" id="current">Startseite</a></li>
          <li><a href="http://www.seo-bayern.com/partnerin.html">Ihre Partnerin</a></li>
          <li><a href="http://www.seo-bayern.com/internetmarketing.html" >InternetMarketing</a></li>
          <li><a href="http://www.seo-bayern.com/suchmaschinenoptimierung-seo.html" >SEO-Optimierung</a></li>
          <li><a href="http://www.seo-bayern.com/webdesign.html" >Webdesign</a></li>
          <li><a href="http://www.seo-bayern.com/preise.html">Preise</a></li>
          <li><a href="http://www.seo-bayern.com/news.html">News</a> </li>
        </ul>
      </div>
       <div id= "content"></div>
      <div id= "rightcontent"><div>
          <h3 class="abstand"></h3>
          <div class="adresse"></div>
          <div class="iconfeld"></div>
          <div class="kontakt">
            <p class="links"><a href="http://www.seo-bayern.com/kontakt.html"> Kontakt</a></p>
            <p class="rechts"><a href="http://www.seo-bayern.com/impressum.html" >Impressum</a></p>
          </div>
        </div>
      </div>
      <div id="footer"> </div>
    </div>[/
    Ich hoffe auf Euch!

    Herzliche Grüße
    Sonnenschein
     

  2. #2
    sonnenscheinds sonnenscheinds ist offline Grünschnabel
    Registriert seit
    Aug 2011
    Beiträge
    4
    Guten morgen
    hat keiner von Euch eine Idee? Ich setze meine ganze Hoffnung auf Euch!

    Herzliche Grüße
    Sonnenschein
     

  3. #3
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo sonnenschein,

    gib den LI-Elementen der Navigation mal einen height-Wert entsprechend der Zeilenstruktur des Hintergrundbildes, schätzungsweise sind das 26px. Beachte dabei, dass die LI-Elemente bereits einen padding-bottom-Wert von 9px haben.
    Vielleicht hilft das.

    Zum IE6 kann ich i.A. nichts sagen, weil "Isch habe gar kein IE6".
     

  4. #4
    sonnenscheinds sonnenscheinds ist offline Grünschnabel
    Registriert seit
    Aug 2011
    Beiträge
    4
    Hallo hela,

    super! das war es! Jetzt stimmt die Navi in allen Browsern. Herzlichen Dank an Dich hela******!

    Jetzt gilt es nur noch den Footer im IE 6 darzustellen.
    ....und ein kleines Problem habe ich doch noch: Damit im IE6,7 und 8 kein Rahmen um den Header erscheint, habe ich im Quellcode border="0" gesetzt, da der IE sonst die die Anweisung nicht nimmt. Somit ist aber der Code nicht valide. Vielleicht hat da noch jemand eine andere Idee?

    Schönen Abend
    Sonnenschein
     

  5. #5
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von sonnenscheinds Beitrag anzeigen
    ... Damit im IE6,7 und 8 kein Rahmen um den Header erscheint, habe ich im Quellcode border="0" gesetzt, da der IE sonst die die Anweisung nicht nimmt. Somit ist aber der Code nicht valide. Vielleicht hat da noch jemand eine andere Idee?
    Hallo,

    meinst du das:
    Code css:
    1
    2
    3
    4
    5
    6
    
    div#oben {
        width: 980px;
        height: 145px;
        background-position: center top;
        border: 0;
    }
    Es würde mich überraschen, wenn das invalid ist. Allerdings müsstest vermutlich den im Block enthaltenen Elementen diese Eigenschft zuweisen, damit das auch Wirkung zeigt.
    Versuch es mal damit:
    Code css:
    1
    2
    3
    
    div#oben * {
        border: 0;
    }
     

  6. #6
    sonnenscheinds sonnenscheinds ist offline Grünschnabel
    Registriert seit
    Aug 2011
    Beiträge
    4
    hallo hela
    danke für Deine erneute Antwort. Der IE war auch mit Deinem Vorschlag leider nicht einverstanden. Habe es aber jetzt lösen können, indem ich div#oben a img auf border=0 gesetzt habe. Jetzt funktioniert alles bis auf mein Footer!

    Nochmals DANKE!
    Sonnenschein
     

Ähnliche Themen

  1. Problem mit Darstellung in Opera
    Von JBJHJM im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 25.07.11, 02:16
  2. Problem mit Darstellung in Opera
    Von JBJHJM im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 24.07.11, 18:59
  3. Falsche Darstellung in Opera 9.0
    Von jdgf im Forum CSS
    Antworten: 3
    Letzter Beitrag: 09.04.09, 07:25
  4. Andere Darstellung im IE und Opera ! Hilfe !
    Von powerofpaul im Forum CSS
    Antworten: 19
    Letzter Beitrag: 02.11.08, 12:19
  5. Antworten: 0
    Letzter Beitrag: 07.08.05, 21:39

Stichworte