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.
CSS:
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;
}