bob b: div problem bei zuviel div inhalt beim explorer...

Beitrag lesen

hallo zusammen,

habe ein problem mit dem ich mich jetzt schon den ganzen tag rumschlage...

ich habe ein webseite welche nur aus divs und css besteht navigiert wird über javascript indem einzelne divs ein und ausgeblendet werden.
das navigieren klappt gut solange kein inhalt oder nur wenig in den divs drinn steckt.

sobald ich aber zuviel inhalt in die divs packe macht der explorer probleme.im mozilla funktioniert das ganze astrein.

das layout wird im explorer total zerissen.

ich meine mit zuviel inhalt nicht das der inhalt nicht mehr in die div passt, sondern der inhalt hat sehr wohl noch platz  in der div aber es zerreißt das layout trotzdem.

ich habe alle margins und paddings raus genommen um auszuschließen dass
das problem dadurch entsteht.

ich weiß echt nicht woran das ganze liegt...

ich hoffe ihr habt eine idee...

hier also mal der quelltext es sieht ein wenig wild aus. verzeiht mir das...ich hoffe es ist hier üblich so lange queltexte zu posten...

liebe grüße bob b

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" href="main_css.css" type="text/css">
<script src="show_hide.js" type="text/javascript"></script>

<title>tikjgh</title>
</head>
<body>
<div class="main_container">
 <div class="column_1">

<div class="links_1">
   <div class="platzhalter_links1"></div>
   <div class="links_text_bg">
         <div class="links_div" onclick="reset_fu()">reset</div>
    <div class="links_div" onclick="work_fu()">work</div>
    <div class="links_div" onclick="links_fu()">links</div>
    <div class="links_div" onclick="contact_fu()">contact</div>
   </div>
     </div>
  <div class="content_1">
    <div class="news_text_bg">news
    </div>
  </div>
 </div>

<!--content_reset-->

<div class="content_reset" id="start">
   <div class=column_2>
    <div class="links_2">
     <div class="platzhalter_links2"> </div>
    <div class="links_text_bg"> animation  graphic  photos </div>

</div>
    <div class="content_2">

</div>
   </div>
   <div class=content_3>
   </div>
  </div>

<!--/content_reset-->

<!--content_work-->

<div class="content_work" id="work">
   <div class=column_2>
    <div class="links_2">
    <div class="platzhalter_links2"> </div>
 <div class="links2_text_bg">
         <div class="links_div" onclick="reset_fu()">reset</div>
    <div class="links_div" onclick="work_fu()">work</div>
    <div class="links_div" onclick="links_fu()">links</div>
    <div class="links_div" onclick="contact_fu()">contact</div>

</div>
    </div>
    <div class="content_2">
      
    </div>
   </div>
   <div class=content_3>
     
   </div>
  </div>

<!--/content_work-->
  <!--content_links-->

<div class="content_links" id="links">
   <div class=column_2>
    <div class="links_2">
      
    </div>
    <div class="content_2">
      
    </div>
   </div>
   <div class=content_3>
   </div>
  </div>

<!--/content_links-->

<!--content_contact-->

<div class="content_contact" id="contact">
   <div class=column_2>
    <div class="links_2">
      
    </div>
    <div class="content_2">
      
    </div>
   </div>
   <div class=content_3>
     
   </div>
  </div>

<!--/content_contact-->

</div>

</body>
</html>

und hier der css code:

body
 {
    background:#F2F2F2;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    color:#FFFF00;
 }

.main_container
{
    height: 500px;
    width: 800px;
 margin:auto;

}
.column_1
{
    height: 500px;
    width: 200px;
    float:left;

}
.links_1
{
    background: url(img/links1.jpg);
    height: 100px;
    width: 200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;

}
.content_1
{
    background: url(img/content1.jpg);
    height: 300px;
    width: 200px;

font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    text-align:right;

}
.news_text_bg
{
    background: #000000;
    display:inline;
}
.links_text_bg
{

background: #000000;
 height:13px;
 width:200px;

}
.links2_text_bg
{

background: #000000;
 height:13px;
 width:300px;

}
.column_2
{
    height: 500px;
    width: 300px;
    float:left;
}
.links_2
{
    background: url(img/links2.jpg);
    height: 100px;
    width: 300px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;

}
.content_2
{
    background: url(img/content2.jpg);
    height: 300px;
    width: 300px;

text-align:left;
}
.content_3
{
    background: url(img/content3.jpg);
    height: 400px;
    width: 300px;
 float:right;
}
.content_reset
{
    display: none;
    height: 400px ;
    width: 600px;

float:right;

}
.content_work
{
    display:none;
    height: 400px;
    width: 600px;
    float:right;

}
.content_links
{
    display:none;
    height: 400px;
    width: 600px;
    float:right;

}
.content_contact
{
    display:none;
    height: 400px;
    width: 600px;
    float:right;
}
.links_div
{
 float:right;
 cursor:pointer;
 background:green;
}

.platzhalter_links1
{
 background:red;
 height:87px;
 width:200px;
}
.platzhalter_links2
{
 background:red;
 height:87px;
 width:300px;
}

und noch das javascript:

function reset_fu () {
 document.getElementById("start").style.display = "block";
 document.getElementById("work").style.display = "none";
 document.getElementById("links").style.display = "none";
 document.getElementById("contact").style.display = "none";
}
function work_fu () {
 document.getElementById("start").style.display = "none";
 document.getElementById("work").style.display = "block";
 document.getElementById("links").style.display = "none";
 document.getElementById("contact").style.display = "none";
}
function links_fu () {
 document.getElementById("start").style.display = "none";
 document.getElementById("work").style.display = "none";
 document.getElementById("links").style.display = "block";
 document.getElementById("contact").style.display = "none";
}
function contact_fu () {
 document.getElementById("start").style.display = "none";
 document.getElementById("work").style.display = "none";
 document.getElementById("links").style.display = "none";
 document.getElementById("contact").style.display = "block";
}