Skumt problem i firefox med min css-sida.

Hallå.

Jag försökte lägga till lite dekorationer i form av en bild som skall lägga sig bakom min "layout". Allting visas perfekt i IE Explorer (har inte testat med nyaste versionen) men i Firefox får jag problem.

Min dekeration lägger sig framför min layout på något konstigt sätt så att jag kan se alla menyknappar o.s.v. men dem går inte att klicka på, och jag ser inte äns bilden. Nästan som om bilden är osynlig men slår ut min meny.

Jag testade att testa att ta bort

 <img src="sjokexet.gif">

ifrån index.shtml fil och bara ha dekorationen som backgrundsbild i min css-fil, och då kan jag klicka på menyn o.s.v. men bilden visas inte.

Ni ser vad jag menar på.

Adress till index.shtml (www.sjokexet.com)

Adress till min CSS-mall

Lite hjälp med detta skulle jag vara väldigt tacksam för. Förstår inte vad som kan vara fel alls.

//Fredrik

eftersom det ska vara en bakgrund(vad jag har förstått det) använd CSS med en DIV som placera ut bakgrunden rätt...

z-index spökar också... provade att ändra den till 1 och då kom den fram... du får höja alla z-index att börja med...

Är det inte så jag har gjort? =S. Jag har ju i min css kod använt backgroun-imgae:url... som då säger att i den boxen skall det vara en bild. Sen har jag skrivit

 <div id="logga"></div>

Och detta funkar i IE explorer men inte firefox. Menar du att jag sakall göra på något annat sätt.

Hittade också en annan skum sak då jag testade lite med min css mall. om jag ändrade z-index på loggo boxen så kom dekerationen framför halva min skrivruta, men bakom (så som de skulle) höger boxarna på min layout. Och även fast jag ändrade z-index på skrivrutan o.s.v. kunde jag inte fixa till det

oj dy hann före. Skall göra det, men inget särskilt ändrades. tror jag. skall testa igen.

provade att placera din logga div utanför din center och nu placeras bakgrunden rätt... du får kanske skapa en annan div för bakgrunden / loggan och sen placera om den på något fiffigt sätt...

Du har så mycket minus top i din css som placerar saker lite fel när det gäller att visa saker och i vissa fall blockeras länkar.
Skulle nog tänka om lite om jag var du och placera bakgrunden i body och ta bort logga-diven helt och sedan ta bort lite minus- värden.
Testa med att lägga in detta i body. Placeringen av bilden justerar du med positionstalen jag lagt in.

   background: url(bilden.jpg) no-repeat 50px 30px;
		width: 900px; }

Ta bort logga-diven och placera sedan resten som du vill ha det. Försök undvika att dra saker över länkar med minus-värden...

är det inte bättre med % vid positionera tanten? då han centrerar content boxen också.

voigtann1 skrev:

är det inte bättre med % vid positionera tanten? då han centrerar content boxen också.

Visst vore det trevligt om IE förstod % i height...
Eftersom han har fast bredd på layouten så tycker jag inte man behöver krångla med attanvända relativa storlekar i en del. Blir lätt lite konstigt när man minimerar fönster.
Hans auto för att centrera räcker ju bara ner till 900px... ;)

vad har height med centreringen att göra? ;) men visst så länge det fungera så ;)

Egentligen så har jag inte pysslat så mycket med att försöka placera saker med % i body... men andra värdet anger höjd...
Testar man t.ex
background: url(bild.jpg) no-repeat 50% -100%;
width: 100%;
height: 100%;}
Så flyttar FF ner bilden sin egen storlek 1 gång.
I IE så försvinner bilden.
Kör man 50% 50%,
så kapar FF bilden på hälften av höjden och IE lägger bilden centrerat på sidan.
Lite halvlustiga tolkningar, vilken som ska anses rätt vet jag inte, om nu någon är det...
Har du några tips voigtann1? För min del har det bara kännts som för jobbigt :-)

Jo jag vet med 100% height och min-height skillnader.. eftersom det är en div med en "liten" bakgrund så behöver du inte använda width eller height i % det är positioneringen i % som är mer intressant.
man skulle kunna ha:
<div id="header"><div id="logan"></div></div>
och centrera headern och sen logan ta man position absolute eller något...

voigtann1 skrev:

Jo jag vet med 100% height och min-height skillnader.. eftersom det är en div med en "liten" bakgrund så behöver du inte använda width eller height i % det är positioneringen i % som är mer intressant.

Nu vet jag inte om vi pratar runt varandra. Det är position jag pratar om inte bildstorlek....
Min uppfattning är att han inte har en liten bakgrund och om du lägger in den i en div så måste han dra i princip hela sin övriga design tillbaka med minusmarginaler för att få upp den dit han vill ha den, och alla z-index som han måste få rätt på vägen, inte bara på första-sidan, vilket jag tyckte var onödigt när body ändå var tom på bakgrundsbild... Just nu går den ju till under hälsning på första sidan.
Tyckte bara det såg enklare ut. :)
Självklart fungerar din variant också... ;)

Okej tack för all hjälp. Har inte haft möjlighet till internet sen jag var i skolan så förlåt för det sena gensvaret. Så om jag fattar det rätt så skall jag placera

   background: url(bilden.jpg) no-repeat 50px 30px;
		width: 900px; }

i min css mall under body variablarna? Jag skall testa alla alternativ imon i skolan och hör av mig om jag fortfarande inte får till det. Men all hjälp en så länge är jag väldigt tacksam för, nu har jag något att göra imon när jag sitter där i skolan också. =)

Om du testar mitt förslag så föreslår jag att du ändrar dessa två i första hand till något så här... vet inte om det kan ändra allt, men du kan ju se efter. Då är divloggan borta helt.

body {
   background: url(sjokexet.gif) no-repeat 30px 50px;
   padding: 0;	
   margin: 0; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.7em;
   width: 900px;
   }
#centrering {
   width: 900px; 
   margin-right: auto; 
   margin-left: auto;
   position: relative; 
   top: 110px;
   left: 110px; 
   }

Tack så mycket! nu funkar allt perfekt.. Eller nästan iallafall. Vad är det som gör att "listpunkterna" visas fel i firefox?, i mina lister som kan hittas i högerboxarna på min sida så kommer punkterna utanför min bild som jag har som backgrund för alla boxar.

Du har glömt </ul> i html.
Hittar ingenstans där du gett li värden i css men någonting sånt här kanske

li{
	display: list-item;
	list-style: disc inside;
}

Du får testa dig fram...

Perfekt! Nu funkar allt felfritt. En än gång tack så hemskt mycket för all hjälp. Riktigt snällt.

Hmm.. jag behöver hjälp igen.. centreringen av sidan fungerar inte. Jag kan lyckas centrera den för en skärmupplösning, men när jag testar på en annan skärmupplösning fungerar det inte. Jag har testat lite nu, försökt ta bort possition relative för centeringen utan resultat. Hur skall jag nu göra för att centrera hela min sida på alla upplösningar?

Hur brett är innehållet egentligen på din sida?
Det står 900px i din centreringsdiv, men det är mycket smalare...
ändra den till 700px som kanske blir ok.

#centrering {
   width: 700px;
   margin-right: auto; 
   margin-left: auto;
   position: relative; 
   top: 110px;
   }

Left ska bort helt om du vill centrera.
Då blir body fel, ändra till

 background: url(sjokexet.gif) no-repeat center top;

ta bort width där också
och se vart allt hamnar då. ;)