2008/7/14 Tyrone Joseph <[EMAIL PROTECTED]>:
> Thanks for your reply but this doesn't solve my problem as the size list
> will be controlled by a CMS. This means that there may be times when there
> are 7 options and there may be times when are 3 options.
>
>
>
> I somehow need to center the li elements without affecting other textual
> content within the containing div. I am trying by best to keep the HTML
> clean and I don't want to add any unnecessary divs within the main div.
>

Hi Tyrone,

I've been playing around for this, and have a pretty good looking
solution for you.

<ul>
        <li><a href="#">one</a></li>
        <li>
                two
                <a href="#">sold out</a>
        </li>
        <li><a href="#">three</a></li>
</ul>

ul {
margin: 0;
text-align: center;
}

li {
display: inline-block;
border: 1px solid black;
padding: 5px;
margin: 5px;
vertical-align: top;
}

a {
        display: block;
}

Plus you will need to send this to IE, preferably using conditional comments:

li {
zoom: 1;
display: inline;
}

Works in FF, IE 5.5, 6 and 7, Opera 9.5 and Safari 3 on PC. I haven't
looked at anything on a Mac yet.

Regards
David

http://fineartdavid.com


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to