Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Bakgrund i Firefox

Jag undrar varför inte min bakgrund visas i Firefox som den visas i Safari?
Så här ser det ut:

#down { border : 1px; border-style : dotted; border-color : #505D6F; position : absolute; background-image : url(../images/bg.jpg); top : 152px; left : 50%; margin-left : -500px; margin-top : 0px; width : 998px; height : 443px; }

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Någon bild på skillnaden?

Dessutom:

margin: 0 0 0 -500px;
border: 1px dotted #505D6F;

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Alltså i Safari syns bakgrunden och i Firefox syns den helt enkelt inte =/
De förändringar du föreslår gör varken till eller från eftersom det inte är någon skillnad att dela upp det eller inte.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av x-per
margin: 0 0 0 -500px;

Sannolikt fungerar margin: 152px auto 0 auto; och ingen absolut positionering bättre dessutom.

Citat:

Ursprungligen inskrivet av Piraten
De förändringar du föreslår gör varken till eller från eftersom det inte är någon skillnad att dela upp det eller inte.

Du sparar bandbredd. Finns ingen direkt anledning att inte använda snabbskriftsmetoden

Och testa med apostrofer/citattecken runt din URI.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av You
Finns ingen direkt anledning att inte använda snabbskriftsmetoden.

Det finns ibland anledning att använda direktförändrande attribut, om man t.ex. har en background-image som man ska positionera om vid hover (aka CSS sprite). Det visste du, vet jag, men kanske inte TS, så jag belyser det...

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Bakgrunden syns fortfarande inte.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av Piraten
Bakgrunden syns fortfarande inte.

Zippa skiten så fixar jag eller någon annan det!

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av azoapes
Det finns ibland anledning att använda direktförändrande attribut, om man t.ex. har en background-image som man ska positionera om vid hover (aka CSS sprite). Det visste du, vet jag, men kanske inte TS, så jag belyser det...

Sant, men det är som sagt inte något argument i det här fallet.

Sen vet jag inte varför TS "indenterar" så som han gör. Det kan ställa till med problem och ser IMHO väldigt rörigt ut.

Till TS: Är du säker på att bakgrunden ligger på rätt ställe, att du inte använder något obskyrt format, etc? Testa det här istället:

border: 1px dotted #505D6F; background: url("../images/bg.jpg"); margin: 152px auto 0 auto; width: 998px; height: 443px;

(Sen skulle jag avråda från att bero så mycket på exakta pixelvärden som du gör men det är en annan sak)

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av You
Sant, men det är som sagt inte något argument i det här fallet.

Alltså... du skrev ju inte om du menade det här specifika fallet, eller om du menade generellt. Det jag skrev, gäller om du menade generellt. Och då är det ett väldigt bra argument till varför fullständiga attribut kan vara användbara.

Citat:

Ursprungligen inskrivet av You
Sen vet jag inte varför TS "indenterar" så som han gör.

Det vet jag, tror jag. Det gör han för att han vill att alla värden ska hamna på samma tabbavstånd. Minns att jag gjorde ett sånt organiseringsförsök också, innan jag insåg att det var riktigt dumt med tanke på bandbredd och maintainability.

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Mina indenteringar blev lite vridna när jag kopierade in det här, anledningen till att jag använder den indenteringen är att jag tycker det inte blir så rörigt i ett stort css dokument.

Vad bör jag använda ist för exakta pixelvärden?

Zippa skiten och skicka känns lite B, försöker hellre lösa det själv med hjälp så att jag lär mig något utav det.

Fortfarande ingen skillnad. Det ser ju dock bra ut i Safari.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av Piraten
Zippa skiten och skicka känns lite B, försöker hellre lösa det själv med hjälp så att jag lär mig något utav det.

Anledningen till att zippa det är för att vi kan sitta här ända in i oändligheten, tar flera dagar att bolla fram och tillbaka, har man alla filer själv så fixar man det på 2 minuter, sen efter det kan man lära ut det till dig så att du lär dig eftersom det är det du vill men jao vill du inte ha hjälp så visst.....

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Har du FireBug för Firefox? Installera det och leta sedan runt i dokumentet, ändra CSS tills bakgrunden syns.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av Piraten
Mina indenteringar blev lite vridna när jag kopierade in det här, anledningen till att jag använder den indenteringen är att jag tycker det inte blir så rörigt i ett stort css dokument.

Misstänker att du sitter på en mac; införskaffa CSSEdit eller Coda. Det hjälper när man redigerar CSS.

Citat:

Ursprungligen inskrivet av Piraten
Vad bör jag använda ist för exakta pixelvärden?

Procent, em. Till bredd kanske du kan använda px men i övrigt är det bättre med relativa enheter, speciellt till marginalen runt sidan och även kanske höjden.

Citat:

Ursprungligen inskrivet av Piraten
Fortfarande ingen skillnad. Det ser ju dock bra ut i Safari.

Lägg upp det på en temporär server så vi andra kan titta på det. Svårt att lista ut vad som är fel utifrån endast CSSen.

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Detta är all kod i css:

body { background-color: #fff; margin: 0px; } div { margin: 0px; padding: 0px; } table { padding: 0px; border: 0px; } #container { border: 10px solid #505D6F;; position: absolute; left: 50%; margin: 10px 0px 0px -510px; width: 1004px; height: 600px; } #top { background-image: url("../images/logo.jpg"); border: 0px; position: absolute; left: 50%; margin: 2px 0 0 -500px; width: 1000px; height: 150px; } #down { border: 1px dotted #505D6F; background-image: url("../images/bg.jpg"); top: 152px; left: 50%; margin: 152px auto 0 auto; width: 998px; height: 443px; } #textbox { position: absolute; width: 500px; height: 150px; top: 200px; left: 40px; } .pos1 { position: absolute; top: 130px; left: 60px; } .pos2 { position: absolute; top: 130px; left: 270px; } .pos3 { position: absolute; top: 130px; left: 470px; } .pos4 { position: absolute; top: 130px; left: 680px; } .pos5 { position: absolute; top: 130px; left: 880px; } .pos6{ position: absolute; top: 250px; left: 650px; } .pos7 { position: absolute; top: 60px; left: 200px; } /* Font & Color */ .a12b { font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana; font-size: 12px; color: #000; font-weight: bold; } .treb18 { font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana; font-size: 18px; color: #000; } /* a */ a { font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana; font-size: 13px; color: #000; font-weight: bold; text-decoration: none; } a:visited { color: #000; } a:active { color: #000; } a:hover { color: #fff; }

Detta är min index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="css/hummelgrund.css" type="text/css" /> <title>Restaurang & Pub Hummelgrund</title> </head> <body> <div id="container"> <div id="top"> <a href="?p=nattklubb" class="pos1">Nattklubb</a> <a href="?p=varmeny" class="pos2">Vår meny</a> <a href="?p=kontakta" class="pos3">Hitta hit</a> <a href="?p=vimmel" class="pos4">Bilder</a> <a href="?p=gastbok" class="pos5">Gästbok</a> <div id="down"> <?php $page = (isset($_GET['p']) ? $_GET['p'] : 'startsida'); $pages = array("nattklubb", "varmeny", "gastbok", "vimmel", "kontakta", "startsida"); if(in_array($page,$pages)) { include('includes/' . $page . '.php'); } ?> </div> </div> </div> </body> </html>

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Herremingud, går ju enkelt halvera den css:en

Iaf, hur ser din bakgrund ut då? Vissa FX har haft problem med små bakgrunder, osv osv, vi behöver hela paketet, seriöst varför är du så enormt besvärlig? Ge oss en liveserver eller ALLA filer om du vill ha hjälp, vad är det svåra i det?

Hade du lagt upp en zip hade problemet varit löst för över 1 timma sedan!

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Det går säkert att halvera css:en men jag vet inte hur jag gör, går garanterat att skriva bättre kod och det hade jag gjort om jag visste hur.

Jag hade ingen möjlighet att komma åt en server, men nu är det löst.
http://www.hummelgrund.se/htm/zip.htm

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Registrerad
Sep 2003
Citat:

Ursprungligen inskrivet av You
Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Nej jag har inte en aning om vad jag håller på med därför frågar jag er.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Stäng dina <div>-element också. Tror inte att du vill ha #down inuti #top.
Annars skulle du nog dra nytta av att läsa lite ur Webboken.

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Att lära sig något utan att fråga är svårt, att vara ödmjuk är desto enklare.
Jag ska försöka lära mig css osv men ni kanske borde fundera på att lära er
vad ödmjukhet är och inse att inte alla är lika duktiga som er.
Tack för den hjälp jag fick, trots att den inte hjälpte mig.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av Piraten

Tack för den hjälp jag fick, trots att den inte hjälpte mig.

Spara om BG filen, den är korrupt! Eller rättare sagt, det verkar vara inbäddat något skit i den, något är det för den fungerar om man sparar den som PNG!

Kan vara en skum colorprofile som inte stöds av FX, vilket program använde du?

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Testpilot
Plats
Norrköping
Registrerad
Sep 2002

Filen bg.jpg är skadad, jag kan inte öppna den direkt varken i Firefox, Paint eller Windows fotogalleri, troligtvis är det alltså filen som är problemet och inte webbläsaren.

Edit: Lite för sen

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 8GB][Gigabyte GeForce GTX 970 G1 Gaming]

Trädvy Permalänk
Medlem
Registrerad
Sep 2003

Nu fungerade det.
Tack nu ska jag läsa igenom Webboken och se om jag kan banta min css och ordna positioneringen samt storleks bestämning.

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Registrerad
Sep 2003
Citat:

Ursprungligen inskrivet av You
Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Jag fortsätter på tråden..
Om jag ska placera ut en bild hur bör jag placera den då, om jag inte skall använda mig av position:absolute?

i 300 kan ingen höra dig skrika..

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Det beror så på hur du vill att den ska ligga. Om du exempelvis ska ha en bild i en flytande text ska du ofast inte använda absolut positionering eftersom bilden då ligger fast oavsett om du ändrar texten någon gång i framtiden.

Absolute positioning bör användas sparsamt, och oftast för att dra ut ett element ur sin naturliga position snarare än för att definiera vart ALLTING ska ligga. Istället rekommenderas du att använda det naturliga flödet och marginaler för att skjuta element från varandra.

edit: Nu lade jag märke till att du faktiskt frågade hur du skulle göra om du INTE använde absolut positionering (godmorgon! ). Om du vill ha texten flödandes runt bilden använder du float för att placera den antingen till vänster eller höger i din textbehållare.

Om det rör sig om en dekorativ bild som inte har ett eget budskap (exempelvis en bullet point eller liknande) passar det att använda sig av background för att lägga in den. Använder du den korta varianten background-position i kombination med background-repeat: no-repeat för att lägga den i ett av hörnen på värdelementet, centrerat eller med exakta x- och y-värden.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av Piraten
Nu fungerade det.

Inte för att vara sån men där ser du, när vi erbjuder oss att hjälpa till gör vi inte det för att jävlas eller som du säger "var ödmjuk, alla är inte lika duktiga som ni" utan för att kunna hjälpa till behöver man se alla byggstenar eftersom alla ganska tidigt sa att det inte var något fel angående bilden i css eller html, att då säga NEJ när vi säger att vi behöver hela paketet för att hjälpa till är ju lite vrångt!

Men iaf, anger du ingen position i CSS så läggs position: relative; in automatiskt och räcker gott och väl till det du gör; Teknocide nämde en av anledningarna till att använda absolut positionering men det finns fler, men jao bara till att läsa på!

Lycka till

Såg att du editerat nu Teknocide och korta versionen? Det är ju den långa
Korta är: background: url(dfsdf.pang) no-repeat top left;

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av Teknocide
(exempelvis en bullet point eller liknande) passar det att använda sig av background för att lägga in den.

Vet vad du menar, men just bullet point kanske var ett dåligt exempel?

list-style-image: url(bullet.png);