Help with footer

Search for clearfix on google. But make sure you get an IE7 compatible version as the original one isn't.

Basically it's because IE is treating floats incorrectly so Firefox is actually displaying it right.
 
You should at least validate your stuff first.

#footer_left {
clear:both
float: left;
color: #000;

}

missing ; after both.


#footer_left ul li a {
color: #000;
display: inline;
text-decoration: unerline;
padding: 0;
margin: 0 5px 0 0;

}

unerline? :P

Haven't looked at the rest, but validate first.
 
hehe, soz for not checking your style sheet first but hopefully you'll fix the error if you go through it yourself and fix the mistakes :)
 
Tried the clearfix but with no joy.

Tidied up my code (ignore messy table just a temp thing!) and still nothing.

Code: 
<body>
<div id="pagewidth">
<div id="topbar"></div>
<img src="images/topimage1.jpg" alt="#" />

<table>
<tr>
<td>
<div id="box">
<h2>.LISTEN</h2>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td>
<td>
<div id="box2">
<h2>.WATCH</h2>
<div class="boxcontent2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td>
<td>
<div id="box3">
<h2>.READ</h2>
<div class="boxcontent3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td></tr></table>

<div id="footer">
<ul>
	<li><a href="index.php">home</a></li>//
	<li><a href="#">about</a></li>//
	<li><a href="#">listen</a></li>//
	<li><a href="#">watch</a></li>//
	<li><a href="#">read</a></li>//
	<li><a href="#">contact</a></li>//
	<li><a href="#">links</a></li>//
	<li><a href="#">forum</a></li>	//	
</ul>
</div><!-- // end footer -->
</div><!--end pagewidth-->
</body>
</html>


Code: 
*{
   border:0;
   margin: 0;
   padding: 0;
}
p {padding-top: 4px; padding-bottom: 8px;}

body { 	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 0.7em; 
	background-image: url(images/bg.gif);
	background-repeat:repeat;
	color:#FFF;
}
#pagewidth {
	width: 758px;
	height: 100%;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	border: solid 2px #FFF;
	background-color: #FFF;
}
#topbar {width:758px;
         height:80px;}
		 
#image {width:758px;
        height:400px;
}		 
#box {
    width: 250px;
	height: 200px;
}
#box h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px; 
	background-color: #ff9900;
}
.boxcontent {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #ffcb6f;
}
#box2 {
    width: 250px;
	height: 200px;
}
#box2 h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px;
	background-color: #00b42a;
}
.boxcontent2 {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #3cd758;
}
#box3 {
    width: 250px;
	height: 200px;
}
#box3 h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px; 
	background-color: #00baff;
}
.boxcontent3 {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #83d2f1;
}
#footer{
	clear:both;
	width: 750px;
	padding-left:5px;
	padding-right:5px;
	color:#000;
	height: 25px;
	font-size: 10px;
	margin-top: 5px;
}
#footer a {
	color:#000;
	text-decoration: none;
	border: none;
}
#footer a:hover {
	color:#000;
	text-decoration: underline;
	border: none;
}
#footer ul {
	color: #000;
	display: inline;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#footer ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
#footer ul li a {
	color: #000;
	display: inline;
	padding: 0;
	margin: 0 5px 0 0;
}


http://dzireonline.co.uk/new/
http://dzireonline.co.uk/new/screen.css
 
set a background colour to your footer of #fff and see how it pads out, see in firefox and ie how much space it's taking up, but that may just fix it like that. :)
 
If you look now you can see on FF that the footer strip cuts across the 3 boxes at the bottom, it dosen't "push down" underneath them. :confused:
 
Would really appreciate it if someone could give me a hand with this. Can't move on until i've got this sorted.

I've noticed that even with the footer removed the whole container div dosen't extend to the bottom of the page on FF. Fine on IE though.

Any help would be really appreciated.

Cheers.
 
You must log in or register to reply here.
Back
Top Bottom