• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungsproblem IE

barney

Neues Mitglied
Hy, hab ein Problem mit der Darstellung im IE. Hab einen Contentbereich definiert und im CSS mit overflow:auto versehen. Wenn nun der Text zu lang wird und eine Scrollleiste kommt, verschiebt er mir im Footer die untere Navi ein Stück nach unten.

Hier zu sehen:
Big Yellow Taxi

Bei "Home" ists normal so wie ich es will. Bei den anderen Seiten hab ich den Text verlängert und dort entsteht dann dieser Abstand. Bei FF, Chrome und Opera, ist das nicht der Fall. Was kann ich dagegen machen? Hab schon mit Conditional Comments herumprobiert, worauf er aber komischerweise gar nicht anspricht. IE 8 auf jeden Fall, ältere hab ich noch nicht probiert.


HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Big Yellow Taxi</title>
<link href="../css/design.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
    <style type="text/css">@import url(../css/design_IE.css);</style>
  <![endif]-->


<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

</head>

<body>
    <div id="wrapper">
        <div id="logo">
        </div>
        <div id="content_leer1">
    
            <div id="navi">
                  <a href="#"><img src="../Slices/Bilder/home2.png" class="navi" /></a>
                <a href="tour.html"><img src="../Slices/Bilder/tour2.png" class="navi" /></a>
                <a href="media.html"><img src="../Slices/Bilder/media2.png" class="navi" /></a>
                <a href="presse.html"><img src="../Slices/Bilder/presse2.png" class="navi" /></a>
                <a href="contact.html"><img src="../Slices/Bilder/contact2.png" class="navi" /></a>
           
           
            </div>
        </div>
        <div id="navi_leer">
        </div>
        <div id="navi_left">
            <a href="jazzbrasil.html"><img src="../Slices/Bilder/jazz.png" class="navi2" /></a>
            <a href="rockpop.html"><img src="../Slices/Bilder/rock.png" class="navi2" /></a>
            <a href="soulfunk.html"><img src="../Slices/Bilder/soul.png" class="navi2" /></a>
        </div>
        <div id="content">
            <div id="pic"><a href="../pics/breiteck.jpg" rel="lightbox"><img src="../pics/breiteck_small.jpg" id="pic_2" /></a>
            </div>
            <div id="text">os eum cuptate cullore ception et quunt labores ne landis dundistrum autam harit quam everae od ut earum etum, culla et abore nimperro et lit quia sime pore, consed ut que re, sandend untius quid utemporum nos inusanimusci dolorem inus pa nim aliti omnita pra sam, quo quia sequiam comnit repero volupta temquiatas acepellab ipis adit voluptat dellatinctur sequatem quis incid
            </div>
        </div>
        <div id="footer_line">
        </div>
        <div id="footer">
            <div id="navi2">
                <a href="impressum.html">IMPRESSUM</a> | <a href="disclaimer.html">DISCLAIMER</a> | <a href="kontakt.html">KONTAKT</a> | (c)2011
            </div>
        </div>
    </div>

</body>
</html>

CSS:
Code:
*{
    margin:0;
    padding:0;
}

body{
    font-family:"Arial Rounded MT Bold";
    font-size:0.9em;
    background-color:#000;
    scrollbar-base-color:#f0cf38;
       scrollbar-3d-light-color:#000;
      scrollbar-arrow-color:#000;
      scrollbar-darkshadow-color:#000;
      scrollbar-face-color:#f0cf38;
      scrollbar-highlight-color:#ffed9a;
      scrollbar-shadow-color:#d2ac00;
      scrollbar-track-color:#000;
}


#wrapper{
    width:850px;
    margin:40px 0 0 240px;
    
}

#logo{
    background-image:url(../Slices/Bilder/logo.png);
    height:300px;
    width:201px;
    float:left;
}

#content_leer1{
    background-image:url(../Slices/Bilder/content_oben_leer.png);
    width:598px;
    height:300px;    
    float:left;
}

#navi{
    width:599px;
    height:31px;    
    float:left;
    margin:269px 0 0 23px;
}

a img{
    border:none;
}

img.navi{
    margin-right:21px;
}        

 
#navi_leer{
    background-image:url(../Slices/Bilder/navi_leer.png);
    width:800px;
    height:17px;
    clear:both;
}

#navi_left{
    width:201px;
    height:102px;
    float:left;
    margin-top:10px;
}

img.navi2{
    margin:4px 0 0 30px;
}

#content{
    background-image:url(../Slices/Bilder/Content.png);
    width:615px;
    height:408px;
    overflow:auto;
    float:left;
    color:#FF0;
    margin:10px 0 0 10px;
}


#footer_line{
    background-image:url(../Slices/Bilder/Strich_footer2.png);
    background-repeat:no-repeat;
    width:800px;
    height:8px;
    clear:both;
    margin-left:20px;
    
}

#footer{
    width:800px;
    height:35px;
    margin-left:10px;
}

#navi2{
    float:right;
    color:#f0cf38;
    font-size:10px;

}

#navi2 a{
    text-decoration:none;
    color:#f0cf38;
}

#pic{
    margin:4px 0 0 12px;
    width:190px;
    float:left;
    border:medium solid #f0cf38;

}

#text{
    width:367px;
    color:#f0cf38;
    float:left;
    margin-left:15px;
}

pic_2{
    border:medium solid #f0cf38;

}
 
Ich weiß nicht genau, woran es liegt, würde aber mal ausprobieren, wie es aussieht, wenn du die untere navi um diesen Teil standartmäßig nach unten verschiebst. Ich finde, es sieht dann auch gut aus, nicht so unter die Linie geklatscht....
Und dann würde ich deinen wrapper wie folgt ausrichten:
HTML:
#wrapper{     
width:850px;     
margin:0 auto;
margin-top 40px;
}
Dann ist die Seite immer horizontal in der Mitte ausgerichtet.
 
Funktioniert nicht. Dann schiebt er es mir einfach noch weiter runter.
Bzgl. Wrapper. Da hat der IE was dagegen. Normal funktionierts, wenn der Text zu lang wird und wieder gescrollt werden kann, schiebt er mir gleich alles nach links aussen.

Ma wie ich den IE "mag". ggg
 
Zurück
Oben