Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „ie links anders als mozilla“

knuffiwuffi

Nicht mehr ganz neu hier

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">
<!--
a:link {
text-decoration: underline;
color: #999;
}
a:visited {
text-decoration: underline;
color: #999;
}
a:hover {
color: #F00;
outline: none;
text-decoration: underline;
}
a:active {
outline: none;
text-decoration: underline;
color: #999;
}
a img {
border-width: 1px;
border-style: solid;
border-color: #000;
}
a:hover img {
border-width: 1px;
border-color: #F00;
border-style: solid;
}
-->
</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.
 

V

vandyce

Guest

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
 

icede

Aktives Mitglied

AW: ie links anders als mozilla

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

knuffiwuffi

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben