html / css help - ie vs firefox

Associate
Joined
4 Apr 2003
Posts
1,821
Location
Manchester
Help a noob out.

I am struggling trying to get my page to render correctly in FF

Any help would be greatly appreciated and any comments on tidying the code up would be nice too

link to page
i.e.

ie.jpg


FF

firefox.jpg


css

Code:
body {
  margin: 0px;
  padding: 0px;
  height: 100px
}

#holder {
  float:left;
  overflow:hidden;
}





#headerleft {
  background: #FFFFFF; 
  float: left;
  width:223px;
} 

#headercenter {
  background: #FFFFFF;
  color:808080;
  float: left;
  width:80%;
  Text-align: center;
  font: arial,sans-serif;
  font-size: 60%;

}


#leftcol {
  background: #84C25C;
  float: left;
  width: 223px;
  color: #FFFFFF;
  font: arial,sans-serif;
  padding: 10px;
  font-size: 15px;
  padding-bottom:9000px;
  margin-bottom:-9000px;
}


  #leftcol a:link	{ color:#FFFFFF; text-decoration:none }
  #leftcol a:visited { color:#FFFFFF; text-decoration:none }
  #leftcol a:hover { color:#FFFFFF; text-decoration:underline }


#rightcol {
  background: #13B2DC;
  float: right;
  width: 223%;
  height: 600px;
  color: #FFFFFF;
  font: arial,sans-serif;
  padding: 10px;
  font-size: 15px;
}

#content {
  background: #fff;
  float: left;
  width: 60%;
  height: 100%;
  font: arial,sans-serif;
  padding: 10px;
  color:808080; 
  font-size: 15px;
  text-align: justify;	
}

  #content a:link	{ color:#808080; text-decoration:none }
  #content a:visited { color:#808080; text-decoration:none }
  #content a:hover { color:#808080; text-decoration:underline }

#content1 {
  background: #fff;
  float: left;
  width: 19%;
  height:100%
  font: arial,sans-serif;
  padding: 10px;
  padding-top: 0px;
  color:808080;	
  font-size: 15px;
  padding-bottom:9000px;
  margin-bottom:-9000px;
}


  #content1 a:link	{ color:#808080; text-decoration:none }
  #content1 a:visited { color:#808080; text-decoration:none }
  #content1 a:hover { color:#808080; text-decoration:underline }

#content2 {
  background: #fff;
  float: left;
  width: 40%;
  height:100%
  font: arial,sans-serif;
  padding: 10px;
  color:808080;
  font-size: 15px;
  padding-top: 0px;
  padding-bottom:9000px;
  margin-bottom:-9000px;	
}


#contentc {
  background: #fff;
  float: left;
  width: 60%;
  height: 100%;
  font: arial,sans-serif;
  padding: 10px;
  color:808080; 
  font-size: 15px;
  text-align: centre;
  padding-top: 0px;
  padding-bottom:9000px;
  margin-bottom:-9000px;	
}

#footer {
  background: #13B2DC;
  clear: both;
  height: 1px;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px; 
  text-align: center;
  font-size: 5px;
}
h2{
text-align: center;
}

html

Code:
<html>
<head>
<title>UK Forms</title>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


<body>


<p>
<div id="headerleft"><img src="logo.gif" alt="Big Boat" />
</div>

<div id="Headercenter">
</br>
<h1>UK Forms<h1>
</div>

</p>

<div id="footer">
</div>

<div id="holder">

<div id="leftcol">
<a href="main.htm">Home</a></br>
<a href="policies.htm">Policies</a></br>
<a href="UK Manual\INTEGRATED BUSINESS SYSTEMS MANUAL final draft _3_.pdf">Manual</a></br>
<a href="Certificates.htm">Certificates</a></br>
<a href="Management Review\2011\European Quality Management Review Sept 11 - 9001.pdf">Management review</a></br>
<a href="UK Procedures.htm">UK Procedures</a></br>
<a href="UK Forms.htm">UK Forms</a></br>
<a href="local manuals.htm">Site Documents</a></br>
</div>




<div id="content1">

<a href="UK Forms\UK-0001A - Safety Eyewear Vouchers - Requisition form.doc">UK-0001A</a></br>
<a href="UK Forms\UK-0002A - DSE Vouchers - Requisition form.doc">UK-0002A</a></br>
<a href="UK Forms\UK-0002B - Specsavers vouchers - Distribution List.xls">UK-0002B</a></br>
<a href="UK Forms\UK-2025A Supplier Questionnaire v2.doc">UK-2025A</a></br>
<a href="UK Forms\UK-2025B Supplier Continual Evaluation Questionnaire v2.xlsx">UK-2025B</a></br>
<a href="UK Forms\J-Sox Physical Inventory Tag Certification (UK-LOG-0001a).pdf">UK-LOG-0001a</a></br>
<a href="UK Forms\J-Sox Physical Inventory Control Certification (UK-LOG-0001b).pdf">UK-LOG-0001b</a></br>
<a href="UK Forms\Stocktake Screen Dump File (UK-LOG-0001c).ppt">UK-LOG-0001c</a></br>
<a href="UK Forms\Stocktake Variance Log (UK-LOG-0001d).xls">UK-LOG-0001d</a></br>
<a href="UK Forms\UK-QA-3003B Internal audit summary report.doc">UK-QA-3003B</a></br>
<a href="UK Forms\UK-QA-3003C Nonconformance Report Form.doc">UK-QA-3003C</a></br>
<a href="UK Forms\UK-QA-3003D Audit Checklist.doc">UK-QA-3003D</a></br>
<a href="UK Forms\UK-QA-3003E Audit Evidence & Note Sheet.doc">UK-QA-3003E</a></br>






</div>

<div id="content2">


Safety Eyewear Vouchers - Requisition form.doc</br>
DSE Vouchers - Requisition form.doc</br>
Specsavers vouchers - Distribution List.xls</br>
Supplier Questionnaire v2.doc</br>
Supplier Continual Evaluation Questionnaire v2.xlsx</br>
J-Sox Physical Inventory Tag Certification.pdf </br>
J-Sox Physical Inventory Control Certification.pdf</br>
Stocktake Screen Dump File.ppt</br>
Stocktake Variance Log.xls</br>
Internal audit summary report.doc</br>
Nonconformance Report Form.doc</br>
Audit Checklist.doc</br>
Audit Evidence & Note Sheet.doc</br>


</div>
</div>

<div id="footer">
</div>


</html>
 
Indeed mate. It is just an accident it works in ie and not ft. If the theory of nesting the divs to get then the same size ok for ff?
 
Back
Top Bottom