Hey Calvin,
I've kind of fixed it using divs now.
#container { display: table-row; padding: 0; margin: 0; width: 100%; }
#container div { display: table-cell; vertical-align: middle; }
<div id="container">
<div id="left">
content
</div>
<div id="right">
content
</div>
</div>
This works perfectly in all standard compliant browsers (FF, Safari and
Opera) but not Internet Explorer 6 or 7. It will work in IE 8 though
apparently.
Because 6&7 dont support the display: table; styles. I fixed this by adding
float: left to separate stylesheets for the IE's using conditional
statements.
This way IE has the elements vertically aligned to the top of their
containing div instead of in the middle like on the compliant browsers
(serves them right for using IE lol).
Cheers,
Darren
_____
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Calvin Chan
Sent: 19 May 2008 19:47
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
Hi Darren,
First of all, I will have to agree with Matijs that it is probably not the
best place to use li.
Second, I was actually doing some research on these type of problems the
other day, and I founded this:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
However, I did not get a chance to try it myself yet, but maybe this can
give you some idea on where to start.
~Calvin
On Mon, May 19, 2008 at 12:01 AM, Matijs <[EMAIL PROTECTED]> wrote:
I think semantically I would have gone for divs in the first place as it's
not really a list perse...
On Mon, May 19, 2008 at 12:04 AM, Darren Lovelock <[EMAIL PROTECTED]>
wrote:
Here's a example of what I'm doing http://www.munkyonline.co.uk/test.html
I want the li's to behave the same as table cells set with valign:middle.
I've had to float the li's left instead of displaying them inline otherwise
they stack on top of each other in a mess!
I suppose looking at it I could have used divs instead of a list but either
way, I think it will still behave the same.
Cheers,
Darren
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rahul Gonsalves
Sent: 18 May 2008 13:46
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
Darren,
On 17-May-08, at 8:09 PM, Darren Lovelock wrote:
> I've been trying to find a solution that will allow me to vertically
> center all the items in a li. The big problems i've got are that the
> li's are a non-fixed height and are floating to the left.
A link to a stripped down test would be helpful.
However, if you can't post a link, perhaps one of the links below will be
helpful to you?
Best,
- Rahul.
[1] http://www.brunildo.org/test/
[2] http://www.brunildo.org/test/vertmiddle.html
[3] http://www.brunildo.org/test/valimid2.html
[4] http://www.brunildo.org/test/va_lineheight.html
*******************************************************************
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]
*******************************************************************
--
Calvin Chan
Web Application Engineer
[EMAIL PROTECTED]
Office: 1.650.340.0044
Mobile: 1.510.508.8250
*******************************************************************
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]
*******************************************************************
