Nicht mehr ganz neu hier
Hallo,
ich habe da ein kleines Problem mit dem IE, wie sollte es anders sein.
Folgende Bilder verdeutlichen die verschobenen Buttons:
So soll es sein und ist es auch in allen Browsern (auch IE8)
So ist es mit dem Kompatiblitätsmodus vom IE und sieht einfach nur sch... aus.
html:
CSS:
Wird sicher irgend ein dummer Fehler sein, denn ich aber nicht finde XD
Es wäre nett, wenn Ihr mir ein paar Tipps geben könnt.
Mfg DonUndertaker
ich habe da ein kleines Problem mit dem IE, wie sollte es anders sein.
Folgende Bilder verdeutlichen die verschobenen Buttons:
So soll es sein und ist es auch in allen Browsern (auch IE8)
So ist es mit dem Kompatiblitätsmodus vom IE und sieht einfach nur sch... aus.
html:
HTML:
<div id="page"> <!-- <div id="header"> Header </div> --> <div id="main"> <div id="col1"> <img src="Bilder/logo.gif" border="0" align="right" alt="" /> <div id="nav_u1"> <ul> <li class="button_u1" > <a href="index.php?datei=seite&seite=11&nav=10" title="Niederlassungen">Niederlassungen</a> </li><li class="button_u1" > <a href="index.php?datei=seite&seite=12&nav=10" title="Unsere Ziele">Unsere Ziele</a> </li><li class="button_u1" > <a href="index.php?datei=seite&seite=13&nav=10" title="Unsere Mitarbeiter">Unsere Mitarbeiter</a> </li> </ul> </div> </div> <!-- <div id="col2"> Col2 </div> --> <div id="col3"> <div id="head_balken"> <div id="nav"> <ul> <li class="button"> <a href="index.php?datei=seite&seite=9&nav=9" title="Home" >Home</a> </li><li class="button"> <a href="index.php?datei=seite&seite=10&nav=10" title="Wir über uns" class="actived">Wir über uns</a> </li> </ul> </div> </div> <div id="content">
</div> <div class="clearfix"></div> </div> </div> </div> <div id="footer"> Footer </div>CSS:
Code:
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
body {
background-color: #d3dddb;
background-image: url();
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#page {
width: 100%;
text-align: left;
}
#main {
width: 100%;
height: 100%;
display: block;
}
#col1 {
width: 215px;
height: 100%;
float: left;
position: absolute;
top: 0px;
left: 0px;
display: block;
background-image: url(Bilder/SubMenue.jpg);
background-repeat: no-repeat;
background-color: #005842;
border-right: 1px solid #fff;
z-index: 1;
}
div#nav_u1 {
list-style-position: inside;
list-style-image: url(Bilder/submenue_off.gif);
margin: 0 0 0 10px;
padding: 140px 0 0 0;
}
div#nav_u1 li {
height: 40px;
margin: 10 0 0 0px;
}
div#nav_u1 li:hover {
list-style-image: url(Bilder/submenue_on.gif);
}
div#nav_u1 a {
height: 20px;
margin: 0 0 0 3px;
color: #005842;
text-decoration: none;
text-shadow: white 2px 2px;
font-size: 12px;
font-weight: bold;
}
li.actived {
list-style-image: url(Bilder/submenue_over.gif);
font-weight: bold;
}
#col2 {
width: 200px;
float: right;
display: block;
}
#col3 {
width: 600px;
}
#head_balken {
width: 100%;
height: 80px;
position: absolute;
top: 0px;
left: 0px;
background-color: #005843;
z-index: 0;
}
div#nav {
height: 39px;
list-style-position: inside;
list-style: none;
background-image: url(Bilder/Menue_tex.gif);
margin: 40px 0 0 216px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
div#nav li {
width: 90px;
height: 39px;
float: left;
display: block;
border-right: 1px solid #fff;
text-align: center;
vertical-align: middle;
}
div#nav a {
height: 39px;
width: 86px;
margin: 0 2px 0 2px;
color: #000;
display: block;
font-size: 11px;
line-height: 39px;
vertical-align: middle;
text-decoration: none;
}
div#nav a:hover {
background-image: url(Bilder/Menue_text_over.jpg);
}
a.actived {
background-image: url(Bilder/Menue_text_on.jpg);
}
#content {
width: 500px;
position: absolute;
left: 230px;
top: 100px;
}Wird sicher irgend ein dummer Fehler sein, denn ich aber nicht finde XD
Es wäre nett, wenn Ihr mir ein paar Tipps geben könnt.
Mfg DonUndertaker
