No replies
gorillaparacord
Offline
newbie
Last seen: 7 years 47 weeks ago
Timezone: GMT-5
Joined: 2012-03-02
Posts: 3
Points: 5

Hello,

Hoping that someone can solve this puzzle, as we are so frustrated with this. The problem can be seen here in Internet Explorer:

http://www.gorillaparacord.com/550-Paracord-Mil-Spec-Type-III-7-Strand_p_8.html

The issue seems to be coming from the facebook social comments plugin when the comments are dynamically loaded after the page loads. The bottom footer container div does not take to the height of the container div after the page is loaded.

here is the css:

html, body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, Sans Serif;
	height: 100%;
}
 
#wrapper {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width: 100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}
 
#headerwrapper {
	width: 100%;
	height:115px;
	text-align: center;
	background-image:url('https://imagehost.vendio.com/a/35127270/view/acu-background.gif');
	background-color: #e1e1d8;
	background-repeat:repeat-x;
 
}
 
#navbar {
	width: 100%;
	height: 39px;
	background-image:url('https://imagehost.vendio.com/a/35127270/view/navbar-bg.gif');
	background-repeat:repeat-x;
	text-align: center;
	background-color: #000000;
}
 
#navbarwrapper {
	width: 1000px;
	height: 39px;
	display: inline-block;
	text-align: left;
}
 
#contentwrapper {
	height: auto;
	width: 100%;
	text-align: center;
	padding-bottom:400px; /* bottom padding for footer 163px */
	overflow: auto;
}
 
#content {
	height: auto;
	width: 1000px;
	min-height: 100%;
	display: inline-block;
	text-align: left;
}
 
#footerwrapper {
	position:absolute;
	width:100%;
	bottom:0;
	height:163px;
	text-align: center;
	background-image:url('https://imagehost.vendio.com/a/35127270/view/acu-bottom-bg.gif');
	background-color: #e1e1d8;
	background-repeat:repeat-x;
}
 
#footer {
	width: 1000px;
	height: 163px;
	display: inline-block;
	text-align: left;
}

and the html:

	<div id="wrapper">
			<div id="headerwrapper">
				<div id="header">
				</div>
			</div>
 
			<div id="navbar">
				<div id="navbarwrapper">
				</div>
			</div>
 
			<div id="contentwrapper">
				<div id="content">
			        </div>
 
			<div id="footerwrapper">
			</div>
                 </div>

Thank you for the help in advance!