✔ css code geht nicht unter IE7

D

dreamer29

Mitglied
Hallo,
ich habe von einem kollegen css code bekommen für eine komponente die ich mit jsf erstellt habe , allerdings geht das nur unter firefox und nicht unter explorer.

code :

CSS: 
ol, ul {
	list-style: none;
    }



a  {
   outline:none;
   }

body {
    margin-right:10px;
    line-height: 1;
    font: 1em arial, sans-serif;
    text-align:left;
    color: #000;
    min-width: 60.88em;
    }

a{
    text-decoration:none;
    color:#000;
  }
#menue{
    height: 30px;
    font: 90% normal Arial, Helvetica, sans-serif;
    z-index:100;
    background: url(../images/logo.png) no-repeat 100% 4px;
	}
	#menue ul{
    float:left;
    width:100%;
    position:relative;
    }

span.menuetag{
    display: block;
    cursor: default;
    }

    #menue ul li{
    float:left;
    margin: 0;
    }

#menue ul li a{
    display:block;
    padding:3px 10px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    height:auto;
    }

#menue a:hover, #menue ul ul a:hover{
    background-color: #009ee0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    color:#FFF;
    }

#menue :hover > a, #menu ul ul :hover > a{
    background-color: #009ee0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    color:#FFF;
    }

#menue ul li li{
    float:none;
    }

#menue ul ul.untermenue{
    color: #d9d9d9;
    background: #fff;
    border:1px solid #c0c0c0;
    position:absolute;
    width:178px;
    left:-9999px;
    top:19px;
    z-index:144;}

#menue ul ul.untermenue_aufgeklappt{
    color: #d9d9d9;
    background: #fff;
    border:1px solid #c0c0c0;
    position:absolute;
    width:178px;
    top:19px;
    z-index:144;}

#menue ul li:hover ul{
    left:auto;
    }

#menue ul li li.linieunten{
    border-bottom:1px solid #c0c0c0;
    }

#menue ul li li.inaktiv_linieunten{
    padding: 5px 44px 5px 14px;
    border-bottom:1px solid #c0c0c0;
    }

#menue ul li li.inaktiv{
    padding: 5px 44px 5px 14px;
    }

#menue ul ul.untermenue li a,
#menue ul ul.untermenue_aufgeklappt li a{
    background-color: #fff;
    display:block;
    padding: 5px 44px 5px 14px;
    }

#menue ul ul.untermenue li a:hover,
#menue ul ul.untermenue_aufgeklappt li a:hover {
    background-color: #009ee0;
    border-left:1px solid #009ee0;
    border-right:1px solid #009ee0;
    color:#FFF;
    }

was kann ich ändern damit es unter ie7 gehten wird?
 
Zuletzt bearbeitet von einem Moderator:
firefox und ie reagieren unterschiedlich auf csscode.

Entweder spielste mit den zahlen rum bis es auf ie passt was aber dumm ist
dann klappt es nicht mehr unter firefox.

Es gab aber auch eine möglichkeit für ie und firefox einzelnd zu programmieren.
Da müsstes du nochmal googlen.

Hab leider meine Unterlagen nicht hier deswegen kann ich dir nur soviel weiter helfen.

mfg
Skiline
 
Hi.
dreamer29 hat gesagt.:
allerdings geht das nur unter firefox und nicht unter explorer.

was kann ich ändern damit es unter ie7 gehten wird?
Zum Vergrößern anklicken....
Verrätst du uns bitte zunächst mal, was der IE7 in dem Stylesheet nicht wie gewünscht interpretiert?

Ist ja schließlich kein "Einzeiler", den du hier präsentierst, aus dem es klar hervorgehen würde, wovon du sprichst.

Der dazugehörige HTML-Code wäre zudem recht hilfreich, um das Ergebnis in den Browsern vergleichen zu können.

Abschliessend noch die Bitte an dich, unsere Netiquette bzgl. deiner durchgängigen Kleinschreibung zu beachten, die in unserem Forum nicht erwünscht ist - vielen Dank! :)

mfg Maik
 
Hi,
das was Skiline meint ist eine Browserweiche. Die ist in den meisten Fällen aber nicht notwendig da die Probleme mit einem CSS Hack oder Workaround erledigt werden können.
Könntest du uns vielleicht sagen was den nicht funktioniert? Weil das gar nichts funktioniert kann eigentlich nicht sein.

Gruß
 
Hab mir mal ein kleines Testmenü aus deinem CSS-Code gestrickt, um in den Genuß des Darstellungunterschieds zu kommen ;-)

Lösung, damit browserübergreifend das Submenü linksbündig unter dem Menüpunkt sitzt: Der von Browser zu Browser unterschiedlich voreingestellte linke Außen- oder Innenabstand für das <ul>-Listenelement wird auf null zurückgesetzt.

CSS: 
#menue ul{
    float:left;
    width:100%;
    position:relative;
    margin-left:0; /* linker Außenabstand */
    padding-left:0; /* linker Innenabstand */
    }

Sollten aber die Submenüs bei dir im IE7 beim Überfahren der Menüpunkte überhaupt nicht erscheinen (Stichwort: "geht nicht"), liegt's schlichtweg an einer fehlenden oder falsch gewählten Dokumenttyp-Deklaration für das HTML-Dokument, mit der die komplette IE-Familie in den "Quirks Mode" schaltet, anstatt im standardkonformen Modus zu laufen. Und in diesem proprietären Darstellungsmodus verhalten sich IE7 und IE8, wie ihr Vorgänger IE6, der die :hover-Pseudoklasse für das <li>-Element im Selektor "#menue ul li:hover ul" nicht unterstützt.

In meiner Testseite hab ich diesen Doctype genutzt:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Möglich ist aber auch einer dieser Doctypes, um das Dokument den Browsern im standardkonformen Modus zu übergeben:
  • HTML 4.01:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Falls du den IE6 bei der Entwicklung berücksichtigen möchtest ("unter IE7" könnte man ja fast so interpretieren), empfehle ich dir http://code.google.com/p/ie7-js/ - das Script fixt so manchen fiesen IE6-Bug und gibt ihm "Nachhilfe" in der W3C-Standard-Interpretation :)

mfg Maik
 
Hallo Maik,

danke für deine Antwort ,es klappt jetzt unter ie7 ,ich hatte da den falschen DOCTYPE angegeben.
Ich habe jetzt ein anderes Problem und zwar wenn der Menü aufgeklappt wird ,wird er vom unteren Element(eine Tabelle) umflossen.
was kann ich ändern damit der Menü über die Tabelle angezeigt wird.

Code:

<div id="menue">
<ul class="toplevel">

<li><a href="#"><span class="menuetag">Datei</span></a>

<ul class="untermenue">
<li><a href="#">Neu</a></li>
<li><a href="#">kopieren</a></li>
<li><a href="#">Drucken</a></li>
<li><a href="#">Profil</a></li>
</ul>

</li>
</ul>
</div>
 
Hi,

für #menue ist zwar eine Schichtposition z-index:100 angegeben, nur greift sie ohne eine Angabe zur Positionsart position (absolute oder relative) nicht.

CSS: 
#menue{
    height: 30px;
    font: 90% normal Arial, Helvetica, sans-serif;
    z-index:100;
    background: url(../images/logo.png) no-repeat 100% 4px;
    position:relative; /* relative Positionsart */
    }


mfg Maik
 
dreamer29 hat gesagt.:
Ich habe jetzt ein anderes Problem und zwar wenn der Menü aufgeklappt wird ,wird er vom unteren Element(eine Tabelle) umflossen.
was kann ich ändern damit der Menü über die Tabelle angezeigt wird.
Zum Vergrößern anklicken....
Ich glaub, ich hab dein Anliegen vorhin mißverstanden ;-)

clear:left für die Tabelle (oder für ein umschliessendes <div>...</div>) bricht den Umfluß des Menüs ab.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück