• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

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
0
Luey
Asked:
Luey
  • 4
  • 2
1 Solution
 
jonahzonaCommented:
Is the site live? Is a link possible?
0
 
LueyAuthor Commented:
0
 
chrisdunn_6Commented:
just add this to your header <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jonahzonaCommented:
Remove the text-align: center from the BODY element
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now