webForumDet fria alternativet
Logga in / Bli medlem

Stort problem med Firefox

HTML & CSS

28 svar · 1 330 visningar · startad av joakimweb

joakimwebMedlem sedan feb. 2002141 inlägg
Frågan#1

Hej!

Jag släppte en ny version av min hemsida idag och märker att den ser rent ut sagt förjävlig ut i Mozilla Firefox. Ni kan se resultatet på www.joakimweb.se.

Det som inte funkar är exempelvis:

.loginformbg2 {
background: url(/images/design/loggedin_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed; 
background-position: top left;
}

Inkluderade:

<td valign="top" class="loginformbg">

Hur går man runt detta problem? Background tycks inte accepteras i annat än BODY.

Tacksam för allt.

Mvh
Joakim

@nderss avatar@ndersMedlem sedan juni 200032 967 inlägg
#2

Prova

background-image: url(/images/design/loggedin_bg.gif);

istället för bara background.

mvh

silfverMedlem sedan apr. 200312 679 inlägg
#3

Re: Stort problem med Firefox

Ändra till:

.loginformbg2 {
[b]background-image:[/b] url(/images/design/loggedin_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed; 
background-position: top left;
}

Så borde bakgrunden fungera.

r\ Aldrig får man vara först. :bla :moose

joakimwebMedlem sedan feb. 2002141 inlägg
#4

Japp, det tycker jag också. Men det funkar ändå inte :/
Den vill helt enkelt inte acceptera background-image heller

silfverMedlem sedan apr. 200312 679 inlägg
#5

Du kanske bör titta på detta då

<td valign="top" class="[b]loginformbg[/b]">

Du har glömt tvåan. :)

icaaqMedlem sedan okt. 20005 273 inlägg
#6

Man kan använda background. http://www.w3.org/TR/CSS21/colors.html#background-properties

Testa däremot att byta namn på dina bilder så att du inte har några underscore (_) i bildnamnet.

mv icaaq

joakimwebMedlem sedan feb. 2002141 inlägg
#7

silfver skrev:

Du kanske bör titta på detta då

<td valign="top" class="[b]loginformbg[/b]">

Du har glömt tvåan. :)

Alltså det var bara ett exempel, har en massa såna bakgrunder till olika saker. Så det stämmer och allt ser perfekt ut i IE.

joakimwebMedlem sedan feb. 2002141 inlägg
#8
.loginformbg {
background-color: #FFFFF;
background-image: url("/images/design/loginform_bg.gif");
background-repeat : no-repeat; 
background-attachment : fixed; 
background-position : 0% 0%; 
}

Nu använder jag det så, och jag ser ändå inget där det skall vara och är i IE.
Det med underscore i namnen tror jag inte gör något. Har en som heter aktivabg.gif (alltså utan underscore) och den funkar inte heller :/

Ingen som haft samma problem?

frankofs avatarfrankofMedlem sedan jan. 20016 874 inlägg
#9

Känner igen dettta, har med relativa sökväger att göra, minns inte exakt hur, men den ena utgår från html dokumentets placering och den andra från css dokumentets placering.
Hur blir det om du lägger in css i html dokumentet?

silfverMedlem sedan apr. 200312 679 inlägg
#10

Som frankof sa, pröva att ange en exakt sökväg.

background-image: url([url]http://www.joakimweb.se/images/design/loginform_bg.gif[/url]);
joakimwebMedlem sedan feb. 2002141 inlägg
#11

Hehe, det är helmysko, testar nu med exakt sökväg och jag ser ingen skillnad :/

joakimwebMedlem sedan feb. 2002141 inlägg
#12

Frågan är bara vad som skiljer BODY och de övriga?

icaaqMedlem sedan okt. 20005 273 inlägg
#13

Ta bort

[red]

background-attachment: fixed; 
[/red]

mv icaaq

joakimwebMedlem sedan feb. 2002141 inlägg
#14

icaaq skrev:

Ta bort

[red]

background-attachment: fixed; 
[/red]

mv icaaq

Samma resultat :/

Nipons avatarNiponMedlem sedan juli 2003270 inlägg
#15

Hej, Hej!

Hmm! Du har ju som sagt en del problem i firefox med sidan. Tog mig friheten att kika lite på ditt stylesheet... Det har ju presenterats en del lösningar ovan men du måste göra ALLA...

Det mesta har att göra med vad frankhof skrev ovan. Det här uppstår när man lägger stylesheetet i en annan mapp än sidan. Hade samma problem för några år sen med Netscape!

Alltså:

1. Antingen exakt sökväg till bg-bilderna ELLER placera om sidan till samma mapp som stylesheetet och skriv om de andra sökvägarna. Phu!

Använder du:

background-image: url(/images/design/xxx_bg.gif)

- tag BORT slashen innan images!

2. "background-position: left top;" fungerarar inte med "background-attachment: fixed;" - tag bort det senaste överallt.

Inte så här heller:

background: url(images/design/xxx_bg.gif) fixed repeat-y left top

Du måste ta bort: FIXED!

Gör alltihopa så kommer i alla fall bakgrundsproblemet att funka!

Ett litet tillägg:

För att: "background-position: left top;" eller typ "background-position: 20px 20px;" ska funka måste du alltid kombinera det med: "background-repeat: no-repeat" eller repeat-y eller repeat-x - alltså vad du nu har för repeat...

Men det visste du kanske redan... :)

joakimwebMedlem sedan feb. 2002141 inlägg
#16

Nipon skrev:

Hej, Hej!

Hmm! Du har ju som sagt en del problem i firefox med sidan. Tog mig friheten att kika lite på ditt stylesheet... Det har ju presenterats en del lösningar ovan men du måste göra ALLA...

Det mesta har att göra med vad frankhof skrev ovan. Det här uppstår när man lägger stylesheetet i en annan mapp än sidan. Hade samma problem för några år sen med Netscape!

Alltså:

1. Antingen exakt sökväg till bg-bilderna ELLER placera om sidan till samma mapp som stylesheetet och skriv om de andra sökvägarna. Phu!

Använder du:

background-image: url(/images/design/xxx_bg.gif)

- tag BORT slashen innan images!

2. "background-position: left top;" fungerarar inte med "background-attachment: fixed;" - tag bort det senaste överallt.

Inte så här heller:

background: url(images/design/xxx_bg.gif) fixed repeat-y left top

Du måste ta bort: FIXED!

Gör alltihopa så kommer i alla fall bakgrundsproblemet att funka!

Ett litet tillägg:

För att: "background-position: left top;" eller typ "background-position: 20px 20px;" ska funka måste du alltid kombinera det med: "background-repeat: no-repeat" eller repeat-y eller repeat-x - alltså vad du nu har för repeat...

Men det visste du kanske redan... :)

Tack för mycket bra tips. Jag har dock testat men jag kan fortfarande inte ens få en del av sidan att fungera korrekt i Firefox.

Därför undrar jag. Är det någon som skulle kunna tänka sig att se över detta och skriva en fungerande css-fil till JoakimWeb? Vore oerhört tacksamt.

Mvh
Joakim

silfverMedlem sedan apr. 200312 679 inlägg
#17

Vad är det för utmaning och låta någon annan göra jobbet? ;)

Tinwëlints avatarTinwëlintMedlem sedan maj 2004451 inlägg
#18

Ett problem kan ju vara att fixed ska tolkas som fixed gentemot "viewporten", dvs webbläsarfönstret. Och alltså med koden:

background: url(sökväg) fixed top left no-repeat;

hamnar längst upp till vänster i webbläsarfönstret i en webbläsare som tolkar koden korrekt (om sidan läses i standards-mode i alla fall)

http://www.w3.org/TR/CSS2/colors.html#background-properties

joakimwebMedlem sedan feb. 2002141 inlägg
#19

silfver skrev:

Vad är det för utmaning och låta någon annan göra jobbet? ;)

Jag behöver få det ordnat, kanske 10% ser sidan i mozilla firefox.

Skapade en ny tråd för just hjälpandet:
http://www.webforum.nu/showthread.php?s=&threadid=120093

Nipons avatarNiponMedlem sedan juli 2003270 inlägg
#20

Eftersom jag inte har nåt roligare för mig såhär en lördag... :r

Det här funkar från min hårdisk i både IE o Firefox!!


BODY {
	BACKGROUND-POSITION: center top; MARGIN-TOP: 0px; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/design/bg.gif[/url]); BACKGROUND-REPEAT: repeat-y
}
.frameleft {
	BACKGROUND: url([url]http://www.joakimweb.se/images/design/border_left.gif[/url]) repeat-y 0% 50%
}
.frameright {
	BACKGROUND: url([url]http://www.joakimweb.se/images/design/border_right.gif[/url]) repeat-y center top
}
.loginformbg {
	BACKGROUND-POSITION: 0% 0%;  BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/design/loginform_bg.gif[/url]); BACKGROUND-REPEAT: no-repeat
}
.loginformbg2 {
	BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/design/loggedin_bg.gif[/url]); BACKGROUND-REPEAT: no-repeat
}
.tmenubg {
	BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/design/tmenu_bg.gif[/url]); BACKGROUND-REPEAT: repeat-x
}
.tmenubg2 {
	BACKGROUND-POSITION: right top;  BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/topmenu/aktivabg.gif[/url]); BACKGROUND-REPEAT: no-repeat
}
.smallbg {
	BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/main/smallbg.gif[/url]); BACKGROUND-REPEAT: repeat-y
}
.bigbg {
	BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/main/bigbg.gif[/url]); BACKGROUND-REPEAT: repeat-y
}
.gbbg {
	BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url([url]http://www.joakimweb.se/images/design/gb_bg.gif[/url]); BACKGROUND-REPEAT: repeat
}
.hugebg {
	BACKGROUND: url([url]http://www.joakimweb.se/images/main/hugebg.gif[/url]) repeat-y left top
}
.hugetop {
	BACKGROUND: url([url]http://www.joakimweb.se/images/main/hugetop.gif[/url])  no-repeat left top
}
.hugetop2 {
	BACKGROUND: url([url]http://www.joakimweb.se/images/main/hugetop.gif[/url]) no-repeat right top
}
.bannerbg {
	BACKGROUND: url([url]http://www.joakimweb.se/images/main/bannerbg.gif[/url]) repeat-y left top
}
.formsx {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #aaaaaa 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #aaaaaa 1px solid; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #eeeeee
}
.formsnews {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #aaaaaa 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #aaaaaa 1px solid; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #eeeeee
}
.submit {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT: bold 10px Tahoma; BORDER-LEFT: #000000 1px solid; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #e7e7e7
}
.specialRam {
	BORDER-RIGHT: #2e394d 1px solid; BORDER-TOP: #2e394d 1px solid; BORDER-LEFT: #2e394d 1px solid; BORDER-BOTTOM: #2e394d 1px solid; BACKGROUND-COLOR: #4a618d
}
.specialRam2 {
	BORDER-RIGHT: #2e394d 1px solid; BORDER-TOP: #2e394d 1px solid; BORDER-LEFT: #2e394d 1px solid; BORDER-BOTTOM: #2e394d 1px solid; BACKGROUND-COLOR: #3f5787
}
.loginformtext {
	FONT-SIZE: 7.5pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Arial; font-stretch: semi-expanded
}
.menutext {
	FONT-SIZE: 8pt; COLOR: #ffffff; LINE-HEIGHT: 120%; FONT-FAMILY: Verdana; font-stretch: semi-expanded
}
.maintext {
	FONT-SIZE: 8.6pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.maintext2 {
	FONT-SIZE: 8.6pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 177px
}
.maintext3 {
	FONT-SIZE: 8.6pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 177px
}
.maintext4 {
	FONT-SIZE: 8.6pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 60px
}
.mainstext {
	FONT-SIZE: 10px; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.mainstext2 {
	FONT-SIZE: 10px; COLOR: #ffffff; LINE-HEIGHT: 105%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.maindistance {
	FONT-SIZE: 4pt; COLOR: #ffffff; LINE-HEIGHT: 100%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.loginbutton {
	WIDTH: 51px; HEIGHT: 16px
}
FORM {
	MARGIN: 0px
}
A {
	COLOR: #ffffff; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none
}
A:visited {
	COLOR: #ffffff; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none
}
A:active {
	COLOR: #ffffff; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none
}
A:hover {
	COLOR: #f7941d; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none
}
.loginfields {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 11px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 139px; COLOR: #505f81; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 16px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px
}

Har ändrat det jag föreslog ovan! :e

271 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
129 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)