CSS background-image vises ikke på server, men vises på lokal pc

sørg for, udover at alle filer selvfølgelig er uploadet, at stierne er korrekte både til billeder og til css-filen. Som udgangspunkt så skriv alle referencer i forhold til roden, dvs start med /, fx

background-image: url('/graphics/Design2007-left.jpg')

Dette gælder også stien til css som vi ikke kan se i din kode.

Hvis jeg bruger '/' foran graphics vises billeder ikke. Stien til css virker med:

<link href="~/StyleSheet.css" rel="stylesheet" type="text/css" />

men stadig vises alle billederne som de skal lige undtagen

id="area-background"

?

http://www.web-dev.dk/post/2012/06/17/Bliv-en-hurtigere-webudvikler-med-browservc3a6rktc3b8jer.aspx

Prøv gennem din browsers developer toolbar og se dels om filer mangler (404) eller om elementer opfører sig underligt. Eller læg et link ud da det er ret svært at gætte med kun brudstykker af kode.

Den giver ikke 404, men viser bare ingenting. Hvis jeg øger højden fx 100px, går det godt nok igennem, men stadig vises det som et hvidt område.

Developer Toolbar - er det den der F12 sag? Den ved jeg ikke rigtigt, hvordan man bruger.

Hvis du ikke kan lægge et link vil vejen til en løsning gå gennem toolbaren så leg lidt med den og lær ad den vej.

der er ingen indhold (højde) i cellen..

  <td id="area-background">
       

</td>

rettes til

  <td id="area-background">
&nbsp;
                </td>

Så er den 1 linie højde, alternativt og bedre, definer en højde i CSS.

/J

sry, nevermind, det har du allerede.

kom med et link. :) eller følg ovenstående råd med IE webdeveloper toolbar, aktiver den, network -> start -> se efter "røde" liner med status code 404.

/J

Det er en firmaside, så jeg kan desværre ikke sende link. Er det når man har startet applikationen, at man skal starte IE webdeveloper toolbar? Er det via Start-menuen?

Vha F12, i ie8 og nyere ved ie7 skal du hente og installere

Jeg har prøvet F12, men der fremkommer ikke noget rødt.

Iøvrigt har jeg fundet ud af, at hvis

#logo-right {background-image: url('graphics/Design2007-right.jpg');
background-repeat: no-repeat;  height: 65px; width: 553px; padding: 0px;
}

fjernes fra css filen, så vises venstre billede SAMT background pixels som de skal - siger det jer noget? Det venstre billede måler 553x65, så jeg kan ikke, hvorfor det skulle resultere i en fejlvisning?

<ole>

"Det venstre billede måler 553x65, så jeg kan ikke, hvorfor det skulle resultere i en fejlvisning?"

Med en cellebredde på 165px og en billedbredde på 553px bør man nok ikke forvente andet end en fejlvisning, hvis meningen er, at hele billedet skal ses  =)

/mvh
</bole>

Hvordan tænker du dette? Venstre billede er 165 px og højre billede er 553 px, så der er plads i midten til at fylde ud 1x1 px. Jeg har 5-6 andre, der kører uden problemer med disse mål.

Jeg forholdt mig bare til det, du skrev i #10 - nemlig at venstre billede er 553x65  =)

Nu ser jeg - det var en fejl at skrive sådan. Det skulle have været højre.

Der er ikke fejl i den kode, du viser. Fejlen må ligge et andet sted.

Hvis du ikke kan lægge et link, bør du i det mindste validere koden og se, om du har fejl andre steder

Du kan prøve denne kode:


Det vil afsløre, om det er selve billedet, den er gal med.

Er det tilfældet, bør du at slette graphics/Design2007-background.jpg fra serveren. Upload det derefter på ny - så burde det virke  =)

- og det kan måske godt være svært at se billedet, hvis det er 1x1px. Prøv denne i stedet:

Højre billede kommer på med dit forslag, men der sker et par forrykninger, men er det ikke at dobbeltspecificere graphics/Design2007-background.jpg - den er jo også angivet i css filen?

Det kan jo være rystende ligegyldigt. Det er ikke noget forslag - det kaldes 'fejlfinding'  =)

Hvis ikke der med min kode er en farveklat på 100x65px i midterområdet, eksisterer dit billede 'graphics/Design2007-background.jpg' ikke. Alternativt er der fejl i billedet, og det bør laves om.

Undskyld jeg ikke lige fangede, at det var en test. Resultatet af dine tags i #17 er, at hele midterområdet udfyldes med grønt på både lokal pc og server, altså ikke kun 100x65, men hele det  midterste område.

Hvis jeg skal komme videre med det, må du lægge et link

Det er et problem, da det er en intern firmaside. Kan jeg på anden måde give dig flere oplysninger?

Nej, jeg tror ikke, jeg kan hjælpe mere her

Ok - det kan jeg godt forstå! Det er mig stadig helt ubegribeligt, hvordan disse simple tags kan volde så mange problemer?!

Men tak til dig og andre for kommentarer!

Nu fandt jeg omsider en konstruktion, der kunne udføre, hvad jeg gerne ville:

CSS

body {

}
#logo-left {background-image: url('graphics/Design2007-left.jpg');
background-repeat: no-repeat; height: 65px; padding:0; width: 165px;
}

#logo-right {background-image: url('graphics/Design2007-right.jpg');
background-repeat: no-repeat;  height: 65px; padding: 0px;
}

#logo-background {height: 800px; background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; padding: 3px; vertical-align: top;
}
   
#display-area {vertical-align:top; padding: 5px; background-color:#e9e9e9;
}

td.top-stripe {background-image: url('graphics/Design2007-goldbackground.jpg');
background-repeat: repeat; height: 20px; padding: 0px;
}

#bottom-stripe {background-image: url('graphics/Design2007-goldbackground.jpg');
background-repeat: repeat; height: 20px;
}

#area-background {background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; height: 65px; padding: 0px;
}

Master page tags:

<body style="background-color: #FFFFFF; margin: 0px; padding: 0px; border-top:0px;">
    <form id="form1" runat="server">
    <div style="overflow:scroll">
        <table width="100%" cellspacing="0" style="table-layout:fixed">
            <tr>
            <td class="top-stripe" style="width:165px;">&nbsp</td>
            <td class="top-stripe">&nbsp</td>
            <td class="top-stripe" style="width:553px">&nbsp</td>
            </tr>
            <tr>
                <td id="logo-left">
                </td>
                <td id="area-background">
                </td>
                <td id="logo-right">
                </td>
            </tr>
            <tr>
              <td id="logo-background"> 
              <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                        ForeColor="Black" Text="Version 1.3.0"></asp:Label><br />
              </td>
              <td id="display-area" colspan="2">
                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
             
                </td>
            </tr>
            <tr>
            <td id="bottom-stripe" colspan="3">
            </td>
            </tr>
        </table>
        </div>
    </form>
</body>

Det virker som om man ikke kan 'styre' siden ved at begynde med:

<td id="logo-left">
                </td>
                <td id="area-background">
                </td>
                <td id="logo-right">
                </td>

men ligesom først skal'formattere' siden med:

class="top-stripe"

altså en tredelt udfyldelse af første linje med 1x1 px grafik.

Nu er optegningen helt den samme på server og lokal maskine.

table som design-element?? Og doctype er forhåbentlig bare udeladt for vores eksempels skyld...

Et gæt kunne være at siden pga intranetindstillinger tvinges i compatibility mode - hvis det er tilfældes kan det overskrives med de korrekte headers.

keysersoze ->

Mener du, at det er forkert at designe en side med brug af en tabel? Hvad er din anbefaling?

Første doc type er .css og den sidste er .master (VS 2008/.NET 3.5)

Vil du uddybe det sidste, du skriver? Er det IE, der kan tvinges i denne4 compatibility mode?

Jeg kan nu se, at det er style="table-layout:fixed" i table tagget der gør, at de tre headerelementer ikke 'klapper sammen'.

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Stol aldrig på w3schools - se evt w3fools.com

En table bør kun bruges til det den er beregnet til - nemlig opsætning af tabulerede data, deraf navnet "table". Du bør benytte divs til design, benytter du html5 så kig på nogle af de nye elementer som fx header og footer.

Jeg tror du har misforstået hvad en doctype er - en doctype bør være det absolut først i dit html-document, og er en vejledning til browseren om hvordan den skal tolke siden. Uden den disabler du store dele css.

Fra IE 8 kan browseren køre i flere modes - og intranetsider bliver som standard tvunger i en kompatibilitetstilstand, der absolut ikke er ønskværdig.

Ok - tak for info.