Navigation verrutscht

Hallo,

wenn ich die "Normalansicht" meiner Webseite mit der Tastenkombination Strg und - verkleinere, rutscht ein Teil der Navigation weg und setzt sich unter die Navigation.

Zur Verdeutlichung habe ich mal zwei Bilder hoch geladen.







Die Webseite wurde in CSS erstellt.

Hier der TEXT UNTER DEM DESIGN:
<ul id="liste">
<li>
<a class="hide" href="/home.htm">
<img alt="home" src="http://img.webme.com/pic/p/pink-camel/home.png" /></a><li><a class="hide">About Pink-Camel
</a>
<ul>
<li>
<a href="http://pink-camel.de/editorial.htm">Editorial</a>
</li>
<li>
<a href="http://pink-camel.de/updates.htm">Updates</a>
</li>
<li>
<a href="http://pink-camel.de/supporter.htm">Supporter</a>
</li>
<li>
<a href="http://pink-camel.de/contact.htm">Contact</a></li>
<li>
<a href="http://pink-camel.de/imprint.htm">Imprint</a></li>
</ul>
</li>

<li>
<a class="hide">Discography</a>
<ul>
<li>
<a href="http://pink-camel.de/7-Inch-Vinyls.htm">7" Inch</a>
</li>
<li>
<a href="http://pink-camel.de/12-Inch-Vinyls-%26-CDs.htm">12" Inch & CDs</a>
</li>
<li>
<a href="http://pink-camel.de/Promos-%26-Specials.htm">Promos & Specials</a>
</li>
<li>
<a href="http://pink-camel.de/dvds.htm">DVDs</a>
</li>
<li>
<a href="http://pink-camel.de/summary.htm">Summary</a>
</li>
</ul>
</li>
<li>
<a class="hide">Bootlegs</a>
<ul>
<li>
<a href="http://pink-camel.de/recording-index.htm">Recording Index</a>
</li>
<li>
<a href="http://pink-camel.de/setlists.htm">Setlists</a></li>
<li>
<a href="http://pink-camel.de/artworks.htm">Artworks</a>
</li>
<li>
<a href="http://pink-camel.de/tradelist.htm">Tradelist</a></li>
</ul>
</li>
<li>
<a class="hide">On The Road</a>
<ul>
<li>
<a href="http://pink-camel.de/tourtable.htm">Tourtable</a>
</li>
<li>
<a href="http://pink-camel.de/tickets.htm">Tickets</a></li>
<li>
<li>
<a href="http://pink-camel.de/venues.htm">Venues</a></li>
<li>
<a href="http://pink-camel.de/photos.htm">Photos</a></li>
</ul>
</li>
<li>
<a class="hide">Collector's World</a>
<ul>
<li>
<a href="http://pink-camel.de/memorabilia.htm">Memorabilia</a>
</li>
</ul>
</li>
<li>
<a class="hide">Camel</a>
<ul>
<li>
<a href="http://pink-camel.de/timeline.htm">Timeline</a></li>
<li>
<a href="http://pink-camel.xobor.de">Forum</a>
</li>
</ul>
</li>
<li>
<a href="http://pink-camel.de/guestbook.htm">Guestbook</a>
</li>
</ul>

<script type="text/javascript">
var a = document.getElementById('nav_container');
a.innerHTML = '';
a.appendChild(document.getElementById('liste'));
var bc = document.getElementById('below_content');
bc.parentNode.parentNode.appendChild(bc);

var vblink = document.getElementById('blink');

WalkingText = function(obj, w, time){
this.obj = obj;
this.height = obj.offsetHeight;
this.parentHeight = parseInt(obj.parentNode.style.height);
this.w = w;
this.time = time;
this.top = this.parentHeight;

this.obj.parentNode.style.position = 'relative';
this.obj.parentNode.style.overflow = 'hidden';
this.obj.style.position = 'absolute';
this.obj.style.top = this.top + 'px';

this.walk = function(){
var o = this;

if(this.top > (-this.height))
this.top -= this.w;
else
this.top = this.parentHeight;

this.obj.style.top = this.top + 'px';
window.setTimeout(function(){o.walk();}, this.time);
}
this.walk();
}
new WalkingText(document.getElementById('walkingelement'), 1, 50);


function blink(){
if(!blink)
return;

vblink.style.visibility == 'hidden' ? vblink.style.visibility = 'visible' : vblink.style.visibility = 'hidden';

window.setTimeout(blink, 500);
}

blink();
</script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26901830-1']);
_gaq.push(['_setDomainName', 'pink-camel.de']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>


CSS-CODE OHNE DESIGN:

//-->
</style>

<link type="text/css" rel="stylesheet" href="http://pink-camel.bplaced.net/carousel/theatre.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src=" http://pink-camel.bplaced.net/carousel/jquery.theatre-1.0.js
" type="text/javascript"></script>
<style type="text/css">
<!--
*{padding: 0px; margin: 0px; }

#extradiv1, #extradiv2, #extradiv3, #extradiv4, #extradiv5, #extradiv6, #pre_header, div.header, #post_header, #pre_content, #counter, #post_content, #title {
display:none;
}

html, body{
width:100%;
min-width:1200px;
min-height:100%;
color:#ffffff;
font-family: Verdana;
font-size:12px;
text-align:justify;
}

table { margin:auto!important; }

body{
background-color: #EEEEEE;
background-image: url("http://img.webme.com/pic/p/pink-camel/tiled_backround4.jpg");
}

a{
color:#ffffff;
text-decoration:none;
}

img{
border:none;
}

#container {
width:1200px;
margin:10px auto;
overflow:hidden;
}

#header_container{
background-image: url("http://img.webme.com/pic/p/pink-camel/header_1200.png");
height: 129px;
width: 1200px;
}

#nav_container {
width: 100%;
height:40px;
position:relative;
margin:10px 0;
}

#liste{position:absolute;left:0; top:0;}
#nav_container ul li a {
display:block;
text-decoration:none;
color:#000000;
width: 149px;
height:40px;
text-align:center;
color:#ffffff;
line-height:24px;
font-size:12px;
overflow:hidden;}
#liste > li > a{height:24px!important;margin-top:8px;}
#liste > li:not(:first-of-type) > a{border-left:1px inset black;}
#liste > li:first-of-type{width:149px;}
#liste > li:first-of-type > a{height:40px!important;line-height:40px!important;margin-top:0!important;}

#nav_container ul {padding:0; margin:0; list-style: none;}

#nav_container ul li {float:left; position:relative;height:40px;background-image: url(http://img.webme.com/pic/p/pink-camel/leiste_pink.png); }

#liste ul {display: none;}

#liste li:hover a{color:#fff; background-image: url(http://img.webme.com/pic/p/pink-camel/leiste_anthrazit.png);margin-top:0;height:40px!important;line-height:40px;}

#liste li:hover ul {display:block; width:108px;}

#liste li:hover ul li a.hide {color:#fff;}

#liste li:hover ul li:hover a.hide {color:#000;}

#liste li:hover ul li ul {display: none;}

#liste li:hover ul li a {display:block; background: #ddd; color:#000; font-size: 11px; text-align: left; padding-left: 7px; width: 142px; border-bottom: 1px solid #c7c7c7;}

#liste li:hover ul li a:hover {background-image:url(http://img.webme.com/pic/p/pink-camel/leiste_blau.png); color:#fff;}

#liste li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

#content_container{
width:100%;
background-image: url("http://img.webme.com/pic/p/pink-camel/content.png");
border: 0 solid #570657;
overflow: hidden;
}

#content{
width:928px;
overflow:hidden;
float:left;
padding:25px;
}

#sidebar_container{
width:172px;
overflow:hidden;
padding:25px;
color:#333333;
}

div.box h2 {font-size:12px;font-weight:normal;}
div.box a {color:#172ae8;}

#below_content{
height: 40px;
margin: 10px 0;
position: relative;
width: 100%;
background-image: url(http://img.webme.com/pic/p/pink-camel/leiste_pink.png);
padding:0 60px;
}

#below_content > div{
float:left;
overflow:hidden;
line-height:10px;
font-size:10px;
font-weight:bold;
padding:15px 0;
}

#footerleft{
margin-right: 1%;
padding:0!important;
}

#footercopy{
width:74%;
text-align:center;
}


#footerright{
margin-right:1%;
}

#footerright > a{
margin-right:20px;
}

div.box{
border-bottom: 1px solid #5E115E;
margin-bottom: 23px;
padding-bottom: 23px;
}

div.box:last-of-type{
border-bottom: none;
}

#editorial_nav{list-style-type:none;width:680px;overflow:hidden;margin:100px auto;}
#editorial_nav li{width:80px;height:20px;margin-right:5px;float:left;}
#editorial_nav > li > a > img{width:80px;height:20px;}

#o4nlinklist ul{list-style-type:none;}
#o4naccordion > div{
padding:5px 10px 5px;
overflow:hidden;
/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background: #cccccc;

-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-khtml-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */
}

#o4naccordion > div:hover,#o4naccordion > div.accordion_active{
/* Decorative CSS */
color:#fff;
background: #000000;


/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #570657, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#570657), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#570657, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff570657, endColorstr=#ff000000)"; /* IE 8 */
}

#o4naccordion > p{background-color:white;border:1px solid f0f0f0;padding:10px;}


Es wäre toll, wenn ich hier Hilfe finden könnte, denn das regt mich ehrlich gesagt richtig auf.