Problems with Footer in IE7

Free WordPress Themes

Wordpress and Webdesign Forum go41 » WordPress Code Snippets

1. 

   adamwork
   Member

   Hi all

   This is my code in the php - footer:

   <div id="footer-container">

   <div id="footer">

   <div id="front-popular" class="clearfloat">

   <div id="recentpost" class="clearfloat">
   <h3>Stay in touch</h3>

   • » Contact us
   • » RSS feeds
   • » Email alerts

   </div>

   <div id="mostcommented" class="clearfloat">
   <h3>Useful links</h3>

   • » Link 1
   • » Link 2
   • » Link 3

   </div>

   <div class="fineprint-left">
   

   ---

   
   <p>© 2010 Copyright | Terms | Privacy Policy</p>
   </div>
   </div>
   </div>
   </div>

   <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->

   </body>
</html>

   These are the following styles:

   #footer-container{
margin: 0 auto;
background:url('http://www.link.com/blog/wp-content/themes/arthemia/images/footerbck.gif') repeat top left;
border-top: solid 3px #c8c8c8;}

   #footer{
   width: 984px;
   margin: 0 auto;
   overflow: hidden;
   padding: 22px 0 20px 0;}

   #footer .fineprint-left{
   float: left;
   font-size: 10px;
   padding: 0;
   width:968px;
   }

   #footer .fineprint-left p {
   font:Arial, Helvetica, sans-serif;
   font-size:10px;
   color:#333;}

   .category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
   margin:0;
   font-weight:bold;
   font-size:1.5em;
   letter-spacing:-0.05em;
   color: #999;
   }

   #front-popular h3 {
   color:# 000;
   font:Arial, Helvetica, sans-serif;
   font-size:14px;
   }

   #recentpost {
   width:200px;
   float:left;
   padding:10px;
   display:block;
   }

   #mostcommented {
width:700px;
float:left;
padding:10px;
display:block;
margin-left:17px;
}

   Everything displays fine, in all the browsers expect IE7.

   In IE7, the horizontal line is underneath the headers of my two columns in the footer, the copyright etc is then floated over the content in the two columns. Any advice much appreciated...

   Posted 1 year ago #
2. 

   Joern
   Moderator

   hard to say without seeing it live..

   but why you use float left for the fineprint? It should align left without a float. And instead of hr (horizontal line) I would use border-top in css
   A horizontal ruler looks in different browsers different if you do not style it in css like this sample:

   hr{
   background-color: #000;
   color: #000;
   border: 0;
   height: 1px;
   }

   I see only a line in this forum, but a horizontal ruler has to be written like this:
   

   <hr />

   not just
   

   <hr />

   guessed enough, hope it helps

   Posted 1 year ago #
3. 

   frmo82
   Member

   Try my best I want to help. Although it is hard, you can follow it.

   hr{
   background-color: #000;
   color: #000;
   border: 0;
   height: 1px;
   wight : 3px
   Lenth :6PX

   }

   #footer-container{
   margin: 0 auto;
   background:url('http://www.link.com/blog/wp-content/themes/arthemia/images/footerbck.gif') repeat top left;
   border-top: solid 3px #c8c8c8;}

   web design sydney

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.