SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer not displaying correctly in IE8

    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:

    PHP 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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi col_b, welcome to SitePoint!

    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. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi col_b, welcome to SitePoint!

    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.
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by col_b View Post
    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
    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. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •