Avatar billede prom Nybegynder
16. august 2005 - 11:15 Der er 31 kommentarer og
1 løsning

CSS - background url fungerer ikke i Sony Ericsson K750i

Jeg sidder og leger lidt med forskellige stylesheets. Et til fremvisning på skærm (screen) og et til telefoner (handheld). Min Sony Ericsson K750i vælger rigtig stylesheet og viser neste alt korrekt, men den viser ikke biledet når jeg bruger "background:#5C85C3 url(logo.gif) top left no-repeat" i handheld.css

Er det neget som kun sker i Sony Ericsson K750i, eller er det en kendt bug som flere telefoner har?

Eksempel: http://www.mad-design.no/test/

Kode: index.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />
<title>background url problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="top">&nbsp;</div>
    <h1>Her er en tekst...</h1>
    <p>Med lidt tekst.</p>
</body>
</html>

Kode main.css:
html,body{margin:0px;}
html,body,td{font-family:Arial, sans-serif; font-size:11px; color:#2C5D9F;}
h1{color:#F28E00; font-size:11px; font-weight:bold; text-align:left; margin:0px;}
p{margin-top:0px;}
img{border:0px;}
#top{height:85px; background:transparent url(top.gif) top left no-repeat;}


Kode handheld.css:
html,body{margin:0px;}
html,body,td{font-family:Arial, sans-serif; font-size:11px; color:#2C5D9F;}
h1{color:#F28E00; font-size:11px; font-weight:bold; text-align:left; margin:0px;}
p{margin-top:0px;}
img{border:0px;}
#top{height:28px; background:#5C85C3 url(logo.gif) top left no-repeat;}

Noen forslag?

- Prom
Avatar billede fennec Nybegynder
16. august 2005 - 11:25 #1
Prøv at bytte om på rækkefølgen:
"background:#5C85C3 url(logo.gif) no-repeat top left"
Avatar billede fennec Nybegynder
16. august 2005 - 11:27 #2
Ellers prøv at dele dem op i hver deres attribut:
"background-color:#5C85C3;background-image:url(logo.gif);background-repeat:no-repeat;background-position:top left;"
Avatar billede prom Nybegynder
16. august 2005 - 14:17 #3
Samme resultat.

main.css:
html,body{margin:0px;}
html,body,td{font-family:Arial, sans-serif; font-size:11px; color:#2C5D9F;}
h1{color:#F28E00; font-size:11px; font-weight:bold; text-align:left; margin:0px;}
p{margin-top:0px;}
img{border:0px;}
#top{
    height:85px;
    background-color:transparent;
    background-image:url(top.gif);
    background-position:top left;
    background-repeat:no-repeat;
}

handheld.css:
html,body{margin:0px;}
html,body,td{font-family:Arial, sans-serif; font-size:11px; color:#2C5D9F;}
h1{color:#F28E00; font-size:11px; font-weight:bold; text-align:left; margin:0px;}
p{margin-top:0px;}
img{border:0px;}
#top{
    height:28px;
    background-color:#5C85C3;
    background-image:url(logo.gif);
    background-position:top left;
    background-repeat:no-repeat;
}
Avatar billede prom Nybegynder
16. august 2005 - 14:25 #4
Jeg har prøvet at strippe det helt ned til:
#top{background-image:url(logo.gif);}

Samme resultat.
Avatar billede roenving Novice
16. august 2005 - 14:30 #5
Prøv også at give top-tingen en class ...
Avatar billede roenving Novice
16. august 2005 - 14:37 #6
-- og du har prøvet om det ikke er fejl i url-forståelse ved at lægge alle filerne i samme mappe ?-)

-- og den sidste kommentar skulle forstås sådan, at id og class jo bruges på forskellig måde, så den (sikkert neddroslede) css-motor, som er i mobilen, måske kan noget forskelligt med dem !-)
Avatar billede fennec Nybegynder
16. august 2005 - 14:38 #7
Har du læst SE's guidelines angående browsing på deres developer site. Der står måske noget:
http://developer.sonyericsson.com/site/global/docstools/browsing/p_browsing.jsp
Avatar billede fennec Nybegynder
16. august 2005 - 14:42 #8
Ifølge førnævnte dokument er koden f.eks:
background: #5C85C3 url("logo.gif")

sti'en skal altså i "
Avatar billede fennec Nybegynder
16. august 2005 - 14:44 #9
Der lader ikke til at være nogen position og repeat attribut på background.
Avatar billede roenving Novice
16. august 2005 - 14:49 #10
Tjah, med hensyn til gåseøjnene, så har ca. halvdelen af w3cs sider om emnet gåseøjne eller apostroffer omkring urler, den anden halvdel ingen, men det skal da absolut prøves !-)
Avatar billede olebole Juniormester
16. august 2005 - 15:28 #11
<ole>

1. Hvad med bg-farve. Kan du få det til at virke, hvis du ikke sætter bg-billede?
2. Har du prøvet med den absolutte sti til billedet - med 'http://www' og det hele?

/mvh
</bole>
Avatar billede prom Nybegynder
16. august 2005 - 15:31 #12
Fra Sonys developer Guide:

background-image:
This property sets the background image. The image will always be centered
and fixed. It is not possible to set background-repeat, backgroundattachment
nor background-position.
v4.1 CSS WC
Example background-image: url("images/bg_image.gif");

Hvad er det for et versionsnummer der refereres til (v4.1)
Avatar billede prom Nybegynder
16. august 2005 - 15:33 #13
Background-color vises.
Avatar billede prom Nybegynder
16. august 2005 - 15:33 #14
"" virker heller ikke.
Avatar billede prom Nybegynder
16. august 2005 - 15:36 #15
K750i har version 4.2 av browseren så den skulle understøtte "background-image"
Avatar billede prom Nybegynder
16. august 2005 - 15:54 #16
Nu har jeg hentet Opera Mini, og den har samme problem.
Avatar billede olebole Juniormester
16. august 2005 - 15:59 #17
Har du prøvet med den absolutte sti?
Avatar billede prom Nybegynder
16. august 2005 - 16:15 #18
Ja - ingen resultat
Avatar billede prom Nybegynder
16. august 2005 - 16:30 #19
Er dette et utbredt problem eller har ingen hørt om dette før?
Avatar billede olebole Juniormester
16. august 2005 - 16:36 #20
Har du evt. prøvet at skrive siden i HTML4.01 i stedet? Dit dokumente bliver alligevel parsed som HTML4.01 af alle browsere, så du kan ligeså godt skrive valid HTML - altså den korrekte DTD og så undlade XHTML-lukninger.
Desuden disabler du i hvert fald i IE store dele af CSS, når du bruger XML-prologen før DTD'en.

Jeg er ikke helt sikker på, hvor hysteriske mobil-klienter er, men det det er helt sikkert værd at checke, om valid HTML virker bedre.
Almindelige browsere slider unødigt hårdt med XHTML, men fejler ikke ligefrem ... måske mobil-klienter er knap så robuste  :)
Avatar billede prom Nybegynder
16. august 2005 - 16:41 #21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" media="screen">
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
<title>background url</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="top">&nbsp;</div>
    <h1>Her er en tekst...</h1>
    <p>Med lidt tekst.</p>
</body>
</html>

Fungerer desværre heller ikke:(
Avatar billede olebole Juniormester
16. august 2005 - 17:14 #22
En kort søgning på nettet antyder, at du ikke er den eneste, der har problemer med bg-grafik via CSS. Måske er det en bedre idé at lægge et par elementer ovenpå hinanden?  :)

Læs i øvrigt:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

- om hvorfor XHTML er ubrugeligt på WWW idag - og de versioner, vi har tilrådighed idag - ikke er en fremtidssikring  ;o)
Avatar billede prom Nybegynder
16. august 2005 - 17:24 #23
Jeg var selv med på den religiøse "non-table" vogn. He he - morsomt at tænke tilbage på. Hvordan lægger jeg mest elegant elementerne oven på hinanden?
Avatar billede olebole Juniormester
16. august 2005 - 17:27 #24
Med inline-styles for overskuelighedens skyld:

<div style="position:relative">
  <img src="gnu.jpg" style="position:absolute;left:0;top:0;z-index:1">
  <div style="position:absolute;left:0;top:0;z-index:2">En tekst ovenpå billedet</div>
</div>
Avatar billede roenving Novice
16. august 2005 - 17:30 #25
-- og så kan langt de fleste af de angivne style-properties spares væk, men kan dog være illustrative for at se, hvad der sker:

<div style="position:relative">
  <img src="gnu.jpg">
  <div style="position:absolute;left:0;top:0;width:200px;">En tekst ovenpå billedet</div>
</div>
Avatar billede olebole Juniormester
16. august 2005 - 17:30 #26
CSS foreskriver, at et absolut positioneret element skal placere sig i forhold til det første omkransende element, der er poitioneret (ligemeget om dette er absolut eller relativt).
Findes et sådan element ikke, skal elementet placere sig i forhold til body-elementet.

Mange kender ikke første regel, men kun den sidste. Den første er dog _meget_ væsentlig  ;o)
Avatar billede prom Nybegynder
16. august 2005 - 17:31 #27
Jeg går i gang :)

Kaster du et svar.
Avatar billede olebole Juniormester
16. august 2005 - 17:36 #28
roenving >> Yes, but natürlich, hombre  ;D

prom >> Næææ ... nu venter vi først og ser, om det virker  :)
Desuden har jeg - som alle andre - været lidt på gyngende grund her, så jeg foreslår 20 points til hver ... if you don't mind. Både roenving og fennec har fået vabler i panden, så det er vel meget rimeligt  :)
Avatar billede prom Nybegynder
21. august 2005 - 20:00 #29
Jeg har droppet at skifte baggrundsbiledet ud. I stedet har jeg lagt de billeder som der skal veksles mellem oven på hinanden. Jeg bruger så forskjellige stylesheets til at vise/skjule de relevante billeder.
Resultatet kan ses på: http://www.sariba.com/

- prom
Avatar billede prom Nybegynder
04. november 2005 - 09:48 #30
Noen som har lyst på point?
Avatar billede fennec Nybegynder
04. november 2005 - 11:22 #31
nej tak
.o) <-- One Eyed Jack
Avatar billede prom Nybegynder
04. november 2005 - 11:32 #32
Lukker
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester