Problem med CSS i firefox, plus ytterligare ett problem.

Tror inte något finns som heter.xhtml, prova byta ut mot .html

Välkommen till wF!

Precis som yador säger så används inte filändelsen xhtml, man använder htm eller html, eller för all del asp, jsp, php etc om man har något serverside språk med i matchen.

Att det inte blir som du tänkt dig är på grund av att vad som menas med body renderas olika i olika browsrar. Det du troligen vill är att fylla viewporten vilket nödvändigtvis inte är samma sak som body. Det du kan göra då är att tvinga body att hela tiden vara 100% av viewporten genom att sätta height: 100%; i din css-fil.

Sen använder du DOCTYPEN xhtml 1.0 strict som ställer väldigt höga krav på att du kodar korrekt, jag skulle föreslå att du istället väljer xhtml 1.0 transitional, den är lite snällare.

Lycka till och återkom gärna om det är några oklarheter!

/HB

tack

Tack så mycket. Mitt lilla snedsteg med att döpa filen till .xhtml lyckades opera att klara och firefox att spöka till...när jag nu bytt till .html så fungerar det.

Blev nyfiken dock. Det här med viewporten. Jag testade med att sätta

body
{
background-image: url('../images/background_grey.png');
margin: 0;
padding: 0;
height: 20%;
}

Men den visas ändå i hela fönstret. Kan man verkligen laborera med höjden på bodyn? Testade med pixelmått också.

Säg att jag skulle vilja bakgrunden på 50% av höjden och hela bredden.
Eftersom det inte fungerade med att ändra i bodyn så testade jag en div istället.

.page
{
background-image: url('../images/background_grey.png');
margin: 0;
height: 50%;
padding: 0;
}

Fungerar inte. Det blir bara bakgrund där det finns text i div-taggen men den repeteras i alla fall hela vägen i x-led.

Om jag byter till tex height: 200px; då fungerar det. Dock kan man inte få div-taggen att börja ända upp i hörnet man får en liten vit ram runt i browsen. Försökte med margin: 0; padding: 0; i både bodyn och i div-taggen.

Mina tre frågor:

1. Går det att ändra höjden i body-taggen? Eller måste man använda sig av en div-tagg om man inte vill ha bakgrunden på hela sidan?

2. Så fall. Varför fungerar det inte att ändra height till procentvärde i en div-tagg? Det fungerar bra att ändra width till procent men height funkar bara om man sätter till pixlar.

3. Om man vill använda sig av en div-tagg hur får man den att starta ända uppe i hörnet av browsen? Har testat margin:0 och paddin: 0. (Vad är padding egentligen?)

(En tanke som slog mig nu när jag skrivit frågorna. Är height ett värde som inte ska gå att sätta till procent? Om man tänker så går det ju inte att definiera höjden på en sida eftersom den är oändligt lång med scrollen. Width fungerar däremot med procent men det kanske är för man förutsätter att folk försöker bygga sidor där man ska slippa scrolla i sidled och därför kan man bestämma ett exakt värde på bredden från början.)

1. sätt body till 100% i höjd

2. Jag kollade din background_grey.png det har en "fad" färg ser det ut som. Du kan i din body tagg sätta att bakgrunds bilden skall repeteras x eller y leds. i ditt fall något liknande:

body		{ background: url('http://web.comhem.se/~u55097044/test/background_grey.png') repeat-x #575757; height:100%;}

att "nolla" alla läsares margin och padding brukar

* {margin:0;padding:0}

fungera

Margin är "innan" elementet dvs luften mellan elementen och Padding är luften inne i elementet:

<div style="margin:30px;padding:80px;border:1px solid #000;">hej</div>
<div style="margin:30px;padding:80px;border:1px solid #000;">hej</div>

.page height baseras på den ytan page har att jobba med. XHTML doctypen säger (om jag inte missförstå det) att den inte har en höjd på 100%.

Alltså jag har nu fått jättebra svar och löst mitt huvudsakliga problem (som kanske inte var så svårt i själva verket) men jag ska fortsätta tjata lite till =).

Height i bodyn har ju ingen funktion?
Det spelar ingen roll om jag sätter den till 100% eller 50% eller nåt annat. Det gör ju ingen verkan.
Det gör ingen skillnad i en div-tag heller, endast pixel-värde ändrar utseendet.
Kan nån förklara på dagis-nivå var jag har cyklat vilse här.

Tror jag fattade padding nu =).

Att ändra det föregående elementets padding är som att ändra det efterkommande elementets margin med andra ord?

<div style="padding: 10px;">
<div></div>
</div>

är detsamma som:

<div>
<div style="margin: 10px;">
</div>
</div>

Stå ut lite till...snälla

height i body (beroende på vilken doctype du kör) kommer göra skillnad. Ge kod eller filen du använder dig av.

<!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>
		<title></title>
		<style type="text/css">
			<!--
			body		{ background: url('http://web.comhem.se/~u55097044/test/background_grey.png') repeat-x #575757 top left; height:100%;}
			//-->
		</style>
	</head>
	<body>
		lite innehåll.
	</body>
</html>

Ger i alla fall det resultat jag tror du var ute efter. (även om du har gjort din PNG transparent så ser den lite annolunda ut i IE mot Firefox).

"Tänket" kan vara rätt. Men det finns ju ändå en anledning padding och margin finns. Marginaler är inget direkt ny term inom tryck / tidning / publicering.

gjorde en snabb googling på padding margin och tycke denna bild förklara det mesta:
http://www.ninetnet.com/websidor/css/margpadd.gif

skulle du kunna visa ett exempel när height gör skillnad. Jag kan inte se något när jag testar height: 100% gentemot när jag har tagit bort det.
attributen top och left i din bodytag där, gör inte heller någon skillnad vare sig de är med eller inte. Jag måste vara blåst..

Jag har height:100% på mitt exempel. Vad ska jag mer testa? Jag förstå inte din fråga.

body { background: url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left; height:100%;}

gentemot

body { background: url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left;}

blir det någon skillnad i din webbläsare?? Inte i min i alla fall...frågan är vad för skillnad du får. Jag ser absolut ingenting.

Vad kör du för DOCTYPE? Ge all HTML kod.

Jag tror vi försöker lösa två problem samtidigt. Dels hur man får body att fylla viewporten och hur man jobbar med en bakgrundsbild.

Idag går det inte att låta en bakgrundsbild fylla på sådant sätt. Det kommer möjligtvis i CSS 3.0.

Men jag har googlat fram en snygg lösning som du hittar här:

http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Det funkar nog som du tänkt dig!

jag kopierade ditt exempel rakt av dvs

<!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>
<title></title>
<style type="text/css">
<!--
body { background:

url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left;

height: 100%;}
//-->
</style>
</head>
<body>
lite innehåll.
</body>
</html>

därifrån tog jag bort och lägger till height. top och left ändrar inte heller något.

testa

<!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>
		<title></title>
		<style type="text/css">
			<!--
			body		{}
			img#bg {
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
				}
					 
			//-->
		</style>
	</head>
	<body>
		<img src="http://web.comhem.se/~u55097044/test/background_grey.png" alt="test" id="bg" />
	</body>
</html>

japp nu blir det skillnad om man tar bort height respektive width. Men nu ligger inte height i bodytaggen utan som ett attribut hos bilden.

Jag kanske ska ge upp snart, men jag vill ändå fatta vad ni menar =) sorry...

Är det så du vill ha din gradiant bakgrund att sträcka sig ut från topp till botten?

ja det skulle jag gärna vilja. dock är det inte nödvändigt. jag kan ju lösa det lätt med att komplettera med en matchande bakgrundsfärg nere i botten som inte blir gradiant men det gör inget. jag kan ju också skapa en ännu "högre" bild att lägga som bakgrundsbild.

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

<img src="http://web.comhem.se/\~u55097044/test/background_grey.png" alt="test" id="bg" />

det blev ju ganska meningslöst eftersom bilden inte blir någon bakgrundsbild och därmed tar den ju upp all yta och man får inte plats med något annat.

men allra helst skulle jag vilja förstå vad height-attributet gör för skillnad när det är med i bodytaggen respektive när det inte är med =)

men går det att göra så att gradiant-bilden sträcker sig från topp till botten oavsett hur hög sidan blir?

bobrov skrev:

det blev ju ganska meningslöst eftersom bilden inte blir någon bakgrundsbild och därmed tar den ju upp all yta och man får inte plats med något annat.

Läste du länken som jag postade några inlägg tidigare? Där tar dom såklart hand om detta. Följ instruktionerna och häpna över den kluriga och smarta lösningen på alla dina problem

Inte för att jag vet om du kan ha någon nytta av detta, men någon gång för länge sedan hade vi detta med att stretcha bakgrunder på tapeten här. Kommer inte längre ihåg vem och vad det stod i rubriken.
Texten jag skrev då var för IE6 pch en äldre verson av FF. Hur andra nya webläsare hanterar % i height nu har jag inte kollat, men jag tror inte det har tillkommit något nytt. Kanske i css3. Sparade filen för att se hur det skulle bli i IE7. Inte så bra va? :-)
http://member.webforum.nu/9656/stretch.html

Förlåt headbug... Jag läste inte din länk... Såg nu att de hade fått med css3, men hur många webläsare har stöd för det?