ie links anders als mozilla

knuffiwuffi · 15.06.2009

Hallo,

ich habe ein kleines Problem, welches ich nicht ganz verstehe. In Mozilla wird meine Spry Menüleiste richtig dargestellt und übernimmt auch die CSS Anweisungen aus dem Spry CSS (nutze Dreamweaver CS), in IE scheinen die Pseudoklassen a:link etc. die Informationen teilweise zu überschreiben (in den Untermenüs werden z.B. nicht alle Links mit einem Unterstrich dargestellt wie es für a:link vorgegeben ist...sonst alles wie in a:link etc. definiert). Die Spry Links sollten aber doch eigentlich Ihre definierte Klasse für das Spry verfolgen und sich nicht nach den Pseudoklassen richten, oder?

Ärgere mich jetzt schon 8h mit dieser Sache herum und würde es nur gerne verstehen. Wäre dankbar für einen Tipp

Code:

...

</style>
<style type="text/css">

</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>

...

<div class="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html" title="START" id="HighlightStart">START</a> </li>
<li><a href="../Leitbild.html" title="SPEEDCLINIC" id="HighlightSpeedclinic">SPEEDCLINIC</a>
<ul>
<li><a href="../Leitbild.html" title="LEITBILD">LEITBILD</a></li>
<li><a href="../Leistungsspektrum.html" title="LEISTUNGSSPEKTRUM">LEISTUNGSSPEKTRUM</a></li>
<li><a href="../Referenzen.html" title="REFERENZEN">REFERENZEN</a></li>
<li><a href="../Team.html" title="TEAM">TEAM</a></li>
<li><a href="../Wissen.html" title="WISSEN">WISSEN</a></li>
</ul>
</li>
<li><a href="../Beratung.html" title="BERATUNG" id="HighlightBeratung">BERATUNG</a> </li>
<li><a href="../Management.html" title="MANAGEMENT" id="HighlightManagement">MANAGEMENT</a></li>
<li><a href="../Vertrieb.html" title="VERTRIEB" id="HighlightVertrieb">VERTRIEB</a></li>
<li><a href="../Kontakt.html" title="KONTAKT" id="HighlightKontakt">KONTAKT</a></li>
<li><a href="../Impressum.html" title="IMPRESSUM"id="HighlightImpressum">IMPRESSUM</a></li>
<li><a href="../AGB.html" title="AGB" id="HighlightAgb">AGB</a></li>
</ul>

Gebe gerne den Link zur Site bzw. weitere Infos, wenn ich das hier darf...sonst via PM.

leohh · 15.06.2009

AW: ie links anders als mozilla

Was steht denn alles in der SpryMenuBarHorizontal.css noch so drin.

vandyce · 15.06.2009

AW: ie links anders als mozilla

Hallo,

ich löse die Darstellungs unterschiede zwischen IE und FF meistens mit einem CSS-Reset.

HTML:

<head>
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />  
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

und wenn das nicht funktioniert baue ich mir eine zweite CSS-Datei die dann nur von IE benutzt wird

HTML:

<head>
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />  
<!--[if IE]>
<link rel="stylesheet" href="../SpryAssets/IE_SpryMenuBarHorizontal.css" type="text/css" media="screen" />
<![endif]-->
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
 </head>

ich hoffe das hilft dir weiter
MfG vandyce

agielen · 15.06.2009

AW: ie links anders als mozilla

Eine gute Möglichkeit, die Kompatibilität von css und IE zu durchforschen gibt es auf dieser Seite:

CSS Compatibility and Internet Explorer

icede · 15.06.2009

AW: ie links anders als mozilla

...oder bei "css4you" oder "selfhtml" - dort steht meist dabei, welcher Befehl jeweils übernommen wird und welcher nicht.....

knuffiwuffi · 15.06.2009

AW: ie links anders als mozilla

Danke für die Tipps.

Vandyce: Der Reset hat zwar gefunkt, mir dann aber auch einige andere CSS Formatierungen deaktiviert. Hat also leider so nicht geklappt. Trotzdem eine interessante Idee die ich grad mal hin und her probiert habe. Das CSS Reset kannte ich noch nicht. Danke!

Das komische ist: In einer etwas älteren Seite von mir hat es geklappt die Spry Links mit dem Spry CSS zu steuern und die anderen Links über Pseudoklassen, ohne daß diese CSS Informationen meine Spry CSS Infos überschreiben. Warum, wieso weshalb...bzw. wo der Fehler in meiner aktuellen Seite liegt kann ich nicht sagen. Der Aufbau scheint identisch.

Eine Änderung gibt es doch: Ich habe meinen DIV Containern diesemal Klassen zugeordnet und in der alten Version waren es immer IDs wo ich die Größe etc. festgelegt habe. Aber ob das etwas damit zu tun hat??

Ich werde einfach weiter probieren und die Seite noch einmal neu ausrichten. Die Breite soll eh auf unter 1000 Pixel gehen , da mein Notebook (1024x768) rechts 10 Pixel abschneidet und einen ganz kleinen Scrollbalken liefert. Bei der Gelegenheit schaue ich mir noch einmal die Logik an.

knuffiwuffi · 19.06.2009

AW: ie links anders als mozilla

So, wollte mich nur schnell melden. Ich habe die Seite auf 960 Pixel Breite mit DIV Containern neu gebaut und mein Problem mit den durchschlagenden Pseudoklassen Links dadurch gelößt, daß ich einfach keine übergreifende a link Pseudoklaase definiert habe (Außnahme Bilder), sondern für jeden Bereich eine eigene Link Klasse genommen habe. Klappt wunderbar und IE ist auch zufrieden...hier die Lösung im Code falls es jemanden interessiert:

...

.ColorLanguage {
background-color: transparent;
color: #999;
}
.ColorLanguage a:link {
background-color: transparent;
color: #999;
}
.ColorLanguage a:visited {
background-color: transparent;
color: #999;
}
.ColorLanguage a:hover {
background-color: transparent;
color: #FF0;
}
.ColorLanguage a:active {
background-color: transparent;
color: #999;
}
.ColorContent1 {
color: #000;
}
.ColorContent1 a:link {
background-color: transparent;
color: #000;
}
.ColorContent1 a:visited {
background-color: transparent;
color: #000;
}
.ColorContent1 a:hover {
background-color: transparent;
color: #999;
}
.ColorContent1 a:active {
background-color: transparent;
color: #000;
}
.ColorContent2 {
color: #000;
}
.ColorContent2 a:link {
background-color: transparent;
color: #000;
}
.ColorContent2 a:visited {
background-color: transparent;
color: #000;
}
.ColorContent2 a:hover {
background-color: transparent;
color: #999;
}
.ColorContent2 a:active {
background-color: transparent;
color: #000;
}

a img {
border: 1px solid #000;
}
a:hover img {
border: 1px solid #999;
}

...

</style></head>