IE div question

Posted on 2011-04-27
Last Modified: 2013-12-12
I am trying to put a bar across the bottom of my page that has a fixed position.
It works correctly in all browsers I have tested except IE7.   The social outer container is to create an infinite solid bar and the social container is to center up my content.
In IE7 there is margin to the left of social_outer_container  that should not be there.  

This is from the attached style sheet
#social_outer_container {
	position: fixed;
	bottom: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #4B3D1C;
	border-bottom-color: #4B3D1C;
	background-color: #E0D1A4;
	height: 50px;
	width: 100%;
#social_container {
	height: 50px;
	width: 890px;
	margin-right: auto;
	margin-left: auto;

My Code
<div id="social_outer_container">
<div id="social_container">

<div id="social_left">
  <div id="find_us_box">Find us on</div>
  <div id="face_book_icon">
  <a href="" target="_blank"><img 

src="images/facebook.png" width="32" height="32" alt="Facebook" border="0" /></a>
  <div id="twitter_icon">
  <a href="" target="_blank"><img src="images/twitter-2.png" alt="twitter" width="32" 

height="32" border="0" /></a>
  <div id="linked_in_icon">
  <a href="" target="_blank"><img src="images/linkedin.png" alt="linked 

in" width="32" height="32" border="0" /></a>

  <div id="face_like_box">    
  <iframe src=";layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&am

p;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" 


</div><!--end social_container -->  
</div><!--end social_outer_container -->

Open in new window

Question by:Luey
    LVL 13

    Expert Comment

    Is the site live? Is a link possible?

    Author Comment

    LVL 2

    Expert Comment

    just add this to your header <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    LVL 13

    Accepted Solution

    Remove the text-align: center from the BODY element
    LVL 13

    Expert Comment

    If you remove that property from the body selector, it should fix your issue.

    I ran a few tests and it didn't effect the styling in any other browser.

    It is on line 2 of the CSS.
    LVL 13

    Expert Comment

    Here is a screenshot.


    Author Closing Comment

    Kewl thanks!

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now