Olika färger i olika webbläsare?

Tråden skapades och har fått 19 svar. Det senaste inlägget skrevs .
1

Nu har jag ett litet problem med färger här. Jag använder en toning som bakgrundsbild på en sida. Så här ser CSS-koden ut.

background-image: url(bgr_fade.png);
background-repeat: repeat-x;
background-position: 0 100%;

Bilden ligger alltså längst ner. Den är mörkgrå, och tonar mot ljusgrå (#ddd), som jag också har som bakgrundsfärg på sidan. I Safari ser allt bra ut men i Firefox syns en kant mellan #ddd i bilden och #ddd på sidan. Det borde väl vara samma färg?

Gränsen går mellan Blog och Bilder på bilden som jag har bifogat här. Den syns inte på vissa (mindre ljusstarka?) skärmar, men den finns där. Någon som vet vad det beror på och om det går att lösa?

Kanten som jag pratar om syns inte alls på min PB 12" och knappt på en iMac 17", men på min Samsung Syncmaster är den jättetydlig. Det konstiga är att färgerna verkar vara exakt samma i Safari, men skiljer sig i Firefox.

Jag kanske behöver kalibrera min Syncmaster annorlunda, men det löser ju inte direkt något, det göra bara så att jag inte ser problemet längre..

  • Medlem
  • 2004-09-25 23:28
Ursprungligen av zodijackyl:

Kanten som jag pratar om syns inte alls på min PB 12" och knappt på en iMac 17", men på min Samsung Syncmaster är den jättetydlig. Det konstiga är att färgerna verkar vara exakt samma i Safari, men skiljer sig i Firefox.

Jag kanske behöver kalibrera min Syncmaster annorlunda, men det löser ju inte direkt något, det göra bara så att jag inte ser problemet längre..

Lustigt, jag ser skarven tydligt på min iMac G4 15" rev A.

(Har inget med tråden att göra, men jag blir lite fundersam när det verkar som nyare iMacar knappt förmår visa upp problemet.)

  • Medlem
  • Norrköping
  • 2004-09-25 16:44

Kan det ha någe att göra med hur de olika webläsarna tolkar #ddd? #ddd kan tolkas på flera olika sätt tex #DDD000, #DDDFFF, #D0D0D0 , #DFDFDF och #DDDDDD. De tre sista ger gråa färger som ligger nära varandra, Safari och Firefox kan helt enkelt ha olika sätt att tolka vilket färg man menar när man bara anger 3 av 6 tecken. Det är iaf min teori, så testa med att ange färgen med alla 6 hexadecimala tecken och se om det funkar bättre då.

  • Medlem
  • Stockholm
  • 2004-09-25 19:50

va!?
Det där måste jag kolla upp när jag kommer hem, det låter ju som totalt olika färger drutten. Ja har senaste året angett med 3 siffror där det år (dvs typ #ddd, eller #ccc etc) och det har sett likadant ut i Safari, IE-win och firefox.

Vad jag tänkte tipsa om däremot är att transparenta png:s inte stödjs fullt ut av alla webbläsare (om jag minns korrekt). Safari är väl en av få browsers som hanterar dem utmärkt.

Att skriva ut hela hex-koden var det första jag tänkte på att testa men det hjälpte inte. Ser ni föresten linjen som jag pratar om på bilden? På mins flickväns 17" iMac syns den knappt.

Ursprungligen av ivar:

Vad jag tänkte tipsa om däremot är att transparenta png:s inte stödjs fullt ut av alla webbläsare (om jag minns korrekt). Safari är väl en av få browsers som hanterar dem utmärkt.

Det kunde ha varit något liknande för jag vet inte hur transparent till png-bilder fungerar. Men bakgrundsbilden innehåller ingen transparens alls utan är bara en fade mellan två bilder så det var nog inte det den här gången.

  • Medlem
  • Norrköping
  • 2004-09-25 20:17

Jag är ingen expert på området, alla webbläsare kanske tolkar #ddd som samma färg. Men en sak som jag vet är att när man gör hemsidor så har man 16777216 (256^3) färger att välja på och det blir hexadecimalt #000000 - #FFFFFF.

Tresiffriga färgkombinationer är förkortningar av färger som består av tre par siffror. #003366 blir #036, #000000 blir #000 och så vidare. Helt enligt spec, och jag har aldrig hört talas om eller märkt att det skulle medföra några problem eller färgskillnader i någon webbläsare.

Se även Syntax and basic data types .

  • Medlem
  • Norrköping
  • 2004-09-25 22:05
Ursprungligen av system.log:

Tresiffriga färgkombinationer är förkortningar av färger som består av tre par siffror. #003366 blir #036, #000000 blir #000 och så vidare. Helt enligt spec, och jag har aldrig hört talas om eller märkt att det skulle medföra några problem eller färgskillnader i någon webbläsare.

Se även Syntax and basic data types .

Man lär sig någe nytt varje dag

  • Medlem
  • Karlstad
  • 2004-09-25 21:12

24-bitars transparenta png funkar troligen inte. I vilket fall som helst är du körd på IE/PC som inte tar alpha-channeln i dom. Har du testat med en transparent gif?
Förresten, varför ha transparens över huvud taget? varför inte en gif utan transparens, alltså bara tona från färg till sidans bakgrundsfärg direkt, eftersom jag har för mig att en del läsare har "issues" med just transparens i bakgrundsbilder.
Hexfärgerna med tre bokstäver går alldeles utmärkt.

Var lite otydlig. Jag använde alltså ingen transparens.

Du skulle ju kunna skippa att ha en bakgrundsfärg, och istället ersätta bakgrundsbilden som du har nu med en 5x5 pixlar bild (repeteras över hela sidan såklart) som har den färg du vill ha.

Sedan skapar du en tabell som har en enda stor cell, och tabellens bakgrund får ha din gradient. Då har ju bakgrunden samma färg som slutet på gradienten. Eller har jag missförstått situationen?

Ursprungligen av ScriptFlipper:

Du skulle ju kunna skippa att ha en bakgrundsfärg, och istället ersätta bakgrundsbilden som du har nu med en 5x5 pixlar bild (repeteras över hela sidan såklart) som har den färg du vill ha.

Sedan skapar du en tabell som har en enda stor cell, och tabellens bakgrund får ha din gradient. Då har ju bakgrunden samma färg som slutet på gradienten. Eller har jag missförstått situationen?

Jo, det går ju alltid att göra så men det känns lite fulhack. Tråkigt med sådana lösningar

  • Medlem
  • Karlstad
  • 2004-09-26 00:11
Ursprungligen av zodijackyl:

Jo, det går ju alltid att göra så men det känns lite fulhack. Tråkigt med sådana lösningar

Men testa med en gif, som jag föreslog.
Det kan vara svårt att få jpgs och pngs att hålla rätt hex-värden.
(Förresten tror jag att det var jag som felaktigt drog slutsatsen att det var transparens med i spelet. Man brukar junte använda png annars, eftersom dom kan bli ganska "tunga".)

EDIT: När jag kollar färgerna med Digtal Color Meter så har sidans botten #E3E3E3 medan övre kanten på png'n är #E8E8E8. Poängen alltså att dom har olika värden.

  • Medlem
  • Stockholm
  • 2004-09-26 06:10
Ursprungligen av Danne V:

[...] Man brukar junte använda png annars, eftersom dom kan bli ganska "tunga".)

Appropå "tunga" bilder så ska png komprimera 5-25% bättre än gif för genomsnittsbilden.

Det enda problemet jag ser med png är att den har dåligt stöd, framförallt av... IE (oväntat va?)

Läs mer om png och gif hos w3.

  • Medlem
  • Karlstad
  • 2004-09-26 09:10
Ursprungligen av ivar:

Appropå "tunga" bilder så ska png komprimera 5-25% bättre än gif för genomsnittsbilden.

Det enda problemet jag ser med png är att den har dåligt stöd, framförallt av... IE (oväntat va?)

Läs mer om png och gif hos w3.

Jorå, png komprimerar mycket bättre än gif (om det är "vanliga" bilder, dvs inte "grafiska" bilder).
Jag menade i valet mellan jpg och png.
Men i det här fallet är det viktigt att få ett exakt hex-värde, å då är giffen bättre än png'n och jipeggen. Ska man få de senare att hålla viss färg på ett visst ställe på bilden, så ska man ha en stor portion tur och mycket tålamod.
Giffen klara det, men det kostar några Kb extra.

Ursprungligen av zodijackyl:

Jo, det går ju alltid att göra så men det känns lite fulhack. Tråkigt med sådana lösningar

Smaken är som baken!

Men nu vet du ju hur du skulle kunna få det att fungera

Ah, tack så mycket. Jag skall testa med .gif imorgon och berätta hur det gick.

  • Medlem
  • 2004-09-26 12:38

Det är ok att fuska så länge ingen upptäcker det...

Är det bara jag som tycker att det viktiga är inte hur sidan ser ut utan hur koden ser ut? Då gillar man inte fulllösningar

Och det fungerade bra med gif! Så har man lärt sig något nytt också.

1
Bevaka tråden