ckmodlmayer Posted June 12, 2006 Share Posted June 12, 2006 Hi folks,First post, so please bear with me. I'm trying to get a list item to occupy the full height of the parent ul: <html><head><style type="text/css"><!--ul { display: block; width: 100%; height: 50px; border: 1px solid red;}li { display: inline; height: 100%; border: 1px solid blue;}--></style></head><body><ul><li>One<li>Two<li>Three</ul></body></html> You can view the code at this test page. Oddly, it looks fine in IE, but not in Firefox. Since we all know that this is not the way the world works, it must be a problem with my code. Is the "height" tag not valid for use with li?I've tried "height: 50px" too; still no change. How do I get the list item to occupy 100% height?Oh, one more thing, I've tried this using a sequence of <ul>'s instead of <li>'s. Same result. Link to comment Share on other sites More sharing options...
boen_robot Posted June 12, 2006 Share Posted June 12, 2006 Only block elements are allowed to have dimensions (width and height) and you have set the li to inline. Link to comment Share on other sites More sharing options...
ckmodlmayer Posted June 12, 2006 Author Share Posted June 12, 2006 ...thus proving how stale my CSS is.Thanks for the tip. I've switched from assigning the <li>'s "display:inline" to "float:left". The height feature now works, but of course the <li>'s won't center align within the <ul>. How do I center the <li>'s on the page now? Link to comment Share on other sites More sharing options...
Jonas Posted June 12, 2006 Share Posted June 12, 2006 You could use display: inline-block; though... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now