IE div question

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="https://www.facebook.com/pages/WebCahoot/211020935594657?sk=wall" target="_blank"><img 

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

height="32" border="0" /></a>
  </div>
  <div id="linked_in_icon">
  <a href="http://www.linkedin.com/company/2066407?trk=tyah" target="_blank"><img src="images/linkedin.png" alt="linked 

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

  <div id="face_like_box">    
  <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%

2Fwebcahoot.com&amp;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;" 

allowTransparency="true"></iframe>
  </div>

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

Open in new window

bar.JPG
LueyAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Remove the text-align: center from the BODY element
0
 
jonahzonaCommented:
Is the site live? Is a link possible?
0
 
LueyAuthor Commented:
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

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


0
 
jonahzonaCommented:
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.
0
 
jonahzonaCommented:
Here is a screenshot.

 SS
0
 
LueyAuthor Commented:
Kewl thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.