site messed up in firefox

Keewee6 · 03-06-2011 10:48am #1

http://www.bailieborough.com/mcbtanks/ is built using divs and css its crazy in firefox

html code
<html>
<head>
<title>Fuel Storage Tanks - MCB Tanks - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="mcbtanks.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" leftmargin="0">

<div id="header">
<img src="images/mcbtanks_logo.jpg" align="right">
</div>
<div id="slideshow">
</div>
<div id="greenline">
green line
</div>
<div id="date">Todays' Date is:
<script language="JavaScript" type="text/JavaScript">
var now = new Date();
var days = new Array("Sunday", "Monday", "Tuesday" , "Wednesday", "Thursday" , "Friday", "Saturday" , "Sunday");
var months = new Array("January", "February", "March", "April" ,"May" ,"June", "July", "August", "September", "October", "November", "December");
var now = new Date();
var yy = now.getYear();
if (yy < 2000) yy += 1900;
var mm = now.getMonth();
mm = months[mm];
var dd = now.getDate();
var dy = now.getDay();
dy = days[dy];
document.write( dy +" "+ mm +" "+ dd +" "+ yy );
</script>
</div>
<div id="menusystem">
<a href="#">menu system</a><br>

<a href="#">menu system</a><br>

<a href="#">menu system</a><br>
<a href="#">menu system</a><br>
<a href="#">menu system</a><br>
<a href="#">menu system</a><br>
<a href="#">menu system</a><br>

</div>
<div id="content"> <img src="images/testpic.jpg" id="picone">Whatt is Lorem
Ipsum?Lorem Ipsum is simply dummy text of. the printing andtypesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. Why do we use it?It is a long established fact that
a reader will be distracted by the readable content of a page when looking
at its layout. lways free from repetition, injected humour, or non-characteristic
words etc. its layout. lways free from repetition, injected humour, or non-characteristic
words etc. its layout. lways free from repetition, injected humour, or non-characteristic
words etc. its layout. lways free from repetition, injected humour, or non-characteristic
words etc. its layout. lways free from repetition, injected. <br>
<br>
m has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it
to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?It is
a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. lways free from
repetition, injected humour, or non-characteristic words etc. its layout. lways free from
repetition, injected humour, or non-characteristic words etc. its layout. lways free from
repetition, injected humour, or non-characteristic words etc. its layout. lways free from
repetition, injected humour, or non-characteristic words etc. its layout. lways free from
repetition, injected
</div>
<div id="footer"><a href="http://www.bailieborough.com/webdesign" target="_blank">Developed By Bailieborough ICT Web Design</a></div>

</body>
</html>

css

/**MCB Tanks Stylesheet**/
body
{
margin-top: 0px;
background-color: #006633;
color:black;
font-family: arial;
font-size:13px;
max-width:100%;
max-height:100%;
margin-bottom: 0px;
}
#header
{
background-color: #ffff33;
float:right;
padding-bottom: 30px;
}

#content
{
background-color: #006633;
float:left;
text-align:justify;
color:white;
font-family: arial;
margin-right:10px;
}
#menusystem
{
margin-top: 10px;
float:left;
width:10%;
margin-bottom: 10px;
height:100px;
}
#footer
{
bottom:0;
clear:both;
}

{
text-decoration:none;
color:blue;
}
#picone
{
float:left;
margin-top: 10px;
margin-right: 12px;
margin-bottom:17px;

border-style:double;

}

#pictwo
{
float:right;
margin-top: 1px;
margin-left: 9px;
margin-bottom:17px;
border-style:double;
}
#date
{
text-align:right;
font-weight: bold;
color:white;
margin-bottom:17px;

margin-right: 12px;
}
#gallery
{
margin-top: 15px;
float:left;
text-align:justify;
}
a
{
color:yellow;
text-decoration:none;
}

#circimg
{
float:left;
}
#slideshow
{

margin-left:10px;
}
#footer
{
text-align:right;
font-weight: bold;
color:white;
margin-bottom:17px;

margin-right: 12px;
}

murphaph · 03-06-2011 3:40pm

#content has no width. It's a <p> which is a block element, therefore not specifying a width will cause it to take up 100% of the width of its containing element.

Looks like FF is handling this correctly and IE8 (the only one I checked) is not. Set a width on #content to 85% or whatever and it floats nicely beside your menu.

site messed up in firefox

Comments