problem with firefox? IE ok!

**Fiska** · Sep 30, 2004 06:27

Hi,
I'm currenty working on the top part of the site, and naturally doing it with CSS (means no tables used)!
The problem is with display, Ie is showing it as it is ment, but firefox is not doing so.
So I've got a <div id = border>, everything that goes inside this div should have been sourronded with borders 4 sides. IE is doing well and inner elements are being bordered, while firefox not, can anyone help?
HTML

HTML Code:

<body>
	<!-- border of the page, container of everything -->
	<div id="border">
	   <div id="topslice"></div>
	   <div class="head"></div>
	   <div class="lfthead"></div>
	</div>
	<!-- end of the border-->
</body>

CSS code:

Code:

#border {
	width: 647px;
	border : solid #000 1px;
	margin: 0;
	padding: 0;
	height: 100%;
}
#topslice {
	background-color: #DDD6C6;
	height: 5px;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #000;
}
.head {
	width: 497px;
	background-color: #FFCC00;
	height: 21px;
	border-top: solid #000 1px;
	border-bottom: solid #000 1px;
	border-right: solid #000 1px;
	float: left;
	color: #000;
}
.lfthead {
	width: 149px;
	height: 21px;
	background-color: #FFCC00;
	border-top: solid #000 1px;
	border-bottom: solid #000 1px;
	float: right;
	color: #000;
}

**Paul O'B** · Sep 30, 2004 07:05

Hi,

You need to clear the floats otherwise they take up no space in the container.

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#border {
 width: 647px;
 border : solid #000 1px;
 margin: 0;
 padding: 0;
 height: 100%;
}
#topslice {
 background-color: #DDD6C6;
 height: 5px;
 width: 100%;
 margin: 0;
 padding: 0;
 color: #000;
}
.head {
 width: 497px;
 background-color: #FFCC00;
 height: 21px;
 border-top: solid #000 1px;
 border-bottom: solid #000 1px;
 border-right: solid #000 1px;
 float: left;
 color: #000;
}
.lfthead {
 width: 149px;
 height: 21px;
 background-color: #FFCC00;
 border-top: solid #000 1px;
 border-bottom: solid #000 1px;
 float: right;
 color: #000;
}
.clearer{
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
}
</style>
</head>
<body>
<body>
 <!-- border of the page, container of everything -->
 <div id="border">
	<div id="topslice"></div>
	<div class="head"></div>
	<div class="lfthead"></div>
 <div class="clearer"></div>
 </div>
 <!-- end of the border-->
</body>
</body>
</html>

Paul