✔ Firefox in Vista gibt DIV einen Hintergrund, egal was passiert

[joobie]

Hallo,

Heute habe ich mal wieder eines dieser verrückten Probleme die wahrscheinlich nur dann passieren, wenn alles andere super geht. Es wäre ja keine Herausforderung wenn alles reibungslos funktionieren würde

Firefox in Windows Vista appliziert ein helles Cyan als Hintergrundfarbe für ein ansonsten transparentes DIV. Das ist wirklich interessant, weil ich selbst kein Vista habe und es nicht einmal testen kann.

Hier ist das Markup:

<div class="box"> <!--hat width + margin-->	
        <div class="boxtop"><h2>Titel</h2></div> <!--hat width + height + background-image-->
	<div class="boxbody"> <!--hat width + height + background-image -->
		<form name="submit" action="submit.php" method="post" onsubmit="return validateEmail();">
			<div class="row full"> <!--hat width; PROBLEMKIND********-->
				<label>Email:</label>
				<input class="formtxt" name="email" maxlength="250" type="text" />
					
			        <div class="small"> <!--hat width + margin-->
                                      Blabla <a href="privacy-policy.php">Privacy Policy</a>
                                </div>
                        </div>
                    <input type="hidden" name="x" value="y" /><!--insgesamt 10 hidden fields an dieser Stelle-->
                    <input type="submit" class="formsubmit" value="Submit" />
                </form>
          </div><!--close boxbody-->
</div><!--close box-->

Ich habe das etwas vereinfacht und mit Kommentaren versehen. PROBLEMKIND bedeutet dass dieses DIV in Vista/Firefox einen Cyan-Hintergrund hat, und zwar wirklich nur in Vista/FF!

Hier is der CSS code:

.box { width:520px; margin:0 auto; }
.box .boxtop { width:515px; height:71px; padding:15px 0 0 25px; background:url(img/boxtop.jpg) no-repeat; }
.box .boxbody { width:520px; position:relative; }

form { padding:10px 20px 0 20px; }
form .row { width:295px; padding:5px 10px; overflow:hidden; }
form .row input.formtxt { padding:5px; font-size:1.4em; font-weight:bold; color:#4D4D4D; border:1px solid #D20019;}

form .row.full { width:460px; background:transparent; /*background added, kein Effekt*/ }
form .row.full input.formtxt { width:400px; }
form .row.full .small { width:240px; margin:0 0 0 45px; }

Hat jemand eine Idee woran das liegen könnte? Die Seite validiert als XHTML transitional und CSS 2.1.

Danke im Voraus für jede Hilfe / Input!

Cheers

 

[Maik]

Hi,

hab auch kein Vista zum Gucken

Und wenn du als erste Gegenmaßnahme die Spezifität der "kritischen" Selektoren mittels ".box .boxbody" erhöhst, und/oder am Ende der Regel ein !important angibst?

.box .boxbody form .row.full { width:460px; background:transparent !important; }

mfg Maik

P.S. Wird denn der cyan-Hintergrund aus irgendeiner CSS-Regel geerbt, die du hier nicht gezeigt hast?

 

[Sven Mintel]

Ich sehe da kein CSS-Format, welches helles cyan produzieren könnte(es sei denn, boxtop.jpg besitz diese Farbe).

Vielleicht hat derjenige einfach Probleme mit der Farbeinstellung seines Monitors, oder am User-CSS des Firefox herumgespielt, oder aber sollte einen Augenarzt konsultieren

 

[joobie]

Hi,

Danke Maik, gute Idee, ich habe die Spezifität auf 100% erhöht und !important angefügt, und warte nun auf Feedback von dem armen Vista-Opfer Werde hier posten sobald ich weiß ob das geholfen hat!

Diese Farbe wird sonst nirgendwo benutzt. Nach näherem Hinsehen bin ich mir auch nicht wirklich sicher, ob es überhaupt als Cyan durchgeht... Könnte auch ein helles Grau sein. Es erinnert mich an IE6 und wie er Alpha-transparente PNGs behandelt - nur dass das Vista und Firefox ist, und ich keinerlei PNGs in der kompletten Website benutzt habe.

Ich habe einen Screenshot angefügt, den wir nun gemeinsam bewundern können.

Sven, das hätte ich normalerweise auch gedacht mit dem Augenarzt Aber schau dir das Screenshot an, es ist wirklich Vista! Nicht dass mich das wundert, lol. Bestimmt hat wieder mal Microsoft die Finger im Spiel...

 

[Sven Mintel]

Nutzt du denn irgendwo im CSS diesen Farbwert(#ddebf8)?

 

[joobie]

Daran habe ich auch gedacht - nein, dieser Farbwert wird nirgendwo benutzt.

Das einzige, was dem nahekommt, ist der Farbwert #E6E6E6, der aber sehr spezifisch definiert ist:

.boxlarge.info .boxbody { width:526px; background:#E6E6E6; margin:0 12px; padding:15px; }

Und das ist auch das einzige Element, das eine Hintergrundfarbe besitzt (ausgenommen body mit #FFF).

Es ist auch weit entfernt von dem Problem-Div (nach Änderung sieht das so aus):

.box .boxbody form .row.full { width:460px; background:transparent !important; }

...oder nicht? .boxlarge.info nimmt auf einer anderen Seite die Stelle von .box ein.

Ich habe noch nicht zurückgehört ob Maik's Vorschlag geholfen hat - wenn nicht, werde ich versuchen die boxbody Klassen umzubenennen, obwohl es mir immer noch schleierhaft ist wie das eine das andere betreffen könnte.

Danke!

 

[Maik]

Ich denke, für FF unter Vista haben wir heute erstmal unser Bestes getan - warten wir einfach das Feedback in den kommenden Tagen ab

mfg Maik

 

[Sven Mintel]

Lass dir von dem Testkandidaten mal folgende Dinge zukommen(sofern sie existieren):
userChrome.css
userContents.css

sie befinden sich im Profilverzeichnis des FF im Unterverzeichnis chrome

Ich könnte mir gut vorstellen, dass dort irgendwo ein entsprechendes Format drinnen steht welches bspw. von einem Skin verwendet wird.

 

[joobie]

Gute Idee, Sven, ich werde das anfordern falls das Problem noch nicht gelöst sein sollte.

Ansonsten stimme ich Maik zu. Vielen Dank für die tolle Hilfe soweit! Ein schönes Wochenende ohne Vista wünsche ich Euch

 

[Klein0r]

Mh ich habe zwar nichts getestet - aber habe Vista und auch FF installiert.

Ähnliche Dateien habe ich nirgends gefunden. Nur in diesem Verzeichnis:
C:\Program Files\Mozilla Firefox\defaults\profile\chrome\

userChrome-example.css
userContent-example.css

Diese enthalten bei mir aber ausschließlich Kommentare (bis auf eine "@namespace"-Zeile)

Ein Link zu dieser Seite existiert aber nicht, oder?
Sonst könnte man das mal genauer testen... Falls das Problem nicht schon gelöst ist

lg