Ergebnis 1 bis 7 von 7

Thema: Internet Explorer interpretiert CSS-Code falsch

  1. #1
    Teeny
    Registriert seit
    13.01.2006
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Internet Explorer interpretiert CSS-Code falsch

    Hallo,
    ich wollte bei einer HTML-Seite mit folgendem CSS-Code Links formatieren:

    Code:
    <style type="text/css">
    #buttons a&#58;hover img &#123;
     background-color&#58;#C1D2EE;
     border&#58;1px solid #316AC5;
     padding&#58; 0px;
    &#125;
    #buutons img &#123;
    	padding&#58; 1px;
    	border&#58; none;
    &#125;
    </style>
    Dieser Code soll einen Mouse-Over-Effekt realisieren. Die Bilder die als Link dienen sind in meinem Fall Gifs mit transparentem Hintergrund. Wenn man mit der Maus über diese Bilder fährt soll sich ihre Hintergrundfarbe ändern und sie sollen mit einem Rahmen dargestellt werden. Ich habe dies in Firefox und Netscape ausprobiert. Dort funktioniert es wunderbar. Der Internet Explorer Version 6.0 stellt den Mouse-Over-Effekt jedoch überhaupt nicht da. Erst, wenn man die Verschachtelung (#buttons a:hover img) aufhebt, funktioniert es. Aber das will ich ja eigentlich nicht.

    Daher lautet meine Frage, ob ich einen Fehler gemacht habe oder ob dies ein Bug des IE ist. Und viel wichtiger: Gibt des eine browserunabhängige und W3C-konforme Lösung, die funktioniert?

    Danke im vorraus,
    Daniel
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Ich weiß nicht, ob du dich jetzt nur hier im Forum verschrieben hast, oder ob es wirklich einmal "buutons" heißen soll?

    Auch verstehe ich den Sinn der transparenten Gifs nicht so ganz, wenn du ohnehin Gifs einsetzen willst, dann mach die doch gleich in der richtigen Farbe.

    Hovereffekt mit Gifs und CSS:
    Code:
    <style type="text/css">
    <!--
    .button a&#58;link &#123;background-image&#58;url&#40;../images/normal.gif&#41;;background-repeat&#58;no-repeat;&#125;
    
    .button a&#58;hover &#123;background-image&#58;url&#40;../images/hover.gif&#41;&#125;;
    -->
    </style>
    Da kämen dann noch Styles für die Schriftfarbe zu und natürlich ggf. Styles für a:visited, a:active und a:focus.
    Du kannst aber statt Text auch transparente Gifs benutzen, auf denen dann der Text draufgepinselt ist, ganz wie du magst.
    Am Besten geht das, wenn du für die Navigation eine blinde Tabelle benutzt, da reicht es dann aus, wenn du der Tabelle generell die Klasse 'button' zuweist, du brauchst es nicht bei jeder zelle wiederholen. Allerdings solltest du dann die Styles für "a:link" noch erweiteren mit den Angaben "height, width, display:block" sowie je nach Geschmak Rahmenfarben und -effekte für die Button.

    Wenn du besser ohne Grafiken auskommen willst, dann läßt die die Definition für eine Hintergrundgrafik weg und setz dafür ein 'background-color' ein.

    G.a.d.M.

    Ronald

  3. #3
    Gast

    Standard

    Was das "buutons" angeht, habe ich mich verschrieben.

    Das Problem bei deiner Lösung ist, dass in diesem Fall soweit ich weiß, die Grafiken erst geladen werden, wenn der User auch tatsächlich mit der Maus darüber geht. Dies verursacht eine Verzögerung beim MO-Effekt, die ich vermeiden möchte. Außerdem erhöht es natürlich auch das Gesamt-Ladevolumen der Webseite. Daher also die transparenten Gifs. Da die entsprächenden Grafiken im übrigen nicht Teil einer Navigation sind, sonder eines Texteditors für Foren und ähnliches, halte ich auch die Background-Image Lösung für ungeeignet. Zum besseren Verständnis hier der Code:

    Code:
    ...
    <td style="text-align&#58;left;" id="buttons">
    [img]b.gif[/img]
    [img]i.gif[/img]
    [img]u.gif[/img]
    [img]strich.gif[/img]
    [img]left.gif[/img]
    [img]center.gif[/img]
    [img]right.gif[/img]
    [img]strich.gif[/img]
    [img]listnum.gif[/img]
    [img]list.gif[/img]
    [img]indent.gif[/img]
    [img]strich.gif[/img]
    [img]link.gif[/img]
    [img]quote.gif[/img]
    </td>
    ...
    So wie die Webseite in Firefox und Netscape angezeigt wird, gefällt sie mir eigentlich sehr gut. Deswegen möchte ich eigentlich keine Maßnahmen ergreifen, die das Layout verändern würden. Außerdem kann ich auf Hintergrundbilder keinen Link setzen.

  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ohje - was machst du da denn ?

    Bei abgeschalteten Javascript geht auf deiner HP ja gar nichts mehr.
    Dann mach doch auch gleich die Hover-Effekte in Javascript - was
    nützen dir sonst Hover, wenn die Links dafür nicht anklickbar sind ?

    Ich würde das gerne mal komplett sehn = URL

    Zu deinem letzten posting: Du wirfst da eine ganze Menge Dinge durcheinander, die zusammengfaßt völlig unlogisch sind.

    Zitat Zitat von Anonymous
    Das Problem bei deiner Lösung ist, dass in diesem Fall soweit ich weiß, die Grafiken erst geladen werden, wenn der User auch tatsächlich mit der Maus darüber geht. Dies verursacht eine Verzögerung beim MO-Effekt, die ich vermeiden möchte.
    Wenn du für jeden Link eine andere Grafik benutzt, dann ist diese Aussage richtig und man sollte die Grafiken schon vorladen, sonst kommt es beim ersten hover zu einer kurzen Verzögerung. Bei anschließenden Hover sind die Grafiken jedoch bereits im Cache und du siehst keine Verzögerung mehr.

    Zitat Zitat von Anonymous
    Außerdem erhöht es natürlich auch das Gesamt-Ladevolumen der Webseite. Daher also die transparenten Gifs.
    Auch deine transparenten Gifs müssen ja alle geladen werden, da ist kein wirklichen Unterschied ob farbig oder transparent.

    Zitat Zitat von Anonymous
    Da die entsprächenden Grafiken im übrigen nicht Teil einer Navigation sind, sonder eines Texteditors für Foren und ähnliches, halte ich auch die Background-Image Lösung für ungeeignet.
    Häh?
    Es geht hier doch einzig und allein um den Hovereffekt - was du damit steuerst, ist dem Effekt doch egal.

    Zitat Zitat von Anonymous
    Außerdem kann ich auf Hintergrundbilder keinen Link setzen
    Mag sein, daß du es nicht kannst - generell geht es aber (mit einem kleinen Trick und ohne JS).

    G.a.d.M.

    Ronald

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    13.01.2006
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich habe das ganze unter http://www.jugendarbeit-online.de/test/texteditor.php online.

    Danke, dass du dir die Mühe damit machst, aber ich habe echt keinen Plan, warum das im IE nicht geht.

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So, ich hab das alles mal etwas nach meinem System geordnet und nun klappt es auch im IE: http://web306.server3.webplus24.de/t...exteditor.html

    Wenndu es haben willst, dann kanst du es unter http://web306.server3.webplus24.de/t...texteditor.rar herunterladen (33kb) - da sind dann zwar die Grafiken noch einmal dabei, aber ich habe sie teilweise in einen zusätzlichen Unterordner gelegt. Das dient zwar nicht der Funktion, aber der Übersicht.

    Schau es dir an und dann gib feedback

    G.a.d.M.

    Ronald

  7. #7
    Teeny
    Registriert seit
    08.01.2006
    Beiträge
    32
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Der Download Link geht net, nur so als Info

    edit: geht doch ^^

Ähnliche Themen

  1. internet explorer mach alles falsch
    Von spyderz3r0 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 01.06.2008, 20:47
  2. Internet Explorer stellt Hyperlink in CSS Menue falsch dar
    Von sparen-wie-schwaben im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 01.04.2008, 22:47
  3. PHP code soll nicht interpretiert werden!
    Von felixstoessel im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 31.12.2007, 20:35
  4. just4info: IE interpretiert CSS-Selektor-Kombies falsch
    Von Torty im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.11.2007, 12:26
  5. Tabelle falsch im Internet Explorer! Hilfe!!
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.01.2007, 15:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •