FireFox problem!!! Hjälp!

parabol_daniel · 2008-05-21T21:48:26.000Z

Hej jag har gjort en liten hemsida med css och \ ar för att testa. Tidigare har jag använt tabeller för att få allt på plats. Sidan ser ut som den ska i IE7 men i Firefox går det helt åt skogen. Texten hamnar utanför sidan och under menyn :l Hur ska css-koden se ut för att det ska bli bra i firefox??? index.html TEST FIREFOX HJALP FIREFOX Sida 1 Sida 2 Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. Text på sidan. …

HTML & CSS

6 svar · 496 visningar · startad av parabol_daniel 21 maj 2008

parabol_danielMedlem sedan juni 200721 inlägg

Frågan21 maj 2008 21:48#1

Hej jag har gjort en liten hemsida med css och <div>ar för att testa. Tidigare har jag använt tabeller för att få allt på plats.
Sidan ser ut som den ska i IE7 men i Firefox går det helt åt skogen.
Texten hamnar utanför sidan och under menyn
Hur ska css-koden se ut för att det ska bli bra i firefox???

index.html

<html>
<head>
<title>TEST FIREFOX</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
	
	<div id="header">
		HJALP FIREFOX
	</div>
	
	<div id="menu">
        	<ul>
              <li><a href="?p=1">Sida 1</a></li>
			  <li><a href="?p=2">Sida 2</a></li>
          </ul>
    </div>
	
	<div id="main">
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
	</div>
	
	<div id="footer">
		Text i footer
	</div>
	
</div>

</body>
</html>

style.css

body {
background-color:#000000;
color:#FF0000;
}

#container {
background-color:#FFFFFF;
width:800px;
height:500px;
margin:100px;
}

#header {
background-color:#666666;
width:800px;
height:100px;
}

#menu {
float:left;
background-color:#999999;
width:170px;
height:100%;
}

#footer {
background-color:#666666;
width:800px;
height:50px;
}

PalleMedlem sedan apr. 20003 174 inlägg

21 maj 2008 22:00#2

1. Börja med att använda en Doctype så webbläsaren vet hur den ska rendera din sida.
2. När du använder float måste du alltid se till att återställa ordningen med clear.

Lycka till!

Danne VMedlem sedan aug. 20068 090 inlägg

21 maj 2008 22:06#3

FF gör nog precis som du skriver och inte skriver. Du har ingen stil på #main över huvud taget, och du har satt "height" på både #container och #menu vilket är helt onödigt.

Dessutom behöver du ett clear:both för att trycka ner footern och en doctype (DTD). Testa att bygg vidare på det här:

<!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">
<head>
<title>TEST FIREFOX</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
	
	<div id="header">
		HJALP FIREFOX
	</div>
	
	<div id="menu">
        	<ul>
              <li><a href="?p=1">Sida 1</a></li>
			  <li><a href="?p=2">Sida 2</a></li>
          </ul>
    </div>
	
<div id="main">
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
		<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
</div>
	<div style="height:0px; clear:both;"></div>
	<div id="footer">
		Text i footer
</div>
	
</div>

</body>
</html

body {
background-color:#000000;
color:#FF0000;
}

#container {
	background-color:#FFFFFF;
	width:800px;
	margin:100px;
}

#header {
background-color:#666666;
width:800px;
height:100px;
}

#menu {
	float:left;
	background-color:#999999;
	width:170px;
}

#footer {
background-color:#666666;
width:800px;
height:50px;
}
#main {
	float:left;
}

parabol_danielMedlem sedan juni 200721 inlägg

21 maj 2008 22:08#4

Tack så mycket, för snabba svar!!!

parabol_danielMedlem sedan juni 200721 inlägg

21 maj 2008 22:13#5

En sak till
Jag vill att menyns höjd ska anpassa sej efter "main" <div>en så att bakgrunden går ända ner, hur ska jag göra??

Danne VMedlem sedan aug. 20068 090 inlägg

21 maj 2008 22:19#6

parabol_daniel skrev:

En sak till
Jag vill att menyns höjd ska anpassa sej efter "main" <div>en så att bakgrunden går ända ner, hur ska jag göra??

Det går inte utan ganska mycket krångel eller med javascript. Tyvärr. Det enklaste är faktiskt om du gör en bakgrundsbild som du lägger in i #container oc repeterar vertikalt. Du gör alltså vänsterdelen av bilden som en bakgrund till menyn och högerdelen som bakgrund till #main. Då ser det ut som om #meny och #main alltid är lika höga.

Red: Såg nu att Palle också påpekat vikten av DTD och en clear.

parabol_danielMedlem sedan juni 200721 inlägg

21 maj 2008 22:22#7

OK Tack så mycket!