1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Browserweiche - Bild wird nicht ausgeblendet

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von C64, 18.03.08.

  1. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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:
    In besagter CSS steht dann:
    (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:
    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 Schlaucho_O

    Danke für Tips:)
     
  2. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    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:
    Code:
     <!--[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 ;)
     
  3. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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;)

    Check ich grad net, was du damit meinsto_O

    Ach ja, die Verlinkung bleibt bei Safari!!! :innocent: ;) :p

    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...
     
  4. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    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;
     
  5. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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;)

    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?
     
    #5 C64, 18.03.08
    Zuletzt bearbeitet: 18.03.08
  6. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    "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.
     
  7. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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:)
     
  8. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Kein Thema, helfe gern :)
     
  9. pepi

    pepi Cellini

    Dabei seit:
    03.09.05
    Beiträge:
    8.741
    Laß doch einfach die Unterscheidung der IE Versionen ganz weg, IE sucks in any version. :)
    Gruß Pepi
     
    C64 gefällt das.
  10. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    So, jetzt hab ich endlich mal unter IE7 testen können. Dort werden beide Bilder angezeigt.
    Die wichtigen Dinge sind derzeit so:
    und das CSS, das extra geladen wird:
    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 ano_O (also das für IE 7 und das für Safari/FF/Opera).
    Noch jemand eine Idee?
     
  11. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    So wie ich es beschrieben hab.Pack die #iesucks in ein <!--[if !IE]>
     
  12. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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.
     
  13. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Okay, hier malein Grundgerüst für dein Vorhaben:
    Code:
    [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 ;)
     
  14. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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!
     

Diese Seite empfehlen