Footer not displaying correctly in IE8

HTML & CSS
1

Hi,

I really can’t figure out what it is I’m missing here.

Footer is displaying fine in FF3, Opera 10.10, Safari 4.0.4, Chrome 4.0, but columns are off in IE8.

All columns are nicely left aligned in everything but IE8. They look right aligned in in IE8.

I’ve put text-align:left; everywhere, but it doesn’t make a difference!

Any help greatly appreciated.

Col

Here’s the code:


<style type="text/css"> 
#footer {
 	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:left;
}

.containerfooter {   /*class: can be used multiple times*/
    width:960px;  
    margin: 0 auto;
	text-align:left;
}

.footer_column_one {
	float:left;
	min-width:135px;
	width:auto;
	margin:left;
    padding-left:30px;
	padding-bottom:0px;
	padding-top:10px;
	text-align:left;
	
	/*border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;*/	
}  

#footer .long {  
    width:95px;  
}  
 
.footer_column_three {
	width:950px;
	float:left;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
	
}  

.footer_column_one ul li a, .footer_column_one ul {
	list-style:none;
	/*margin:0px;*/
	padding:0px;
	text-decoration: none;
	color: #666666;
} 

#footer_column_three a {  
     text-decoration:none;  
     color:#716d6a;  
     font-family:Verdana, Arial, Helvetica, sans-serif;  
     font-size:10px;  
     font-weight:bold;  
     text-transform:uppercase;  
 }  

.footer_column_two ul li, .footer_column_two ul {  
    list-style:none;  
    margin:0px;  
    padding:0px; 
} 

#footer h3 {  
    color:#333333;  
    text-transform:uppercase;  
    font-size:10px;  
}  

</style>



<div id="footer">
<div class="containerfooter">

  <div class="footer_column_one">
   	<h3>Our Company</h3>
        	<ul>
            	<li><a href="<?php echo tep_href_link(FILENAME_ALL_ABOUT_US, ''); ?>">About Us</a></li>
        		<li><a href="<?php echo tep_href_link(FILENAME_CONTACT_US, ''); ?>">Contact Us</a></li>
        		<li><a href="<?php echo tep_href_link(FILENAME_FEEDBACK, ''); ?>">Feedback</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_PRIVACY, ''); ?>">Privacy Policy</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_CONDITIONS, ''); ?>">Terms and Conditions</a></li>
                  <!--Copyright <?php echo date('Y'); ?>&nbsp;&copy;&nbsp;<a href="<?php echo tep_href_link(FILENAME_DEFAULT, ''); ?>">**</a>-->
  
            </ul>
            <br />
    </div>
    <div class="footer_column_one">
    	<h3>Customer Information</h3>
        	<ul>
            	<li><a href="<?php echo tep_href_link(FILENAME_DELIVERY, ''); ?>">Delivery &amp; Returns</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_BABY_WEARING, ''); ?>">Baby Wearing</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_WOOLLY_MATTERS, ''); ?>">Natural Fibres</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_NATURAL_ORGANIC_SKINCARE, ''); ?>">Natural Organic Skincare</a></li>
            </ul>
            <br />
            
            
    </div>
    <div class="footer_column_one">
    	<h3>Shop</h3>
   	  <ul>
            	<li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=22' . $listing['products_id']); ?>">Natural Skincare</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=21' . $listing['products_id']); ?>">Baby Wearing</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=44' . $listing['products_id']); ?>">Organic Bedding</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, 'cPath=44' . $listing['products_id']); ?>">Organic Baby Clothing</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, 'cPath=85' . $listing['products_id']); ?>">Maternity</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, 'cPath=37' . $listing['products_id']); ?>">Organic Sheepskins</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, 'cPath=35' . $listing['products_id']); ?>">Toys</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, 'cPath=43' . $listing['products_id']); ?>">Home</a></li>
      </ul>
      <br />
    </div>
    <div class="footer_column_one">
    	<h3>Resources</h3>
   	  <ul>
            	<li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, ''); ?>">Gift Card </a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, ''); ?>">Gift Registry</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, ''); ?>">Customer Favourites</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, ''); ?>">As Seen In</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, ''); ?>">Refer A Friend</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, ''); ?>">Loyalty Scheme</a></li>
                <li><a href="<?php echo tep_href_link(FILENAME_DEAFULT, ''); ?>">Groups</a></li>
      </ul>
      <br /><br />    
    </div>
    <div class="footer_column_one" style="height:158px;">
   	  <h3>Join Us</h3>
        <?php echo tep_image(DIR_WS_IMAGES . 'FaceBook-icon.png'); ?>
        <?php echo tep_image(DIR_WS_IMAGES . 'Twitter-icon.png'); ?><br /><br />

    </div>
    <div class="footer_column_one long" style="height:158px; padding-left:0px;">
   	  <h3>&nbsp;</h3>
        <?php echo tep_image(DIR_WS_IMAGES . 'fairtrade40.png'); ?><br /><br />
        <?php echo tep_image(DIR_WS_IMAGES . 'soil40.png'); ?>      
    <br />
    </div>
    
<div class="footer_column_three">
  <?php echo tep_image(DIR_WS_IMAGES . 'ukcards.png'); ?>
	</div>
<div class="footer_column_three">
  Copyright&nbsp;&copy;&nbsp;<?php echo date('Y'); ?>&nbsp;<a href="<?php echo tep_href_link(FILENAME_DEFAULT, ''); ?>">**</a>&nbsp;&nbsp;Site Design by <a href="http:www.**.co.uk">**</a>
	</div>
</div>
</div>



<?php
  // Output the footer for Dynamenu for osCommerce
    echo $GLOBALS['dmfooter'];
?>
2

Hi col_b, welcome to SitePoint! :slight_smile:

At the moment, you code looks the same to me in firefox and IE8.

Could you describe more clearly what the problem is? Ideally, post a link by removing the http etc and leaving spaces in place of dots.

3

Thanks for the reply.

I can’t show the problem on a live server; this is all being tested on localhost.

So there are 6 columns: our compnay, customer info, shop, resources, join us, then some images on the right-most column.

So if we look at the first column, our company. In all browsers except IE8 the text below Our Compny is nicely left aligned below Our Company (About us through to Terms and Conditions).

However, in IE8 About us etc appears right aligned in relation to Our Company (although About Us thru to T’s & C’s are still left aligned relative to each other).

But you’re right: it looks ok in IE8 just running off the code above, which means it must be getting screwed up by some other css somewhere else (its an oscommerce store with a big stylesheet).

colin

4

Hmm, in that case there’s not much help we can offer, I suspect. Perhaps you should navigate to that section using the IE8 developer tools and find out what rules are applying to it. That should tell you what’s going on.

5

thanks for your help ralph.m. yes, it looks like the footer is ok as it stands on its own. there’s some css that sits above it that might be making things screwy.

thanks anyway!

6

Make sure you validate the code because you may have a missing closing tag that is allowing other styles to creep into the footer in error.

You could force the issue of course.


#footer ul,#footer li{text-align:left!important}

However I would only do that for testing because you still need to track down the real culprit.:slight_smile: