11. november 2010 - 13:56Der er
19 kommentarer og 1 løsning
Baggrundsbillede bliver ikke vist i IE7
Jeg lavede tidligere et indlæg om hvor jeg spurgte hvordan man optimerer sin side til IE. Jeg er nu kommet så langt at tingene ikke hopper rundt mere, men IE7 har sgu ikke lyst til at vise 2 billeder af en eller anden grund. (Har ikke selv lavet hjemmesiden, retter bare fejlene IE viser. Hjemmesiden er et wordpress template.)
Den første linie i koderne er den oprindelige måde det var skrevet på, jeg har prøvet at lave det, så det står som de næste linier, men det hjælper ikke. Har prøvet med både ' ' og " " rundt om stien. Billedet bliver vist korrekt i alle andre browsere jeg har testet det i (dog kan IE6 ikke finde ud af at placerer billedet korrekt, men har fået af vide at man ikke skal optimere til IE6 mere. Skal man stadig det? Og ihvertfald, så starter jeg med dette problem i IE7).
Jeg havde selv et problem med billed visning på en FireFOX /Mozilla vs. IE for nogle år siden. Det viste sig at hvor FF AUTOMATISK tager billestørrelsen (i X- og Y-pixels) gjorde IE DET ABSOLUT ikke og mine brugere, som brugte IE havde en hvid skærm, der hvor jeg havde (smukke) billeder.
Jeg vil forslå at du checek din <img src='BILLEDURL' hsize=XX px og vsize = YY px; alt =.... border=... (osv..)
Problemet her er, at billedet bliver hentet i CSS'en, og der er derfor ingen <img> tag i min kode. Det er jo blot en class der bliver lagt i koden med <div class="top"></div> og det samme for bunden.
Stien er self rigtig da den kan vises i andre browsere, og der er ingen alt, border, height, width osv da det jo er en class. Billederne bliver simpelthen ikke vist (ingen hvid kasse hvor et billede skulle have været eller lignende). Det underlige er dog at andre baggrundsbilleder på siden der bliver hentet via CSS'en vises korrekt.
Jeg kan se position på container classen er skrevet som 'center o'. Dette er ikke som koden var originalt, men '50% 0' som den er i det næste eksempel.
Jeg har altså prøvet diverse ting, så som at skrive 0px istedet for 0, center istedet for 50%, dele linien op istedet for at skrive på 1 linie etc. Intet har hjulpet endnu.
Jeg vil råde dig til at at skrive 0px istedet for bare 0. Og ffffff istedet for bare fff. Og ja, så skal der background-image og repeat ind over, hvis du skal have en baggrund :)
Jeg kan dog se du også har noget andet stylesheetpjat med en variabel bagved.. Ved ikke lige hvad det går ud op. Kan være at det er den du bruger til at style sitet.
Ahh, det var måske slet ikke body du skulle have BG på, som i eksemplet, men en boks. Men kan se, at du skriver Background-image med stort bogstav flere steder. Prøv at rette det til småt.
Ja det er nemlig ikke på body eller lignende, det er blot de 2 små pile der er over og under stregen der deler boksen i bunden.
Jeg ændrede det til Background-image med stort fordi det ikke virkede med småt. Som sagt, har jeg prøvet diverse små ændringer som 0px istedet for 0, background-image med småt istedet for stort, dele linien op i 3 linier (background-image, background-position, background-repeat). Det virker altså som om, at IE7 ikke har lyst til at læse koden overhovedet. Havde set !important stå nogle forskellige steder, er det acceptabelt at bruge !important? Eller er det frarådet at bruge det?
P.S. Det er noget jeg arbejder med når jeg er i skole/arbejde (SKP), derfor jeg ikke svarede før nu, og går hjem idag kl. 13.00, men I må meget gerne komme med input alligevel, jeg læser dem på mandag senest :)
!important er en del af CSS, så acceptabelt er det vel nok. Men hvornår det er nødvendigt at bruge den, har jeg faktisk svært ved at se. Jeg bruger aldrig sådan noget i mit CSS! Så heller sætte det rigtigt om for start af. Så det kan sagtens gå ind og skabe forstyrrelser, hvis det "overruler" din background style.
Jeg ved heller ikke om det kunne være nødvendigt i denne sammenhæng. Men det var sådan set bare for at prøve noget, siden alt andet (ifølge diverse sider jeg har fundet på netten) er rigtigt.
Ja, den kode virker, og jeg har prøvet at lege lidt med det, og det ser ud til at width og heigt skal være sat før det virker, det skal altså være sat med præcis px. Det kan jeg så ikke rigtig bruge i det her design, da det er 100% bred.
Jeg har prøvet med width: 100%; min-width: 100px; men så tager den bare efter min-width og er ligeglad med width.
Sidder du i IE7 eller tester du det kun via Browserlab?
Jeg sidder ikke selv i IE7, så kan ikke se det. Men undrer mig at det ikke skulle virke der. Det virker ihvertfald fint med width: 100% i IE8 og diverse andre browsere.
Jeg sidder med IE8 hvor det virker perfekt, i IE8's funktion der simulerer IE7 (har læst mig frem til at man ikke kan stole på denne) virker det også, men når jeg ser siden via. adobes browserlab virker det ikke. Det virker endda i IE6 (ifølge browserlab og browsershots.org).
Jeg er også ret sikker på at det virker i IE7. Mener jeg helt bestemt at have set før. Så tror Browserlab fejler på det punkt.
Find en computer med IE7 på eller måske er der en herinde, som sidder med IE7 og lige har lyst til at teste en gang :)
Du kan evt. smide et link til hvor du har det, så det er lidt nemmere for personen, så han/hun ikke først selv skal til at lave en HTML fil med indholdet i.
Billederne der ikke vises er 2 pile, en for oven og en for neden af den stiplede streg i midten af boksen i bunden.
Og jeg ville da også umidelbart mene at det skulle virke med 100% width, så jeg må jo bare lede videre og se om der er en løsning på dette et sted på nette :P
Jeg fandt selv løsning, sidst jeg prøvede min-width: 100%; prøvede jeg kun med width: 100px; i samme omgang.
Løsningen her var min-width: 100%; width: 100%;
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.