CSS - container förskjuts åt höger i FF

6 svar · 477 visningar · startad av blåjeans 16 sep. 2006

blåjeansMedlem sedan sep. 2005849 inlägg

Frågan16 sep. 2006 15:35#1

Jag har ett problem!
Har precis gett mig på att försöka göra en hemsida där hela layouten är i CSS. Nu är det så att i IE ser allt bra ut, men i FF så förskjuts containern som ligger under sidhuvudet, åt höger typ 1 mm eller så. Vad har jag gjort för fel?

Så här ser det ut i css'en:

#layout {
	background-color: #ffffff;
	width: 800px;
	border: 2px solid #000000;
	margin-left: auto;
	margin-right: auto;
}

#sidhuvud {
	height: 100px;
	width: 800px;
	margin: 0;
	padding: 0;
	background: url(../images/top2.gif) no-repeat;
	border-bottom: 1px solid #000000;
}

#kolumncontainer{
	float: left;
	width: 800px; 
	background-color: #ffffff;
	border: 2px solid #000000;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}

#kolumn1 {
	float: left;
	width: 400px;
	padding: 10px;
}

#kolumn1_box{
	float: left;
	margin: 0;
	padding: 15px;
	line-height: 1.8em;
	border: 1px solid #000000;
}

#kolumn2 {
	float: left;
	width: 200px;
	padding: 10px;
	line-height: 1.8em;
}

#kolumn2_box{
	float: left;
	margin: 0;
	padding: 15px;
	line-height: 1.8em;
	border: 1px solid #000000;

}

tantenMedlem sedan nov. 20051 596 inlägg

16 sep. 2006 19:53#2

Nu finns det ganska mycket här i forumet som handlar om skillnaderna i IE och de andra webläsarna när det gäller pixlar åt det ena eller andra hållet och hur man "nollar " sin css i body, html, och med * för att undvika det du beskriver.
Om det ser rätt ut i IE och inte i de andra så är det oftast IE som har "fel".
Skillnader kan också uppstå beroende på vilken doctype du har.

Att du angett att margin ska vara auto på containern är onödigt eftersom du har float:left på den, så sätt margin till 0 i stället.
Hur ser din body ut och har du testat med att ha med *{margin: 0; padding: 0;} i din css?

blåjeansMedlem sedan sep. 2005849 inlägg

17 sep. 2006 08:00#3

Tack för svar! Jo, jag såg att det fanns väldigt mycket om just det här. Försökte se om det fanns nåt som kunde passa men jag hittade inget som hjälpte mig.

Ok, jag har ändrat margin till 0 i containern och lagt till *{margin: 0; padding: 0;} Det ska vara allra först i css'en eller?

Body ser ut såhär:

<body>

<div id="layout">

<div id="sidhuvud"></div>

<div id="kolumncontainer">

<div id="kolumn1">
<div id="kolumn1_box">
 <p>bla bla</p>
</div>
</div>

<div id="kolumn2">
<div id="kolumn2_box">
    <p>bla bla/p>
</div>
</div>

</div>

</div>

</body>

och doctypen är

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

plus att det står <html xmlns="http://www.w3.org/1999/xhtml"> precis under.

tantenMedlem sedan nov. 20051 596 inlägg

17 sep. 2006 08:56#4

Lite ändringar i din css
.

*{
margin:0px;
padding:0px;
}
body{           
margin:10px 0;
padding:0px;
}
#wrapper{
width:800px;
margin-left:auto;
margin-right:auto;
}
#layout{
width:100%;
border:2px solid #000;
float:left;
}
#kolumncontainer{
float:left;
width:100%;
padding:0px;
margin:0px;
background:#FFF;
}

<body><div id="wrapper">

Och avsluta wrapper längst ner.
Det var body i css jag frågade efter :) gjorde en enkel som placerar din layout 10px från toppen.
Du kan ju testa detta... tror det ska fungera som du vill ;)

Med de här ändringarna kommer din border att följa med din #layout i stället för containern... och det ska inte bli några skillnader i webläsarna.

blåjeansMedlem sedan sep. 2005849 inlägg

17 sep. 2006 10:13#5

Taack!! :f Det funkar nu!! :) Tänk vad bra det kan bli.

FuelMedlem sedan okt. 20001 285 inlägg

18 sep. 2006 00:52#6

...

blåjeansMedlem sedan sep. 2005849 inlägg

18 sep. 2006 09:23#7

Aha, det är ju enkelt att ändra. Tack för det! Gäller det alltid _?