Spot on! That worked a treat, thank you :-)
-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Owens Sent: 22 July 2008 13:16 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centered List Hi, I had forgotten that inline-block wasn't supported in FF2. If you add this to the li style, it should help. You may need to play about with the padding a bit too. display: -moz-groupbox; Make sure it goes before the display: inline-block; so that it is over-ridden in versions of FF which support inline-block. Other browsers will ignore any moz- styles anyway. ul li { display: -moz-groupbox; display: inline-block; vertical-align: top; } It's a bit of a dirty hack, and I tried a couple of other Mozilla specific extensions (, but this seemed to work the best. David 2008/7/22 Tyrone Joseph <[EMAIL PROTECTED]>: > Hi David or anyone else that can help, > > I have tested the CSS that you gave me, on the actual site and it works fine > on Safari, Opera and Firefox 3 but Firefox 2 displays like this: > http://www.datadial.net/test/firefox-2.gif > > Opera like this: > http://www.datadial.net/test/opera.gif > > Do you or anyone else have any clues as to what may be causing this, or what > the solution may be?? > > Tyrone > > > -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Owens > Sent: 14 July 2008 17:48 > To: wsg@webstandardsgroup.org > Subject: Re: [WSG] Centered List > > 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] > ******************************************************************* > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
