Hallo Forum!
Kennt jemand die Browserweiche für den IE6?
Ich habe ein Problem mit einem horizontalen Dropdown Menü.
Unter ie6 wird das Menü vertikal und nicht horizontal.
Das menü enthält javascript.
Die css-datei:
#nav li:hover, #nav li.sfhover {
background: #e2e5eb;
list-style-type: none;
}
#nav li a.menu-current-active {
color:#9f282d;
list-style-type: none;
}
#nav, #nav ul {
border: solid #e2e5eb;
float: left;
width: 62em;
list-style-type: none;
line-height: 1.1em;
background:#ffffff;
color:#ffffff;
font-weight: bold;
padding: 0;
border-width: 0px 0;
margin-top:4px;
margin-bottom:4px;
margin-left:40px;
}
#nav a {
color:#00406e;
text-decoration: none;
padding-top: 2px;
padding-left: 0;
padding-right:0;
padding-bottom:0;
line-height: 19px;
display: block;
font-weight:bold;
list-style-type: none;
}
#nav li {
float: left;
padding: 0;
width: 12em;
list-style-type: none;
background-image:none!important;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 15em;
font-weight: normal;
border-width: 0.15em;
margin: 0;
list-style-type: none;
}
#nav li li {
width: 15em;
color:#00406e;
list-style-type: none;
}
#nav li ul a {
width: 14em;
padding-left: 0.5em;
list-style-type: none;
}
#nav li ul ul {
margin: -1.60em 0 0 15em;
list-style-type: none;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover li, #nav li.sfhover li{ color:#00406e; }
#nav li ul li a.ifsubarrow {
background:transparent url(../images/Grafiksymbole/seta_1.gif) no-repeat scroll right center;
}
Die js-datei:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Danke + Gruß
Ich würde über die constants ein weiteres css bei IE6 hinzuladen und dort Styles überschreiben...
Und jezt sag' nicht, dass du schon nach "Browserweiche" hier im Forum gesucht hast
Wie kann ich die css-Datei überschreiben?
Ich habe es mit
#nav ul li {
display:inline;
}
schon versucht; aber ohne Erfolg.
guck sonst mal hier...
http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html
so kann man es bspw machen...:
##nav ul li {
display:inline;
}
Zwei Rauten, das kann nur der IE6 Interpretieren, andere Browser wie Firefox ignorieren ihn einfach
, dieser Code muss immer unter dem anderen stehen, weil dieser sonst nicht überschrieben wird.
Hallo!
Danke für Deine Antwort. Leider funktioniert es immer noch nicht. IE6 ignoriert
meine Angaben.
Hast Du noch einen Tipp?
Mit freundlichen Grüßen
per headerData ein Conditional Comment einbinden:
page {
headerData {
1 = TEXT
1 {
value (
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="fileadmin/ie6.css" media="screen" /><![endif]-->
)
}
}
}
Dann in dem File alles was im IE6 anders muss überschreiben.
Hallo,
für die Browser nehme ich immer diese beiden Hacks
* html für den IE6 und
*+html für den IE7
Bei dir wäre das:
* html #nav ul li {
display:inline;
}
hoffe es hilft
lieben Gruß
Tevsa
Hallo SLang,
danke für Deine Hilfe.
Die css für den ie6 habe ich korrekt angebunden. Hier ist die Code-Ansicht vom
Browser (ie6).
....
<link rel="stylesheet" type="text/css" ref="typo3temp/stylesheet_079a53040b.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/styles/ie6_or_less.css" title="patch for ie 6" media="screen" />
<link rel="stylesheet" type="text/css" href="fileadmin/styles/main_it.css" media="screen" />
...
Das Problem ist, dass die einzelnen Listen-Elemente untereinander und
nicht nebeneinander in einer Reihe platziert werden.
D.h., dass mein horizontales Menü vertikal bleibt.
Wie überschreibe ich die css? Ich habe es gerade mit diesem Code probiert aber
immer noch ohne Erfolg.
#nav {
width:100%;
list-style-type: none;
overflow:hidden;
}
#nav ul{
float:left;
display:inline;
list-style-type: none;
}
#nav ul li{
float:left;
display:inline;
}
Hat jemand noch eine Idee?
Gruß
Hallo Tevsa
Danke für Deine Antwort. Leider funktioniert mit
* html #nav ul li {
display:inline;
}
auch nicht.
Hast Du noch einen Tipp?
Mit freundlichen Grüßen
Hallo!
Ich habe es hingekriegt, dass das Menü horizontal bleibt. Aber jetzt klappt es
nicht mehr auf.
Hat jemand noch eine Idee?
Gruß
du hast ja auch das css ganz normal eingebunden...
Ich hab doch oben geschrieben dass du den Conditional Comment nutzen sollst. Hast du den denn in deinen Head eingebunden?
ich kann dir auch nicht ganz glauben dass das da steht:
<link rel="stylesheet" type="text/css" ref="typo3temp/stylesheet_079a53040b.css" />