By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,694 Members | 1,622 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,694 IT Pros & Developers. It's quick & easy.

Inline list items taking up two lines

P: 22

I've got an inline list with a label and checkbox in each list item, each item comes from a MySQL database and, chances are that, in future, the list will become longer.

My problem is that in IE6 and 7 one list item is split over 2 lines (i.e. the label is on one line and the checkbox is on the next line), so it looks kinda ugly, not to mention causing usability issues for less experienced users.

Is there any way I can force list items to only appear on one line without breaking the formatting that I currently have? The offending page is here:

Thank you in advance!!

Apr 23 '08 #1
Share this Question
Share on Google+
5 Replies

Expert 5K+
P: 7,435
See if removing the styles for .checkbox does anything. Maybe, first, try adding 'display:block' to .checkbox.

And people wonder why I call IE the worst browser on the planet.
Apr 23 '08 #2

Expert 100+
P: 490
hiya, the doc gave me an idea.

this is how i solved it.... let me know if its anygood...

Expand|Select|Wrap|Line Numbers
  1. #interest ul li{
  2. display:block;
  3. float:left;
  4. border: 1px solid #ff0000;
  5. width:125px;
  6. }
Hope it helped
Apr 23 '08 #3

Expert 100+
P: 490
Hi again... LOL i was still working on it when you changed the CSS.... anyway also try out this css property....

Expand|Select|Wrap|Line Numbers
  1. white-space: nowrap;
Apr 23 '08 #4

P: 22
He he! Yeah, I'm quick, I'll give myself that! Your original suggestion works pretty well - think I'm going to adapt that. I've tried the white-space property before, all I get is one long line of content.

Thanks both of you for your help :)
Apr 23 '08 #5

Expert 100+
P: 490
no problems. just happy to help
Apr 23 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.