Ich bastel derzeit gerade an einem Projekt und es geht mal wieder um die korrekte Darstellung im IE. Um genau zu sein um den 6.0er, der bei den Klienten leider noch immer ganz oben steht wenn man sich die ganzen Statistiken ansieht.
Jetzt habe ich schon die beiden Möglichkeiten probiert:
CODE
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- [if IE 6]>
<style type="text/css">@import url(css/ie.css);</style>
<![endif]-->
<!-- [if IE 6]>
<style type="text/css">@import url(css/ie.css);</style>
<![endif]-->
und
CODE
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- [if IE 6]>
<link href="css/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
aber die CSS-Datei wird einfach nicht geladen...
in der ie.css habe ich einfach die Bilder weg gelassen und einfach die weiße Farben auf Schwarze gestellt um den Effekt zu sehen.
Ich habe auch schon <!--[if lt IE 7] usw alle durchprobiert, auch eine absolute Pfadangabe zur css - Datei, es tut sich einfach nichts...
Ich weiß jetzt nicht ob es ein CSS - Problem ist, aber ich nehme es mal an.
Es handelt sich um folgendes:
Ich hab meine Menübuttons, und wenn man auf diesen klickt, wird mittels jQuery das Menü ausgefahren. Dies funktioniert ja auch ohne Probleme, aber:
der IE6 verbreitert das ganze Menü und somit ist das Bild zum runden Abschließen des Menüs verschoben...
Es wird das Menü - Div nicht in der per CSS - Datei vorgegebenen Größe gemacht, sondern wird breiter als die vorgegebenen Maße. Ich nehme mal an, dass das mit dem Box-Modell zusammenhängt, daher wollte ich es per ie.css editieren, jedoch wie oben beschrieben, wird diese nicht geladen.
HTML-code:
CODE
<a href="#" id="animate2"><div class="menueoben">Menü2 </div></a>
<div class="menue">
<div class="menuebox">
<ul>
<li><a href="test.php">Link1</a></li>
...
</ul>
</div> <!--menuebox -->
<div class="menuebottom"></div>
</div> <!-- menue -->
<div class="menue">
<div class="menuebox">
<ul>
<li><a href="test.php">Link1</a></li>
...
</ul>
</div> <!--menuebox -->
<div class="menuebottom"></div>
</div> <!-- menue -->
CSS-code:
CODE
/* --------------left navigavtion------------- */
#left {
float: left;
width: 20em;
margin: 0;
padding:0;
color:#6e7072;
}
.menueoben {
margin-top: 15px;
text-indent:16px;
line-height: 25px;
float:right;
width: 165px;
height: 25px;
background: url(../images/menuebar.gif) no-repeat;
}
.menuebottom {
float:right;
width: 145px;
height: 15px;
background: url(../images/mboxbottom.png) no-repeat;
}
.menuebox {
float:right;
width: 145px;
height: auto;
background-color: #ecf3dc;
border-left:1px solid #b2e443;
}
.menuebox ul {
list-style:none;
padding-left:10px;
}
.menuebox li {
border-bottom: 1px solid #b2e443;
padding-top:15px;
}
.menuebox a{
color: #6e7072;
text-decoration: none;
}
.menuebox a:hover{
color: #5d810e;
}
.menuebox a:active{
color: #5d810e;
}
.menue{
float:right;
width: 145px;
height:auto;
margin:0;
padding: 0;
}
#left {
float: left;
width: 20em;
margin: 0;
padding:0;
color:#6e7072;
}
.menueoben {
margin-top: 15px;
text-indent:16px;
line-height: 25px;
float:right;
width: 165px;
height: 25px;
background: url(../images/menuebar.gif) no-repeat;
}
.menuebottom {
float:right;
width: 145px;
height: 15px;
background: url(../images/mboxbottom.png) no-repeat;
}
.menuebox {
float:right;
width: 145px;
height: auto;
background-color: #ecf3dc;
border-left:1px solid #b2e443;
}
.menuebox ul {
list-style:none;
padding-left:10px;
}
.menuebox li {
border-bottom: 1px solid #b2e443;
padding-top:15px;
}
.menuebox a{
color: #6e7072;
text-decoration: none;
}
.menuebox a:hover{
color: #5d810e;
}
.menuebox a:active{
color: #5d810e;
}
.menue{
float:right;
width: 145px;
height:auto;
margin:0;
padding: 0;
}
Vlt kann mir ja von euch wer helfen, ich steh leider komplett an. Und so Sätze wie "best viewed with IE >7, FF, O, S" möchte ich mir sparen.
MfG