Browserweiche - Bild wird nicht ausgeblendet

[C64]

Hallo,

meine erste Frage an euch bzgl. html

Also, ich möchte für den IE<7 ein bestimmtes Bild auf meiner Homepage anzeigen lassen, für den IE>=7 und für alle anderen Browser.

Dazu habe ich die Standardlösung mit Kommentaren benutzt.

Im Head steht:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="handheld" href="http://www.schwimmkurs-rummelsberg.de/gorgonsola/rw_common/themes/Matthias4/css/iesucks.css" />
<![endif]-->

In besagter CSS steht dann:

#iesucks {
display: none;
visibility: hidden;
overflow: hidden;
}


#iesucks1 {
position: relative;
}

(ich hab mal alles versteckt, was ging - eigentlich bräuchte ich ja nur "display: none;", aber das funktioniert net)

Im Body hab ich dann folgendes geschustert:

<!--[if lt IE 7]>
<div id="iesucks1"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/ie-sucks.png)%" alt="IE sucks" /></a></div>
<![endif]-->
<!--[if gte IE 7]>
<div id="iesucks1"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/IE7.png)%" alt="IE sucks" /></a></div>
<![endif]-->

<div id="iesucks"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/iesucks.png)%" alt="IE sucks" /></a></div>

Sprich, wenn IE verwendet wird, wird generell mal das alternative CSS geladen.
Im Body wird dann geschaut
IE<7 => lade Bild "ie-sucks.png"
IE>=7 => lade Bild "IE7.png"
und mit id iesucks1 angezeigt...

Laut CSS für den IE soll die id "iesucks" nicht angezeigt werden. Wird aber trotzdem angezeigt, so dass ich im Moment beide Bilder auf der Seite hab.
Wie die Bilder dargestellt werden ist mir eigentlich sowas von egal beim IE (inzwischen...)

Sehen könnt ihr das Ergebnis auf www.matthiasglienke.de

Wo könnte der Fehler liegen? Stehe gerade echt am Schlauch

Danke für Tips

 

[Slashwalker]

Werden beim IE beide CSS geladen? Sprich das IE und das normale? Wenn ja, kommt es auf die Reihenfolge an.
Denn wenn du zuert das iesucks.css lädts und dann das normale, überschreibt das normale die Werte des iesucks.css.
Oder du weist #iesucks anders zu:
html > body #iesucks << Diese Zuweisung blickt der trottelige IE nicht Zumindest der 6er, mit dem 7er hab ich es noch nicht testen können.

Du kannst aber auch folgendes tun:

 <!--[if lt IE 7]>
 <div id="iesucks1">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/ie-sucks.png)%" alt="IE sucks" /></a>
</div>
      <![endif]-->
    <!--[if gte IE 7]>
<div id="iesucks1">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/IE7.png)%" alt="IE sucks" /></a>
</div>
      <![endif]-->
 [COLOR=DarkRed]     <!--[if !IE]>[/COLOR]
<div id="iesucks">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/iesucks.png)%" alt="IE sucks" /></a>
</div>
[COLOR=DarkRed]       <![endif]-->[/COLOR]

Und ich persönlich würde dann auf den Firefox verlinken

 

[C64]

Danke dir erst mal für das schnelle Feedback.
Die überschreibende iesucks.css habe ich brav als letztes im head. Sonst würde es sich ja praktisch gar nicht lohnen, das Teil zu laden
Die Option mit "!IE" hatte ich ganz vergessen, allerdings dachte ich auch, dass nur der IE in den Kommentaren rumstöbert. Und es scheint schon mal mit Safari nicht zu funktionieren. Jetzt wird da nämlich gar nichts mehr angezeigt

html > body #iesucks

Check ich grad net, was du damit meinst

Ach ja, die Verlinkung bleibt bei Safari!!!

Mich wundert einfach nur, warum das Bild trotzdem angezeigt wird, obwohl ich doch auf "Display: none;" gestellt hab...

Dr. Edit sieht gerade: Ich kann dir gar kein Karma geben... müsste erst jemanden jede Menge andere bewerten...

 

[Slashwalker]

Im CSS statt:
#iesucks1{
position:relative;
}
einfach:
#iesucks1{
display:none;
}
html > body #iesucks1{
position:relative;
}

Dann bekommen nur "gute" Browser das position:relative zugewiesen, der IE6/7 bekommt ein display:none;

 

[C64]

Im CSS statt:
#iesucks1{
position:relative;
}
einfach:
#iesucks1{
display:none;
}
html > body #iesucks1{
position:relative;
}

Dann bekommen nur "gute" Browser das position:relative zugewiesen, der IE6/7 bekommt ein display:none;

Wenn der IE das aber net checkt, dann müsste ich das ja für alle anderen außer dem IE so definieren oder?

Bis ich gecheckt hab, dass du den Text inzwischen geändert hast...

Habs gerade ausprobiert. Ich muss ja iesucks definieren. Außerdem ist die Position fixed

#iesucks{
display: none;
}

html > body #iesucks{
position: fixed;
top: 20px;
right: 20px;
z-index: 3;
display: inline;
}

Musste noch ein Display im 2. Teil setzen, weil ja sonst das "none" bleibt. Bin mir aber grad nicht sicher was sauber ist block oder inline?

 

[Slashwalker]

"Sauber" sind beide. Sie verhalten sich nur anders in der Darstellung. Die 100% genau Definition weiss ich jetzt grad nicht, aber Block sollte in deinem Fall passen.

 

[C64]

Sehr geil

Mit dem IE 6.XY, Safari und Firefox funktionieren schon mal.
Bin mal gespannt, was der IE 7 daraus macht - aber den hab ich hier auf Arbeit nicht und muss auf meinen Bruder warten

Danke dir herzlich! Wenn ich drandenke, werde ich - sobald ich kann - mit Karma überhäufen

 

[Slashwalker]

Kein Thema, helfe gern

 

[pepi]

Laß doch einfach die Unterscheidung der IE Versionen ganz weg, IE sucks in any version.
Gruß Pepi

 

[C64]

So, jetzt hab ich endlich mal unter IE7 testen können. Dort werden beide Bilder angezeigt.
Die wichtigen Dinge sind derzeit so:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="handheld" href="http://www.schwimmkurs-rummelsberg.de/gorgonsola/rw_common/themes/Matthias4/css/iesucks.css" />
<![endif]-->


</head>
<body>
<div id="top"><a name="top"></a></div>

<!--[if lt IE 7]>
<div id="iesucks1"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/ie-sucks.png)%" alt="IE sucks" /></a></div>
<![endif]-->
<!--[if gte IE 7]>
<div id="iesucks1"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/IE7.png)%" alt="IE sucks" /></a></div>
<![endif]-->

<div id="iesucks"><a href="http://www.apple.com/de/safari/"><img src="%pathto(images/iesucks.png)%" alt="IE sucks" /></a></div>

und das CSS, das extra geladen wird:

#iesucks {
display: none;
}


#iesucks1 {
position: relative;
}

Nach meinem Empfinden müsste das jetzt eigentlich alles passen. Der IE 6 interpretiert alles richtig, auch Safari, Firefox und Opera. Nur der IE 7 zeigt mir nun beide Bilder an (also das für IE 7 und das für Safari/FF/Opera).
Noch jemand eine Idee?

 

[Slashwalker]

Werden beim IE beide CSS geladen? Sprich das IE und das normale? Wenn ja, kommt es auf die Reihenfolge an.
Denn wenn du zuert das iesucks.css lädts und dann das normale, überschreibt das normale die Werte des iesucks.css.
Oder du weist #iesucks anders zu:
html > body #iesucks << Diese Zuweisung blickt der trottelige IE nicht Zumindest der 6er, mit dem 7er hab ich es noch nicht testen können.

Du kannst aber auch folgendes tun:

 <!--[if lt IE 7]>
 <div id="iesucks1">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/ie-sucks.png)%" alt="IE sucks" /></a>
</div>
      <![endif]-->
    <!--[if gte IE 7]>
<div id="iesucks1">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/IE7.png)%" alt="IE sucks" /></a>
</div>
      <![endif]-->
 [COLOR=DarkRed]     <!--[if !IE]>[/COLOR]
<div id="iesucks">
<a href="http://www.apple.com/de/safari/"><img src="%pathto(images/iesucks.png)%" alt="IE sucks" /></a>
</div>
[COLOR=DarkRed]       <![endif]-->[/COLOR]

Und ich persönlich würde dann auf den Firefox verlinken

So wie ich es beschrieben hab.Pack die #iesucks in ein <!--[if !IE]>

 

[C64]

So wie ich es beschrieben hab.Pack die #iesucks in ein <!--[if !IE]>

Das hatte ich bereits, aber das geht logischerweise nicht. Denn die Kommentarfunktionen werden ja von anderen Browsern ignoriert.
Ich habs getestet und es funktioniert eben leider nicht.

 

[Slashwalker]

Okay, hier malein Grundgerüst für dein Vorhaben:

[SIZE=2]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/SIZE]
[SIZE=2]<html xmlns="http://www.w3.org/1999/xhtml">[/SIZE]
[SIZE=2]<head>[/SIZE]
[SIZE=2]<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />[/SIZE]
[SIZE=2]<title>Unbenanntes Dokument</title>[/SIZE]
[SIZE=2]<style type="text/css">[/SIZE]
[SIZE=2]#ie6{[/SIZE]
[SIZE=2]display:none;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#ie7{[/SIZE]
[SIZE=2]display:none;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]* html #ff{[/SIZE]
[SIZE=2]display:none;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]* html #ie6{[/SIZE]
[SIZE=2]display:inline;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]* + html #ie7{[/SIZE]
[SIZE=2]display:inline;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]* + html #ff{[/SIZE]
[SIZE=2]display:none;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]</style>[/SIZE]
[SIZE=2]</head>[/SIZE]
[SIZE=2]<body>[/SIZE]
[SIZE=2]<div id="ie6">Internet Explorer6</div>[/SIZE]
[SIZE=2]<div id="ie7">Internet Explorer7</div>[/SIZE]
[SIZE=2]<div id="ff">Firefox,Safari etc.</div>[/SIZE]
[SIZE=2]</body>[/SIZE]
[SIZE=2]</html>[/SIZE]

Ich habe es im Safari, Firefox,IE6 und IE7 getestet,es funktioniert! Und es ist valides CSS

 

[C64]

Okay, hier malein Grundgerüst für dein Vorhaben:
(...)
Ich habe es im Safari, Firefox,IE6 und IE7 getestet,es funktioniert! Und es ist valides CSS

Sehr schön. So einfach und es klappt!
Habs unter Safari, FF, Opera und IE 7 getestet und da klappt es endlich!!!
IE 6 teste ich morgen noch. Aber schaut gut aus.
War aber ne schwere Geburt.

Vielen herzlichen Dank!