html / css help - ie vs firefox

ArchAnGeL · 10 Nov 2011 at 23:24

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.

FF

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>

3dcandy · 10 Nov 2011 at 23:33

I think you're going the wrong way about this, FF is far more reliable than IE for rendering pages. What I mean is, that get it to render correctly in FF and it will look ok is opera, safari etc. and then fix ie, not the other way around...

ArchAnGeL · 10 Nov 2011 at 23:37

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?

3dcandy · 10 Nov 2011 at 23:52

shouldn't really matter...ie is a law unto itself however, you can either make it look nice in ff and rest and screw ie, or serve a different stylesheet to ie users....or spend ages making it look close in all browsers...

GravyMonster · 11 Nov 2011 at 08:46

Add width: 100%; to your #holder class.

ArchAnGeL · 11 Nov 2011 at 15:41

Spunkey said:
Add width: 100%; to your #holder class.

thankyou mate. perfect

ArchAnGeL · 11 Nov 2011 at 19:39

Would you mind explaining why that worked so I know better

Tripnologist · 11 Nov 2011 at 21:00

ArchAnGeL said:
Would you mind explaining why that worked so I know better

By default, a div is a block level element with a width of 100%. However, things change once you add in a float.

What should happen when you don't specify a width on a floated div is that the div's width should be the same as the largest element inside of it, but sadly it doesn't quite work like that in the real word... as you've just found out.

Smashing Magazine has an rather in-depth article about floats, if you'd like to know more.

Phunky · 11 Nov 2011 at 23:36

Tripnologist said:
What should happen when you don't specify a width on a floated div is that the div's width should be the same as the largest element inside of it, but sadly it doesn't quite work like that in the real word... as you've just found out.

When you float a block element it becomes an inline element meaning that it will take the width/height defined or inherited from it's child elements.

I've not looked over the entire markup & css but it seems strange that your floating a containing element that is left aligned anyway.