Welcome to WebmasterWorld Guest from 23.22.79.235

Forum Moderators: incrediBILL

Message Too Old, No Replies

display: list-item; not showing properly

Works in IE and OP

   
7:17 am on Jan 8, 2007 (gmt 0)

5+ Year Member



To make table less design I used the following code to display two boxes side by side and then used display: list-item instead of <li>. This works perfectly fine with IE and OP but FF lists all the bullets on the left side of the floating box.

<style>
#indexFeaturesL
{
float: left;
width: 50%;
padding-left: 30px;
}
#indexFeaturesL span, #indexFeaturesR span
{
display: list-item;
padding-bottom: 10px;
}
</style>

<p id="indexFeaturesL">
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<p id="indexFeaturesR">
<span>4</span>
<span>5</span>
<span>6</span>
</p>

Any suggestions or corrections?

Milan

1:46 pm on Jan 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You haven't floated the second paragraph. Floating it makes the bullets appear on the right box too. However, you then have to make the width less than 50% to allow for the padding!
2:20 am on Jan 9, 2007 (gmt 0)

5+ Year Member



Thank you very much Hester, that was it.

Milan