Background in DIV niet zichtbaar in IE

[TimVN]

Ik ben een website aan het maken waar in de header een plaatje staat met een gradient er achter. De gradient genereer ik in CSS met het plaatje er voor.
Nu test ik het in de volgende browsers:

Chrome - Boem! Prachtig, precies zoals ik het bedoel.
Firefox - At your service! Doet ook precies wat ik wil.
Internet Explorer - ...

Ik heb al veel aanpassingen moeten doen omdat de website er simpelweg gehandicapt uit zag in IE
Het enige wat nu nog problemen veroorzaakt is meneer achtergrond in de header in IE.

Dit is de CSS;

	border: 1px solid;
	border-color: rgba(0,0,0,0.1);
	border-bottom-color: rgba(0,0,0,0.2);
	border-top: none;
	background: #f7f7f7;
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat; /* Old browsers */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, -moz-linear-gradient(left,  #d62222 0%, #fc2020 51%, #d62222 100%); /* FF3.6+ */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0%,#d62222), color-stop(51%,#fc2020), color-stop(100%,#d62222)); /* Chrome,Safari4+ */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, -webkit-linear-gradient(left,  #d62222 0%,#fc2020 51%,#d62222 100%); /* Chrome10+,Safari5.1+ */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, -o-linear-gradient(left,  #d62222 0%,#fc2020 51%,#d62222 100%); /* Opera 11.10+ */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, -ms-linear-gradient(left,  #d62222 0%,#fc2020 51%,#d62222 100%); /* IE10+ */
	background: url(http://weervindbaar.nl/images/banners/Bouwbak-logo-tekst.png) no-repeat, linear-gradient(to right,  #d62222 0%,#fc2020 51%,#d62222 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62222', endColorstr='#d62222',GradientType=1 ); /* IE6-9 */
	background-clip: padding-box;
	background-position: 40px 25px;
	background-position-x: 40px;
	background-position-y: 25px;
	border-radius: 0 0 5px 5px;
	max-height: 139px;

Weet iemand wat ik fout doe? IE zou echt verboden moeten zijn.

 

[Milenko]

Kijk hier eens: http://webdesignerwall.com/tutorials/cross-browser-css-gradient

ms-linear-gradient werkt niet. Je hebt de filterrogid: nodig voor IE. Dit werkt volgens mij voor IE8 en hoger (IE7 weet ik niet). Wat je ook zou kunnen doen, is de gradient in Photoshop maken. Maak er een PNG'tje van en plak deze ook als een background in de div. Je verliest bijna geen laadtijd (omdat het een background is) en je weet zeker dat het werkt.

Succes ermee!

 

[TimVN]

Dankje voor je reactie.

Ik heb er maar één geheel van gemaakt. Ik wordt een beetje moe van IE.

 

[Milenko]

Dat kan natuurlijk ook. En ik snap je heel goed, heb er dagelijks mee te maken...

 

[csshunter]

@gast0187:

Internet Explorer werkt vaak tegen, gebruik liever chrome etc ...

Ja, dat kan je nu wel zeggen, maar in Nederland wordt IE gebruikt door ca. 42% van de surfers.
Als webbouwer zal je toch rekening moeten houden met die ruim 40% van je bezoekers!!!

• Je kunt moeilijk alle IE-bezoekers opdragen om IE als brandhout op te stoken: surfers zijn vrij in hun browserkeuze.
• Maar de huidige webbouwers kunnen zich gelukkig prijzen: voor de toeren die je moest uithalen om IE5 en IE5.5 aan de praat te krijgen moest je volleerd acrobaat zijn. Daarmee vergeleken zijn de tegenwoordige IE-versies erg heilig. Kan je nagaan!

Met vriendelijke groet,
CSShunter

 

[csshunter]

Hoi gast0187,

Die 40% is al een tijdje geleden hé

Mijn 42% over de laatste 3 maanden vind ik redelijk actueel.

=======

De statistieken van een specifiek land vind ik niet belangrijk, ik kijk altijd globaal.

Hangt er helemaal van af waarop de site mikt. Als het bv. een Engelstalige site is die voor het hele wereldpubliek moet werken ligt het anders dan voor een NL site. Als je een site in het Nederlands hebt, dan zal je bij het IE-gebruik voor NL en BE moeten kijken, want dat is dan je doelgroep.

=======

Internet Explorer gebruik is 16% in september 2012

• Dat er landen zijn als Indonesië (bevolking: rond 240 miljoen inwoners), waar bijna geen IE wordt gebruikt, drukt natuurlijk aardig het wereldgemiddelde!
• Maar bv. in China wordt IE door 2/3 van de surfers gebruikt.
• Dus een globaal gemiddelde zegt niet zo heel veel.
• De veronderstelde 16% wereldwijd is verder nog altijd ... 16% van 2.1 miljard (Internet anno 2011) = 336 miljoen mensen.
• Wereldwijd zit IE op 32.5%, zegt Statcounter, dat is twee keer zo veel!
• Mik je met je EN site op wereldwijd, dan zijn dat hoe dan ook toch vrij veel bezoekers.

=======

Welke statistieken er echt kloppen weet ik niet.

Je aangehaalde w3schools meet alleen het gebruik door w3schools-bezoekers, en dat is niet het standaard publiek maar bestaat vooral uit geïnteresseerden uit de webtechnische hoek, die minder van Internet Explorer gecharmeerd zijn. Over de betrouwbaarheid zeggen ze zelf dat het een vertekend beeld geeft (in het nadeel van IE):

Note: W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use the browser that comes preinstalled with their computer, and do not seek out other browser alternatives.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is a more popular browser.
(www.w3schools.com/browsers/browsers_stats.asp)​

=======
En tenslotte geldt natuurlijk (zoals altijd): Internet Explorer en Internet Explorer is twee! De ene versie van IE is de andere niet, en momenteel zal je als webbouwer voor NL en BE rekening moeten houden met IE8 en IE9 (IE7 zit op 1%, IE6 bestaat niet meer in de statistieken).

Met vriendelijke groet,
CSShunter

 

[TimVN]

Internet Explorer werkt vaak tegen, gebruik liever chrome etc ...

Ikzelf gebruik uiteraard geen IE. Maar als ik een website aflever aan een klant en deze ziet er niet uit in IE heb ik een probleem. Ik moet er voor zorgen dat de website volledig werkt in elke (veelgebruikte) browser. + Het moet er (ongeveer) hetzelfde uitzien. Vuurvos en Chrome werken beide super.

 

[csshunter]

@gast0187: Lees nog maar eens nummer #3. (die was vóór jouw advies om geen IE te gebruiken, en alle reacties die daarop volgden)

 

[TimVN]

Is deze vraag als opgelost beschouwd of niet?

Ja ik vergeet dit steeds, heb de status op opgelost gezet.