I'm attempting to align my "li" elements in a row so that I can display three images side by side with text below them, similar to a product catalog view. While everything looks good in Chrome, Internet Explorer is only aligning everything to the left.
CSS:
#products ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
#products li {
list-style-type: none;
float: left;
display: inline;
height: auto;
padding: 10px;
}
#products img {
max-width: 250px;
padding: 20px;
float: left;
}
#products ul li p {
text-align: center;
font-weight: 200;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
HTML:
<HeaderTemplate>
<div id="products">
<h2>ALL PRODUCTS</h2>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href="<%# Eval("ProductID", "Productdetails.aspx?ProductID={0}") %>"><img src="<%# Eval("ProductImage") %>" /></a>
<p><%# Eval("ProductName") %></p>
<p>$<%# Eval("ProductPrice") %></p></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</FooterTemplate>