Hallo,
meine komplette Navigation rutscht im IE 7 aus dem Container heraus.
Habe auch speziell für den IE 7 rumexperimentiert leider alles ohhe Erfolg.
Hoffe mir kann da jemadn helfen
Link
CSS - Navigation
Code:
/*NAVIGATION*/
* {margin:0; padding:0;}
#menu {
float:left;
list-style:none;
background-image:url("../img/head.jpg");
background-repeat:x-repeat;
width:850px;
height:331px;
margin:0 0 0 55px;
}
#menu span {
display: none;
position: absolute; margin-left:-150px;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {float:left;
width: 87px;
height: 22px;
background: url(../img/home.gif) no-repeat;
margin:200px 0 0 100px;
}
#menu .home span {float:left;
width: 113px;
height: 50px;
background: url(../img/home_hover.gif) no-repeat;
margin:-36px 0 0 -13px;
}
#menu .warum {float:left;
width: 485px;
height: 49px;
background: url(../img/warum.gif) no-repeat;
margin:220px 0 0 150px;
}
#menu .warum span {float:left;
width: 485px;
height: 49px;
background: url(../img/warum_hover.gif) no-repeat;
margin:-19px 0 0 0px;
}
#menu .referenz {float:left;
width: 216px;
height: 45px;
background: url(../img/referenzen.gif) no-repeat;
margin:140px 0 0 250px;
}
#menu .referenz span {float:left;
width: 216px;
height: 45px;
background: url(../img/referenzen_hover.gif) no-repeat;
margin:-19px 0 0 0px;
}
#menu .kontakt {float:left;
width: 145px;
height: 37px;
background: url(../img/kontakt.gif) no-repeat;
margin:180px 0 0 500px;
}
#menu .kontakt span {float:left;
width: 145px;
height: 37px;
background: url(../img/kontakt_hover.gif) no-repeat;
margin:-19px 0 0 0px;
}
#menu .leistungen {float:left;
width: 194px;
height: 50px;
background: url(../img/leistungen.gif) no-repeat;
margin:120px 0 0 480px;
}
#menu .leistungen span {float:left;
width: 194px;
height:50px;
background: url(../img/leistungen_hover.gif) no-repeat;
margin:-19px 0 0 0px;
}
#menu .impressum {float:left;
width: 141px;
height: 33px;
background: url(../img/imp.gif) no-repeat;
margin:270px 0 0 360px;
}
#menu .impressum span {float:left;
width: 141px;
height: 33px;
background: url(../img/imp_hover.gif) no-repeat;
margin:-19px 0 0 0px;
}
CSS - Content
Code:
* {margin:0;
padding:0;
}
body {
text-align:center;
font-family:Arial;
font-size:100.01%;
background-color:#f5f1dc;
}
#wrapper {
margin:0 auto;
background-image:url("../img/bg.jpg");
background-repeat:x-repeat;
width:960px;
min-height:300px;
padding-bottom:10px;
}
#wrapper:after {
content:".";
display:block;
clear:both;
font-size:0;
overflow:hidden;
height:.1px;
visibility:hidden;
}
#content {
width:530px;
min-height:250px;
margin-left:45px;
}
#content h2 {
text-align:left;
color:#444343;
font-size:18px;
width:370px;
min-height:30px;
margin:10px 0 0 55px;
padding-top:13px;
}
#content p {
text-align:left;
color:#161e80;
line-height:26px;
width:370px;
min-height:30px;
margin:10px 0 0 55px;
}
#content_top {
background-image:url("../img/content_top.png");
background-repeat:no-repeat;
width:500px;
height:176px;
margin:20px 0 0 25px;
}
#content_mid {
background-image:url("../img/content_mid.png");
background-repeat:y-repeat;
width:500px;
min-height:113px;
margin:-10px 0 0 25px;
}
#content_bot {
background-image:url("../img/content_bot.png");
background-repeat:no-repeat;
width:500px;
height:113px;
margin:0px 0 0 25px;
}
#content_bot ul {
text-align:left;
padding-top:10px;
font-size:12px;
}
#ul1 {float:left;
margin-left:55px;
width:120px;
}
#ul2 {
float:left;
margin-left:10px;
width:160px;
}
#ul3 {
float:left;
margin-left:0px;
width:140px;
}
#content_bot li {
list-style:none;
}
#content_bot a {
text-decoration:none;
color:#939395;
}
#content_bot a:hover {
color:#636366;
}
#content_bot a:aktive {
color:#a0101d;
}
#head {
width:800px;
height:331px;
}
/*CONTENT RIGHT*/
#content_right {
float:right;
margin:23px 80px 0 0;
width:270px;
min-height:400px;
}
#right_top {
background-image:url("../img/right_top.png");
background-repeat:no-repeat;
width:270px;
height:44px;
margin:0px 0 0 0px;
}
#right_mid {
background-image:url("../img/right_mid.png");
background-repeat:y-repeat;
width:270px;
height:216px;
margin:0px 0 0 0px;
}
.ref_img {
float:left;
background-image:url("../img/unger_img.png");
background-repeat:no-repeat;
margin:10px 0 0 30px;
width:80px;
height:80px;
}
.ref_img2 {
float:left;
background-image:url("../img/schmiedeeisen_img.png");
background-repeat:no-repeat;
margin:10px 0 0 30px;
width:80px;
height:80px;
}
#right_mid p {
float:left;
text-align:left;
margin:10px 0 0 10px;
width:138px;
height:100px;
}
#right_mid p a {
color:#a53038;
}
#right_mid p a:hover {
color:#8394de;
}
#right_bot {
background-image:url("../img/right_bot.png");
background-repeat:no-repeat;
width:270px;
height:20px;
margin:0px 0 0 0px;
}
#w3c_paper {
float:right;
background-image:url("../img/w3c_paper.png");
background-repeat:no-repeat;
margin:43px 0px 0 0;
width:269px;
height:210px;
min-height:400px;
}
#w3c_paper p {
float:left;
background-image:url("../img/p_bg.png");
text-align:left;
line-height:20px;
margin:42px 0 0 120px;
width:138px;
height:150px;
}
#w3c_paper p a {
color:#a53038;
}
#w3c_paper p a:hover {
color:#8394de;
}
/*LEISTUNGEN*/
.link_lst {color:#a53038;
}
.link_lst:hover {color:#8394de;
}
#content .lst_ul {
text-align:left;
margin:0px 0 0 60px;
padding:20px 0 20px 0;
width:480px;
}
#content .lst_ul li {
list-style:none;
margin-top:3px;
}
.haken {
width:15px;
height:15px;
margin-right:10px;}
/*REFERENZEN*/
.referenz_box {
float:left;
width:480px;
}
#last_box {
margin-bottom:30px;
}
.img_link {
float:left;
margin:20px 0 0 50px;
border:0;
width:100px;
height:90px;
}
.link_text {
float:left;
width:280px !important;
margin:30px 0 0 30px !important;
min-height:30px;
}
/*KONTAKT*/
#content .fieldbox {
text-align:left;
width:330px;
min-height:60px;
margin-left:60px;
}
#name {margin-left:30px;}
#vname {margin-left:6px;}
#betreff {margin-left:25px;}
#mail {margin-left:46px;}
#text {margin-left:90px; margin-top:-22px;}
#anliegen {float:left; }
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" lang="de" xml:lang="de">
<head>
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" />
<title>Your-Dreamworks - Webdesign aus Hoyerswerda</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your-dreamworks ist eine Werbeagentur im Bereich Webdesign aus Hoyerswerda." />
<meta name="keywords" content="Startseite, Webdesigner, Webagentur, Suchmaschinenoptimierung, Webdesign, Web Design, HTML, PHP-Programmierer, PHP, Webtagebuch, Webblog, XHTML, Hoyerswerda, CMS, CSS, W3C valide" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Nils Hoffmann" />
<meta name="abstract" content="Your dreamworks ist eine junge dynamische Werbeagentur aus Hoyerswerda bei Dresden das sich auf Webdesign/ -entwicklung spezialisiert hat." />
<meta name="copyright" content="Nils Hoffmann" />
<meta name="designer" content="Nils Hoffmann" />
<meta name="publisher" content="www.your-dreamworks.de" />
<meta name="revisit-After" content="5 days" />
<meta name="distribution" content="global" />
<style type="text/css">
@import url("css/content.css");
@import url("css/navigation.css");
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
<ul id="menu">
<li><a href="index.php" class="home">Startseite<span></span></a></li>
<li><a href="warum_modernes_webdesign.php" class="warum">Warum modernes Webdesign?<span></span></a></li>
<li><a href="referenzen.php" class="referenz">Referenzen<span></span></a></li>
<li><a href="kontakt.php" class="kontakt">Kontakt<span></span></a></li>
<li><a href="leistungen.php" class="leistungen">Leistungen<span></span></a></li>
<li><a href="impressum.php" class="impressum">Impressum<span></span></a></li>
</ul>
</div>
<div id="content_right">
<div id="right_top"></div>
<div id="right_mid">
<div class="ref_img"></div>
<p>
<a href="http://unger-holzcreation.de/">Holzcreation Unger</a><br />
Ihre Möbeltischlerei aus Schwarzkollm
</p>
<div class="ref_img2"></div>
<p>
<a href="http://schmiedeeisen-shop.de/">Schmiedeeisen Shop</a><br />
Schmiedeeiserne Zaunbauteile
</p>
</div>
<div id="w3c_paper">
<p>Your Dreamworks versucht die strikten Vorgaben des <a href="http://validator.w3.org/">W3C</a> umzusetzen und präsentiert Sie <a href="suchmaschinenoptimierung.php">Suchmaschinen- freundlich</a> im Internet.</p>
</div>
<div id="right_bot"></div>
</div>
<div id="content">
<div id="content_top"></div>
<div id="content_mid">
<h2>Betreff: Was ist your dreamworks?</h2>
<p>
<i>Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen.</i><br /><br />
Your dreamworks ist eine junge, dynamische und moderne Werbeagentur aus Hoyerswerda.
Vom Konzept über die Realisation, Logo-Design bis hin zur Bildoptimierung erhalten Sie alles aus
einer Hand. Dank dieser Leistungen sichern Sie sich einen professionellen und vor allem zeitgemäßen
Auftritt Ihrer Seite im Internet.<br /><br />
<strong>Ihre Website ist Ihr Aushängeschild im Internet!</strong>
<br /><br />
Your dreamworks präsentiert Sie professionell, anwenderfreundlich und zeitgerecht im Internet
und verschafft Ihnen einen Vorsprung gegenüber Ihrer Konkurrenz.
</p>
<p>
<a href="#wrapper" class="link_lst">nach oben</a>
</p>
</div>
<div id="content_bot">
<ul id="ul1">
<li><a href="index.php">>> Startseite</a></li>
<li><a href="warum_modernes_webdesign.php">>> Warum modernes Webdesign?</a></li>
<li><a href="kontakt.php">>> Kontakt</a></li>
<li><a href="leistungen.php">>> Leistungen</a></li>
<li><a href="impressum.php">>> Impressum</a></li>
</ul>
<ul id="ul2">
<li><a href="referenzen.php"><strong>>> Neuste Referenzen</strong></a></li>
<li><a href="http://unger-holzcreation.de/">>> Holzcreation Unger</a><br /></li>
<li><a href="http://schmiedeeisen-shop.de/">>> Schmiedeeisen Shop</a><br /></li>
<li><a href="referenzen.php">>> uvm.</a></li>
</ul>
<ul id="ul3">
<li><a href="#"><strong>Partnerlink`s</strong></a></li>
<li><a href="#">>> Link 1</a></li>
<li><a href="#">>> Link 1</a></li>
<li><a href="#">>> Link 1</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10061099-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
P.S. Die Seite befindet sich noch in der Beta Version