[CSS] Background-image werkt niet in IE7 Vista

[Eriksk]

Hallo allemaal,

ik heb een probleem dat een button geen background-image toont. De rest van de style wordt wel overgenomen.

code:

.defaultbutton {
    color:#FFFFFF; 
    /*color:#000000;*/
    /*background-color:Transparent;*/
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top left;
    background-image:url('/images/button.gif');
    width:100px;
    height:21px;
    border:none;
    font-size:11px;
    text-align:center;
    font-weight:bold;
    margin-bottom:4px;
}

Html:

code:

<input type="submit" class="defaultbutton" value="1" />

Het werkt prima onder firefox, ie6 ie7 onder XP, maar dus niet onder IE7 onder Vista.
Ik heb naar een oplossing gezocht, maar ik kan helaas niets vinden. Ik ben het dan ook nog niet eerder tegengekomen.

Wie weet raad?

Alvast bedankt.

[Bosmonster]

Hier werkt het prima onder IE7 op Vista. Heb je niet een vreemde skin geinstalleerd oid?

[ Voor 37% gewijzigd door Bosmonster op 17-04-2008 16:11 ]

[Eriksk]

De standaard skin (theme bedoel je neem ik aan). Test- en andere machines die onder Vista draaien hebben hetzelfde probleem. Het veranderen van theme heeft geen invloed.
Ik heb ook een ander plaatje gebruikt om te testen en dat heeft ook geen nut.

[Palomar]

Zet dan es iets online als voorbeeld? Want misschien doe je zelf wel iets fout waardoor het niet goed werkt.

[Eriksk]

Ok, het werkt dus altijd onder firefox en enkel onder IE7 wanneer deze onder XP draait, MAAR bij het testen maakte ik gebruik van twee 'servers' die Vista draaiden en IIS7.

Nu: Ik heb de hele mikmak op een windows 2003 icm IIS6 gegooid en nu werkt het wel onder IE7 in Vista.

Begrijpen doe ik het nog niet... Gedeeltelijk opgelost dus.

[Knaak]

code:

background-image:url('/images/button.gif');

Leer zonder de ' ' te werken, dit kan vervelende situaties opleveren.

Dus zo:

code:

background-image:url(/images/button.gif);

Zou je eens iets kunnen uploaden? Ik kan hier niet zo 1-2-3 een html bestandje maken.

[Palomar]

Sowieso vraag ik me af of bovenstaande manier (met een relatief path) wel goed werkt als je het lokaal test. Gaat ie dan niet zoeken naar: c:\images oid, ipv. c:\documents\websites\projectje\testsite\images.. ?

ik zou ook "background-image:url(../images/button.gif);" eens proberen.

[ Voor 21% gewijzigd door Palomar op 17-04-2008 16:46 ]

[--MeAngry--]

MOAW schreef op donderdag 17 april 2008 @ 16:40:

code:

background-image:url('/images/button.gif');

Leer zonder de ' ' te werken, dit kan vervelende situaties opleveren.

Dus zo:

code:

background-image:url(/images/button.gif);

Zou je eens iets kunnen uploaden? Ik kan hier niet zo 1-2-3 een html bestandje maken.

IMHO ben je nu off-topic aan het reageren en geef je ook nog eens een slecht advies.
Juist het gebruik zonder quotes kan problemen opleveren omdat bijvoorbeeld spaties in de paden niet herkend worden. Gebruik altijd enkele of dubbele quotes. Ik CSS al heel wat jaren en dat heeft nog nooit en te nimmer problemen opgeleverd.
Alleen opletten dat je oplet of je dubbele of enkele quotes moet gebruiken als je inline werkt.

Verder denk ik dat het pad wat de TS gebruikt gewoon niet klopt.

[ Voor 4% gewijzigd door --MeAngry-- op 17-04-2008 16:54 ]

[Eriksk]

@MOAW: Doe ik normaal ook, maar je ziet eens wat en gaat prutsen...
@Palomar: Maakt niets uit... je draait een server, er wordt voor je als client niets vertaald. Daarnaast heb ik dus op twee servers getest.

[Eriksk]

@MeAngry: Het pad klopt wel... anders had die het in de andere gevallen (firefox & IE7 icm WinXP) ook niet gedaan.

[ Voor 12% gewijzigd door Eriksk op 17-04-2008 16:56 ]

[Palomar]

Eriksk schreef op donderdag 17 april 2008 @ 16:54:
@MOAW: Doe ik normaal ook, maar je ziet eens wat en gaat prutsen...
@Palomar: Maakt niets uit... je draait een server, er wordt voor je als client niets vertaald. Daarnaast heb ik dus op twee servers getest.

Kon zijn dat je het gewoon lokaal aan het testen was zonder server (statische html-bestanden). En dan op de ene pc vanaf c:\websites en de andere pc een veel 'diepere' subdir

[ Voor 9% gewijzigd door Palomar op 17-04-2008 16:57 ]

[Eriksk]

Na een paar kleine tests blijkt het toch echt aan IIS7 te liggen. Nu zoek ik meer informatie hierover, maar ik kan niets vinden... lijkt me niet zo vreemd
Wie weet waar ik meer informatie omtrent dit probleem kan vinden of enig support?

[Palomar]

Ik zou toch nog eens experimenteren met dat path. BIjv. een absoluut path opgeven, of de background-image tijdelijk in dezelfde directory zetten als het script met dat formuliertje (zodat je hem kunt aanroepen met background-image:url('button.gif');

[Eriksk]

@Palomar: Is ook al gedaan. Zelfs inline stylesheets gebruikt --> zelfde behaviour
Nog een test suggestie? Ik loop leeg

[ Voor 20% gewijzigd door Eriksk op 18-04-2008 09:30 ]

[crisp]

En als gewone <img> - zie je dan wel je plaatje?

Check ook even of IIS wel de juiste content-type headers stuurt voor plaatjes. Sowieso zal een beetje HTTP sniffing hier al snel duidelijkheid geven denk ik

[BramT]

Volgens jou lijkt het aan de webserver te liggen. Check de log's 's. Krijgt deze uberhaupt de request wel fatsoenlijk binnen? Kan je de afbeelding wel zelf direct openen in browser?

Het lijkt me sterk dat IIS7 op Vista geen backgrounds kan webserven Ben benieuwd naar wat hier uit gaat komen...

[Palomar]

Misschien kun je nog andere bestandsnamen testen (button2.gif). Zou niet echt jofel zijn als het dan ineens wel werkt, maar misschien wordt er iets verkeerd gecachet ofzo.

[Eriksk]

Het lijkt me sterk dat IIS7 op Vista geen backgrounds kan webserven
Lukt wel, maar alleen niet voor buttons

Kan je de afbeelding wel zelf direct openen in browser
Ja, dat lukt

Misschien kun je nog andere bestandsnamen testen (button2.gif)
Zelfde probleem

En als gewone <img> - zie je dan wel je plaatje?
Heel goed zelfs

Caching is het ook niet, heb ik al uitgesloten.

ik denk dat het sniffing of logs nakijken gaat worden. Heb dit helaas niet zo vaak gedaan en nu geen tijd voor... moet zo een demo'tje geven
Eens even kijken of ik in het weekend hier tijd voor heb.

[Verwijderd]

Eriksk schreef op vrijdag 18 april 2008 @ 09:48:
Het lijkt me sterk dat IIS7 op Vista geen backgrounds kan webserven
Lukt wel, maar alleen niet voor buttons

Het is geen kwestie van "backgrounds serven" uiteraard, voor de webserver is het gewoon een afbeelding. Waar de browser 'm vervolgens gaat renderen zal IIS is principe worst wezen. Het zal dus waarschijnlijk fout zitten in de request van IE7 Vista en hoe IIS deze verwerkt, of IIS die een header meestuurt waar IE7 Vista niets mee kan ofzo?

[Bosmonster]

--MeAngry-- schreef op donderdag 17 april 2008 @ 16:54:
[...]

IMHO ben je nu off-topic aan het reageren en geef je ook nog eens een slecht advies.
Juist het gebruik zonder quotes kan problemen opleveren omdat bijvoorbeeld spaties in de paden niet herkend worden. Gebruik altijd enkele of dubbele quotes. Ik CSS al heel wat jaren en dat heeft nog nooit en te nimmer problemen opgeleverd.
Alleen opletten dat je oplet of je dubbele of enkele quotes moet gebruiken als je inline werkt.

Verder denk ik dat het pad wat de TS gebruikt gewoon niet klopt.

Ik heb mezelf altijd aangeleerd bij url() GEEN quotes te gebruiken omdat ik wel ervaring heb dat dat in sommige browsers problemen oplevert. Zonder quotes nooit problemen.

Ik zou de officiele standaard er wel eens op na willen slaan.

edit: Volgens de standaard zijn ze optioneel. Nadeel aan zonder quotes is dat je meer tekens moet escapen. Maar imho zijn dat tekens die je toch al niet had moeten gebruiken in bestandsnamen.

[ Voor 12% gewijzigd door Bosmonster op 18-04-2008 13:23 ]

[Verwijderd]

code:

background-image:url('./images/button.gif');

Heb je het bovenstaande ook al eens geprobeerd? Dus "punt" voor /images voor aanduiding huidige directory. Het lijkt mij sterk maar kan je toch een proberen.

De webserver IIS7 snapt de request http://www.blaat.nl/images/button.gif dan blijkbaar niet. Probeer eens met een http-proxy te checken wat er gebeurd. Download Charles eens kan ook op localhost debuggen. Als je dus gewoon plaatje op kan vragen als img moet het waarschijnlijk iets meet css icm IIS7 te doen zijn. Het bestand is relatief aan die van css-file. Echt wazig dat het niet werkt.Probeer eens een absoluut pad als waarde aan de property te geven.(Kweetnie alleen of dat op background mag)

[Eriksk]

Had een flink verhaal getyped over de paden en dergelijke en ben tcoh nog eens aan het testen gegaan.
Ik heb toch nog maar eens firefox op deze pc geïnstalleerd en daarbij viel mij toch vreemd gedrag op van een button. Dit was niet zo op een ander Vista systeem met FF (wellicht andere versie).
Vervolgens weer aan het testen geweest op diverse IIS7 op Vista en IIS6 op Win2003, IE7, IE6 en FF en nu kon ik ineens wel uitsluiten dat het aan de IIS ligt. Natuurlijk geheel logisch, maar ik weet zeker dat ik mijn tests gisteren en vandaag goed heb uitgevoerd, terwijl ik helderder was dan nu (hardnekkig caching op verschillende systemen?).
Mijn eerste gedachte die iemand IIS7 in die combi de schuld zou geven, zou zijn: Die is niet goed wijs

Ok, het ligt dus daadwerkelijk aan de css.
Kijk nog maar eens naar mijn css in mijn eerste post.
Nu heb ik daar de background-attachment:fixed weggehaald en de background-color toegevoegd. Deze mag echter niet transparant zijn!
Zo wordt die dus:

code:

.DefaultButton
{
    color:#FFFFFF; 
        background-repeat:no-repeat;
    /*background-attachment:fixed;*/
    background-position:top left;
    background-color:#000000;
    background-image:url('/images/button.gif');
    width:100px;
    height:21px;
    border:none;
    font-size:11px;
    text-align:center;
    font-weight:bold;
    margin-bottom:4px;
}

Uit frustratie wil je nog wel eens wat uitzetten of anders doen. Ik heb ook geen flauw idee hoe ik tot deze oplossing ben gekomen.
Nu tijd voor een biertje deunkt me

Bedankt voor het meedenken allemaal.

Gegroet

[Verwijderd]

Hey, nu je over background-color en niet-transparent begint schiet me opeens te binnen dat ik hier vorige week ook een probleem mee had. Wanneer ik "transparent" gebruikte ging er iets mis, maar ik ben vergeten wat Het lijkt wel hierop iig.