I am making a roster. I have a container absolutely positioned. Within this, I have an unordered list with several list items positioned relatively. Within each list item I have some text (displaying their name) and then below this an absolutely positioned image (of them). It works great in both Chrome and IE. When viewed in firefox, the list item are positioned correctly, the names too, but the images are all positioned on top of each other so it looks like there is only one in the bottom left corner of the container. How could this work on Chrome/IE and Firefox? Here is a sample of the code:
#roster {
position: absolute;
width: 1300px;
left: 50%;
margin-left: -650px;
text-align: center;
}
p {
background-color: rgba(51,51,51,.9);
height: 40px;
}
li {
position: relative;
width: 150px;
height: 180px;
border: 1px solid black;
display: inline-block;
display: -moz-inline-stack;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: block;
}
li img {
width: 150px;
height: 130px;
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid #fff;
}
a {
text-decoration: none;
margin-top: 12px;
}
</style>
<body>
<div id="roster">
<ul>
<li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
<li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
<li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
<li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
</ul>
</div>
</body>
Just in case it helps someone later on:
Using a wrapping <div> instead of an <ul> and individual <div> instead of <li> worked well across all browsers. Some CSS to position everything in the grid format such as:
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;