CSS Issue in Firefox

TheScreenSaver24 · #1 (**permalink**) 01-12-07, 10:22 PM

The background automatically repeats in IE, but in firefox it doesn't can somebody help. http://comwareservices.com/chuck/index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index</title>
<style type="text/css">
A {text-decoration: none; color: black}
A:link {text-decoration: none; color: black}
A:visited {text-decoration: none; color: black}
A:active {text-decoration: none; color: black}
A:hover {text-decoration: none; color: black}


td.pixel {



  border:1px solid #004a80;



}
 INPUT {
background-color: #003663;
color: white;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 10pt;
border-style:solid;
border-width:1px;
border-color:black; 
}
 SELECT {
background-color: #003663;
color: white;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 10pt;
border-style:solid;
border-width:1px;
border-color:black; 
}
 TEXTAREA {
background-color: #003663;
color: white;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 10pt;
border-style:solid;
border-width:1px;
border-color:black; 
}
/* End Of Default CSS */

/* Layout CSS */
html,body {
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size: small;
color:#333333;
}
#container {
	margin: 0 auto;
	text-align: left;
	width:769px;
}
#top {
	width:769px;
	height:98px;
	background:url(images/top.png) no-repeat;
}
#middle {
	width:769px;
	background:url(images/middle.png);
}
#bottom {
	width:769px;
	height:28px;
	background:url(images/bottom.png) no-repeat;
	clear: both;
}
#content {
	width:750px;
	padding-left:20px;
	margin: 0 auto;
}
#leftcolumn {
	margin: 5px 5px 0px 5px;
	padding: 4px;
	width: 46%;
	float: left;
	border: 1px solid #ccc;
	background-color: #DAC8BF;
	}
* html #leftcolumn {height:370px} /* IE Min-Height Hack */ 

#centercolumn {
	border: 1px solid #ccc;
	margin: 5px 0px 0px 0px;
	padding: 4px;
	width: 46%;
	float: left;
	}
* html #centercolumn {height:370px} /* IE Min-Height Hack */ 
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="middle">
	<div id="content">
	<div id="leftcolumn">Left Column
	</div>
	<div id="centercolumn">Right Column
	</div>
	</div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>

Vicious · #2 (**permalink**) 01-13-07, 03:05 AM

How about:

Code:

#middle {
	width:769px;
	background:url(images/middle.png) repeat-y;
}

TheScreenSaver24 · #3 (**permalink**) 01-13-07, 10:31 PM

it doesn't do anything.

Vicious · #4 (**permalink**) 01-14-07, 05:04 AM

You have made your left & rightcolumn a float:left.

Apparently, in IE, the height of the container of these div's is stretched so it is wrapped around the two columns.

In FF, the container is not stretched, because "logically", these two columns are floating on top of them.

So you will have to make some changes. Get rid of the "float:left", and try something with "position:absolute".