IE6 & IE7 issues with category product listing and footer display.

[SidFeyDesigns]

For some reason my category product list is only displaying 1 product per row but only in IE6 and 7. It works in all other browsers. will post the html and css below.

Also we just implemented two floating divs at the top and bottom of the screen. They are supposed to stay in fixed positions and be centered. for some reason the bottom bar is floated right in IE6 and 7. i'll post the html and css for that below too.


Category product List HTML:

<div id="product-listing">
	<mvt:foreach iterator="product" array="products">
		<mvt:if expr="(pos1 MOD 4) EQ 1">
			<div class="product-wrapper first">
		<mvt:else>
			<div class="product-wrapper">
		</mvt:if>
			<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
			<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:IAT">
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="&mvte:product:imagetypes:main;" alt="&mvt:product:customfield_values:customfields:IAT;" title="&mvte:product:name;" height="150" width="150">
			<mvt:else>
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" height="150" width="150">
			</mvt:if>
			<mvt:elseif expr="NOT ISNULL l.settings:product:thumbnail">
			<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:IAT">
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="&mvte:product:thumbnail;" alt="&mvt:product:customfield_values:customfields:IAT;" title="&mvte:product:name;" height="150" width="150">
			<mvt:else>
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="&mvte:product:thumbnail;" alt="&mvte:product:name;" title="&mvte:product:name;" height="150" width="150">
			</mvt:if>
			<mvt:else>
			<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:IAT">
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="../graphics/img_no_thumb.jpg" alt="&mvt:product:customfield_values:customfields:IAT;" title="&mvte:product:name;" height="150" width="150">
			<mvt:else>
				<a href="http://www.loveisarose.com/&mvta:product:code;.html" class="button" title="&mvte:product:name;"><img src="../graphics/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" height="150" width="150">
			</mvt:if>
			</mvt:if>
			<br>
			See Product Details</a>
			<a href="http://www.loveisarose.com/&mvta:product:code;.html">&mvt:product:name;</a><br>
			<b>Code: &mvt:product:code;</b><br>
			<mvt:if expr="l.settings:product:cost GT l.settings:product:price">
			Reg. Price: <strike>&mvt:product:formatted_cost;</strike> <br>
			<font color="ff0000"><b>Sale Price: &mvt:product:formatted_price;</b></font>
			<mvt:else>
			<b>Price: &mvt:product:formatted_price;</b>
			</mvt:if>
			<mvt:if expr="l.settings:product:inv_active">
			</mvt:if>
		</div>
	</mvt:foreach>
</div>
<mvt:if expr="g.Offset OR g.NextOffset">
<br>
<table border="0" width="90%" align="center">
<tr>
<mvt:if expr="g.Offset EQ 0">
<td>&nbsp;</td>
<mvt:else>
<td align="left">
<mvt:item name="fonts" param="body_font">
<form method="post" action="&mvt:global:sessionurl;">
<input type="hidden" name="Screen" value="&mvte:global:Screen;">
<input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;">
<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;">
<input type="hidden" name="Search" value="&mvte:global:Search;">
<input type="hidden" name="Offset" value="&mvte:global:PrevOffset;">
<mvt:item name="buttons" param="Previous" />
</form>
</mvt:item>
</td>
</mvt:if>
<mvt:if expr="g.NextOffset EQ 0">
<td>&nbsp;</td>
<mvt:else>
<td align="right">
<mvt:item name="fonts" param="body_font">
<form method="post" action="&mvt:global:sessionurl;" rel="next">
<input type="hidden" name="Screen" value="&mvte:global:Screen;">
<input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;">
<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;">
<input type="hidden" name="Search" value="&mvte:global:Search;">
<input type="hidden" name="Offset" value="&mvte:global:NextOffset;">
<mvt:item name="buttons" param="Next" />
</form>
</mvt:item>
</td>
</mvt:if>
</tr>
</table>
</mvt:if>

Category Product List CSS:
(includes css for subcat listing which is displayed the same way. Find product listing under sub-cat listing)

/* ------------------------ CTGY PAGE ------------------------ */


.subcat-header {
	color: #ba2822;
	border-bottom:4px groove #bdb3a0;
	margin: 0px 6px 10px 6px;
	padding: 2px 5px;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}


#subcategory-listing {
	overflow: hidden;
	clear: both;
	text-align: center;
}


.subcategory-wrapper {
	width: 150px;
	background: #fff;
	margin: 0 0 16px 16px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}


.ie7 .subcategory-wrapper { display: inline; }


.ie6 .subcategory-wrapper {
	display: inline;
	height: 225px;
}


.subcategory-wrapper.first { margin-left: 0; }


.subcategory-wrapper img {
	max-width: 150px;
}


.ie6 .subcategory-wrapper img { width: 150px; }


#subcategory-listing .subcategory-wrapper-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 3px 0 7px;
	display: block;
}


.subcategory-wrapper-name a {
	color: #000;
	text-decoration: none;
}


#subcategory-listing .subcategory-wrapper p { margin: 0; }


.subcategory-wrapper form { padding: 5px 0 0; }


.subcategory-wrapper input { cursor: pointer; }


.subcategory-wrapper .button {
	display: block;
	margin: 0;
}


/* ------------------------ product listing ------------------------ */


#product-listing {
	overflow: hidden;
	clear: both;
	text-align: center;
}


.product-wrapper {
	width: 150px;
	background: #fff;
	margin: 0 0 26px 26px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}


.ie7 .product-wrapper { display: inline; }


.ie6 .product-wrapper {
	display: inline;
	height: 225px;
}


.product-wrapper.first { margin-left: 6px; }


.product-wrapper img {
	max-width: 150px;
}


.ie6 .product-wrapper img { width: 150px; }


#product-listing .product-wrapper-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 3px 0 7px;
	display: block;
}


#product-listing .product-wrapper p { margin: 0; }


.product-wrapper form { padding: 5px 0 0; }


.product-wrapper input { cursor: pointer; }


.product-wrapper .button {
	display: block;
	margin: 0;
}

Next is The HTML for the fixed bar at the bottom of the page:
(same basic code as the top bar)

        <div id="copyright-wrap">
            <div id="copyright">
		<ul>
			<li>Share this page on your favorite social network.</li>
			<li style="padding-top:2px;"><div class="fb-like" id="fb" data-href="www.loveisarose.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div></li>
			<li style="padding-top:2px;"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a></li>
			<!-- Place this tag where you want the widget to render. -->
			<li style="padding-top:2px;"><div class="g-plusone" data-size="medium"></div></li>
			<li>&copy; 2013 Sid Fey Designs, Inc.</li>
		</ul>
	    </div>
        </div>
<script type="text/javascript">
var sUrl = window.location;
document.getElementById('fb').setAttribute('href', sUrl);
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Finally is The CSS for the fixed bar at the bottom of the page:
(same basic code as the top bar)

/* ------------------------------- Copyright ------------------------------- */


#copyright-wrap {
	display: block;
	height: 24px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: fixed;
	bottom: 0;
	z-index: 99;
	background-color: #ccc;
}


#copyright {
	display: block;
	height: 24px;
	width: 980px;
	margin: 0 auto;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 24px;
	color: #000;
	background-color: #ccc;
}


	#copyright ul {
		margin: 0;
		padding: 0 auto;
	}
	
	#copyright li, #copyright a {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10pt;
		color: #000;
		height: 24px; /* change height here also */
		display: inline-block;
		line-height: 24px;
	}


	#copyright a {
		padding: 0 4px;
		color: #0000ff;
	}
	
	#copyright a:hover {
		color: #ff0000;
	}


	#copyright li {
		float: left;
		list-style: none;
		display: inline-block;
		padding: 0 4px;
	}

Thank you ahead of time for any help provided. It's very appreciated.

[nottheusual1]

Re: IE6 & IE7 issues with category product listing and footer display.

Good or bad, we've given up on supporting anything less than IE8. Our user agent stats are actually crueler than this:

http://www.w3schools.com/browsers/browsers_explorer.asp