Hallo, ich bin gerade dran und erstelle eine Seite im Dreamweaver. Habe für die Navigation das SpryMenü genommen. Bisher hat auch alles geklappt...hab alles so eingerichtet wie ich es haben wollte. Nun habe ich die Seite in Firefox, Chrome und IE getestet. Beim Firefox und Chrome läuft alles wunderbar...nur beim IE verschiebt sich die Navigation nach oben. Muss ich da irgendwas noch einfügen???
Hier sind die Codes:
HTML:
Hier die CSS-Datei:
Wäre echt nett, wenn ihr mir helfen könntet. Viele Grüße, Melanie
Hier sind die Codes:
HTML:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="stylehef.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung. */
ul.nav a { zoom: 1; } /* Mit der zoom-Eigenschaft erhält IE den Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum zwischen den Hyperlinks zu korrigieren. */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<!-- end .header --><img src="http://www.html.de/images/banner.gif" alt="Ingenieurbüro Zilch, Krapf und Rasch" width="982" height="150"></div>
<div class="sidebar1">
<!-- end .sidebar1 -->
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a>
<ul>
<li><a href="#">Element 1.1</a></li>
<li><a href="#">Element 1.2</a></li>
<li><a href="#">Element 1.3</a></li>
</ul>
</li>
<li><a href="#">Element 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Element 3.1</a>
<ul>
<li><a href="#">Element 3.1.1</a></li>
<li><a href="#">Element 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Element 3.2</a></li>
<li><a href="#">Element 3.3</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
</div>
<div class="content">
<h1>Anweisungen</h1>
<p>Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die fließenden Layouts zu erhalten. </p>
<!-- end .content --></div>
<div class="bilder">
<ul>
<li></li>
</ul>
</div>
<div class="footer">
<p> .footer-Regel </p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Hier die CSS-Datei:
Code:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #4E5869;
background-image: url(images/hgbody.jpg);
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 982px;
max-width: 1260px
min-width: 780px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #EDEBEF;
}
.header {
background-color: #EDEBEF;
}
.sidebar1 {
float: left;
background-color: #93A5C4;
background-image: url(images/hgbox.jpg);
height: 1000px;
}
.content {
width: 70%;
float: left;
background-color: #EDEBEF;
padding-top: 30px;
margin-left: 5px;
border: medium ridge #F9F6FB;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
/* ~~ Bilderzeile ~~ */
.bilder {
background-color:#7B889B;
clear: both;
background-image: url(images/hgbox.jpg);
height: 200px;
}
/* ~~ Fußzeile ~~ */
.footer {
position: relative;
clear: both;
background-color: #EBE9ED;
background-color: #EDEBEF;
height: 20px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: double;
border-top-color: #5F6774;
border-right-color: #5F6774;
border-bottom-color: #5F6774;
border-left-color: #5F6774;
}
/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}Wäre echt nett, wenn ihr mir helfen könntet. Viele Grüße, Melanie
