IE7 lädt bestimmte Grafiken nicht

Minobu

Aktives Mitglied
Thread Starter
Dabei seit
01.07.2006
Beiträge
240
Reaktionspunkte
10
moin,

auf kundenwunsch(des CDs wegen) haben die die schaltflächen/buttons für eine newsletter anmeldung eine grafik als hintergrund.

nun hatten schon 2-3 leute probleme mit der darstellung der grafiken, dh. die grafiken wurden nicht angezeigt. natürlich tritt dieses problem, nur im ie7 auf. allerdings nicht in jedem ie7. ich habe zbsp exakt die version, wie zwei "problemkandidten" aber bei mir wird es angezeigt. interressanterweise klappt es bei den "problemkandidaten im firefox ohne probleme! andere ie7 user, auch mit anderen versionen, haben diese probleme nicht.

dies führt mich zu der annahme, das es sich um ein lokales problem handeln muß. welches könnte das sein? cache, cookies etc. haben wir schon gelöscht. bringt aber keine abhilfe.



Code:
<input id="nlSubSend" type="submit" value="" name="whatever"/>
<input id="nlSubCancel" type="submit" onclick="document.forms[0].action='';" value="" name="whatever"/>

Code:
input#nlSubSend {
background-image:url(../images/button_contact.gif);
background-position:left top;
background-repeat:no-repeat;
border:medium none;
color:#FFFFFF;
font-weight:bold;
height:20px;
margin:10px 0pt;
width:121px;
}


input#nlSubCancel {
background-image:url(../images/button_contact_ab.gif);
background-position:left top;
background-repeat:no-repeat;
border:medium none;
color:#FFFFFF;
font-weight:bold;
height:20px;
margin:10px 0pt;
width:121px;
}
 
Und warum läßt du das "input" im Namen der Layer nicht einfach weg?
Also einfach notieren: #nlSubCancel
 
aye, habe ich vergessen zu erzählen. das ganze ist bestandteil des newsletter moduls von typo3. die internen verlinkungen stammen vom system.

übrigens tritt das problem gar nicht beim ie6 auf :D
 
Schon mal getestet, ob das Bild bei den Problemkandidaten dargestellt wird, wenn sie es direkt aufrufen? http ... /images/button_contact.gif
 
Zuletzt bearbeitet:
ja das ist das nächste, separat mit direktem aufruf werden die bilder problemlos angezeigt. so langsam beiße ich hier in die tischkante.
 
Hat der IE nicht schon immer Probleme mit Hintergrundbildern in Formularelementen gehabt? Meine da wär was gewesen.
 
davon weiß ich nichts, was aber nichts zu bedeuten hat :)

habe dies auch schon bei einer vielzahl von projekten eingesetzt, ohne diese problematik.
 
http://www.cayenne.co.uk/ie7/disappearing-content.html Ob das in die richtige Richtung deutet? Ich glaub eher nicht, sonst tauchte das Problem ja generell im IE 7 auf. Aber um auszuschließen, dass andere Seiten-Elemente die Darstellung beeinflussen, würde ich einfach mal aus den Angaben, die du gepostet hast, eine Testseite ohne weiteres Drumunddran bauen. Es gibt zumindest eine Einstellung im IE 7:
"Visuelle Stile auf Schaltflächen und Steuerelementen in Webseiten aktivieren." Allerdings werden mir die Hintergrundbilder trotzdem angezeigt.
 
"Visuelle Stile auf Schaltflächen und Steuerelementen in Webseiten aktivieren." Allerdings werden mir die Hintergrundbilder trotzdem angezeigt.

Ich vermute diese Einstellung bezieht sich darauf dass die erwähnten Elemente sich dem Skin von Windows anpassen.
 
Da würde ich mal ansetzen: validator.w3.org -> 50 Fehler.
In Zeile 57 fehlt ein </li>
Validation Output: 50 Errors

Line 57, Column 381: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
…;">vit.newsletter</a><li class="lvl1"><a href="index.php?id=news-archiv" targ
 
Zuletzt bearbeitet:
Bei mir siehts so aus im IE 7:
attachment.php
 

Anhänge

  • Bild3.png
    Bild3.png
    6 KB · Aufrufe: 103
@ UDH5 ist der Suchen button bei dir da? der wird ja genauso eingebunden.


ich habe mal nach dem validator die end tags für die buttons geändert und das onlick klein geschrieben. schau mal bitte ob es jetzt klappt.

Code:
<input class="inputCheckBox" type="checkbox" name="FE[tt_address][module_sys_dmail_html]" value="1" />
<br />
<br />
<input type="submit" name="whatever" value="" id="nlSubSend" />
<input type="submit" name="whatever" value="" id="nlSubCancel" onclick="document.forms[0].action='';" />
 
Zuletzt bearbeitet:
Hast Du schon mal versucht den AlphaImageLoader-Filter dafür zu misbrauchen?

Code:
<!--[if IE 7]>
   <style type="text/css">
      input#nlSubSend {
         background:none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/button_contact.gif');
      }
      input#nlSubCancel {
         background:none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/button_contact_ab.gif');
      }
   </style>
<![endif]-->
Ich habe hier gerade keinen IE7 zur hand, kann deshalb nicht testen ob das einen Unterschied macht.

Ansonsten gäbe es noch die Lösung im IE7 auf die Buttons zu verzichten und einfach Grafiken mit onclick-Handler zu versehen. Das würde ich dann so umsetzen dass die bisherigen Buttons für den IE7 augeblendet werden.
Code:
<!--[if IE 7]>
   <style type="text/css">
      input#nlSubSend, input#nlSubCancel {
         display:none;
      }
   </style>
<![endif]-->
Die Grafiken mit onclick-Handler würde ich dann mit JavaScript einsetzen mit einem Fallback, falls JS deaktiviert ist.
Code:
<!--[if IE 7]>
   <script type="text/javascript">
   /* <![CDATA[ */
      document.write('<img src="../images/button_contact.gif" onclick="document.forms[0].submit();" />');
      document.write('<img src="../images/button_contact_ab.gif" onclick="document.forms[0].action=\'\'" />');
   /* ]]> */
   </script>
   <noscript>
      <div>
         <input type="submit" name="whatever" value="abschicken" id="nlSubSend_IE7_fallback" />
         <input type="submit" name="whatever" value="abbrechen" id="nlSubCancel_IE7_fallback" onclick="document.forms[0].action='';" />
      </div>
   </noscript>
<![endif]-->
Die Grafiken können dann ja noch per CSS angepasst werden (border,margin) und als Fallback gibt es für den IE halt hässliche Buttons.
 
Der Suchbutton ist da, aber du solltest besser die Seite selbst mit dem Validator überprüfen, vielleich erledigt sich das Problem ja mit validem Quellcode, zumindest lässt sich dann eine Fehlerquelle ausschließen. Ein nicht richtig geschlossener Tag
Code:
vit.newsletter</a>[COLOR="Red"][B]</li>[/B][/COLOR]<li class="lvl1">
kann unerwartete Auswirkungen haben (sind immer noch 43 Fehler).

Den HTML-Validator gibts übrigens auch als Firefox Add-on; finde ich sehr praktisch, wenn man schon beim Seitenaufruf in der Statusleite angezeigt bekommt, dass Validierungsprobleme vorhanden sind.
 
ich glaube eher nicht, das ein /li fehlt, sondern das die zu viel sind.

Code:
The previous list, for example, is an unordered list, created with the UL element:

<UL>
<LI>Unordered information. 
<LI>Ordered information. 
<LI>Definitions. 
</UL>

lists in documents

btw, es fehlt definitiv kein schließendes /li an der stelle.


manchmal aber nur manchmal tragen validatoren nicht unbedingt zur fehlerfindung bei. ;)
 

Anhänge

  • 1.jpg
    1.jpg
    42 KB · Aufrufe: 49
Das wäre richtig, würdest Du den Doctype in Deinem Dokument benutzen dessen Spezifikationen Du Dir gerade angeschaut hast.
Du verwendest XHTML, und da ist ein schliessendes </li> Pflicht.

http://www.w3.org/TR/xhtml1/#h-4.3
 
  • Gefällt mir
Reaktionen: Minobu
Dein Screenshot bezieht sich nicht auf die richtige Stelle im Quelltext.

Der Fehler taucht erstmals im Menü links auf
<ul class="lvl1">
<li class="lvl1"><a href="index.php?id=inform" target="_top" onfocus="blurLink(this);">vit.inform</a></li>
<li class="lvl1aktiv"><a href="index.php?id=newsletter" target="_top" onfocus="blurLink(this);">vit.newsletter</a>
<li class="lvl1"><a href="index.php?id=news-archiv" target="_top" onfocus="blurLink(this);">News-Archiv</a></li>
</ul>
Man sollte immer den Fehler beseitigen, der vom Validator zuerst angemeckert wird, dann ist es durchaus möglich, dass Folgefehler von selbst verschwinden; schließlich stehen die Anmerkungen in Relation zum gesamten Dokument.
 
Also, ich hab mal den Quelltext bei mir mit absoluten URLs getestet:

Problem: background-style

so gehts:
HTML:
background: url(http://www.vit.de/fileadmin/templates/images/button_contact.gif) 0 0 no-repeat;

und so gehts
HTML:
background-color: #fff;
background-image: url(http://www.vit.de/fileadmin/templates/images/button_contact.gif);
background-position: left top;
background-repeat: no-repeat;

ohne background-color gehts im IE 7 erstmal nicht:
HTML:
background-image: url(http://www.vit.de/fileadmin/templates/images/button_contact_ab.gif);
background-position: left top;
background-repeat: no-repeat;

Aber wenn border: 0 vorangestellt wird (wie beim suchfeld), und nicht wie z.Z. ans Ende, gehts auch ohne background-color:
HTML:
border: 0;
background-image: url(http://www.vit.de/fileadmin/templates/images/button_contact_ab.gif);
background-position: left top;
background-repeat: no-repeat;
 
  • Gefällt mir
Reaktionen: Minobu
@UDH5

Danke für Deine Mühen und Einsatz. Eigentlich sind es immer die einfachen Dinge, die nicht beachtet zu großen Problemen werden können. :D
 
Zurück
Oben Unten