Sitelayout and positioning wrong in Firefox

November 28, 2007

I am learning CSS and got it working fine in IE. However in Firefox the positioning is messed up.Can somebody help me and tell me what I am doing wrong?You can see the site on http://www.lbcdanderyd-kedjan.se/ny/and on http://www.lbcdanderyd-kedjan.se/ny/ScreenShot001.jpg you see a picture of how it looks in IE7The CSS looks like:

body {	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #333333;	background: #FFFFFF;	font: 11px Verdana, Arial, Helvetica, sans-serif; 	line-height: 170%;	color: #333333;	 }a:link {	color: #3366CC;	text-decoration: none;}a:visited {	text-decoration: none;	color: #3366CC;}a:hover {	text-decoration: none;	color: #990000;}a:active {	text-decoration: none;	color: #3366CC;}/* Headers */h1 { font-family: "Trebuchet MS", sans-serif; font-weight: bold; font-size: 24px; color: #004C99; }h2 { font-family: "Trebuchet MS", sans-serif; font-weight: bold; font-size: 14px; color: #004C99; }/* sidlayout */#utsidan{ width: 900px;  margin: auto;}#sidhuvud {	background:#FFFFFF;	width: 900px;	height: 150px;	margin: auto;	background: url(../images/header.jpg) no-repeat top left;	border: 0;}#knapprad {	background: none;	width: 650px;	height: 30px;	margin: 0 0 0 250px;	border: 0px solid blue; 	/* enbart för layouttest */}#kolumncontainer {	background: #FFFFFF; 	width: 900px;	margin: auto;	background: url(../images/bakgrund_kolumn.gif) repeat top left;	border: 0;}#kolumn1 {	background: none; 	float: left; 	width: 230px; 	padding: 10px;}#kolumn2 {	background: none; 	float: left; 	width: 630px; 	padding: 10px;} #sidfot {	background: #EEEEE7; 	color:#555;	width: 880px;	margin:20px 0 5px 0;	padding:10px 10px 0px 10px;	text-align: center; 	font-size: 11px; }#grabox {	background: #D1DDDB; 	color:#555;	margin:0 0 0 0;	padding:0px 0px 0px 0px;	text-align: center; 	font-size: 11px;	border: 1px solid #E79896;}#vitbox {	background: #FFFFFF; 	color:#555;	margin:0 0 0 0;	padding:0px 0px 0px 0px;	text-align: center; 	font-size: 11px;	border: 1px solid #E79896;}#rodbox {	background: #E79896; 	color:#555;	margin-left: auto;	margin-right: auto;	margin-top: 10px;	padding:10px 0px 10px 0px;	text-align: center; 	font-size: 11px;	border: none;}#textcontainer {	width: 100%; }#textbox1 {	float: left;	width: 50%;	padding: 1%;	text-align: left;}#textbox2 {	float: right;	padding: 1%;	text-align: left;}

The index.html looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Lastbilcentralen Danderyd-kedjan AB</title><link href="css/layout.css" rel="stylesheet" type="text/css" /></head><body><!-- Hela textområde --><div id="utsidan">utsidan	<!-- Sidhuvud -->	<div id="sidhuvud">sidhuvud	</div>	<!-- ###### på Sidhuvud -->	<!-- Knapprad -->	<div id="knapprad">		<script type='text/javascript'>function Go(){return}</script> 		<script type='text/javascript' src='css/RelativePositioned_var.js'></script>		<script type='text/javascript' src='css/menu132_compact.js'></script>	</div>	<!-- ###### på Knapprad -->	<!-- Kolumncontainer -->	<div id="kolumncontainer">kolumncontainer				<!-- Kolumn 1 -->		<div id="kolumn1">						<!-- Grå box -->			<div id="grabox">			<h1>Gråbox:</h1> text i Gråbox.			</div>			<!-- ###### på Gråbox -->		texten i Kolumn1.		</div>		<!-- ###### på Kolumn 1 -->				<!-- Kolumn 2 -->		<div id="kolumn2">			<h2>Kolumn2:</h2> text i Kolumn2.			<!-- Vitbox -->			<div id="vitbox">				<h2>Vitbox:</h2>text i Vitbox.				<!-- Textcontainer -->				<div id="textcontainer">						<div id="textbox1">Detta är texten i vänster kolumnen. Detta är texten i vänster kolumnen. Detta är texten i vänster kolumnen. Detta är texten i vänster kolumnen. Detta är texten i vänster kolumnen. Detta är texten i vänster kolumnen. 					</div>					<div id="textbox2">Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. Detta är texten i höger kolumnen. 					</div>				</div>				<!-- ###### på Textcontainer -->							</div>			<!-- ###### på Vitbox -->						<br />						<!-- Rödbox -->			<div id="rodbox">				<h2>Rödbox:</h2> text i Rödbox.			</div>			<!-- ###### på Rödbox -->					</div>		<!-- ###### på Kolumn 2 -->	</div>	<!-- ###### på Kolumncontainer -->		<!-- Sidfot -->	<div id="sidfot">sidfot	</div>	<!-- ###### på Sidfot -->	</div><!-- ###### på textområde --></body></html>

Grateful for all the help I can get.

Sign In

Sitelayout and positioning wrong in Firefox

Recommended Posts

Guest fonsab

Link to comment

Share on other sites

Archived

Browse

Activity