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

IE7 UL CSS Bug

P: 24
Hi,

Am trying to get IE7 to apply a max-width on an <li> element, but the bullet point appears aligned with the bottom of the bulleted para, not the top (as one might expect). If you remove the max-width, all works fine. If you put the max-width on the <ul>, the bullet point simply disappears. Am I missing something fundamental, or is this just another one of IE7's "features"? More to the point, are there any known fixes? Cheers.

Expand|Select|Wrap|Line Numbers
  1.  <style>
  2.    ul li {
  3.      max-width : 23em;
  4.    }
  5.  </style>
  6.  
  7.   <ul>
  8.    <li>this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item this is the first list item</li>
  9.  
  10.    <li>this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item this is the second list item</li>
  11.  
  12.    <li>this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item this is the third list item</li>
  13.   </ul>
Jan 17 '07 #1
Share this Question
Share on Google+
8 Replies


P: 24
<tumbleweed>...</tumbleweed>
Jan 30 '07 #2

Expert 100+
P: 1,892
I don't have IE7 refuse to install it. Have you tried putting a div around the list with the max width? "Features" that is funny!
Jan 30 '07 #3

P: 24
I don't have IE7 refuse to install it. Have you tried putting a div around the list with the max width?
Cunning! Stick the max width on the div instead.

Yep, that fixes it. Thanks.

Unfortunately can't really avoid having IE (versions 3,4,5,5.5,6,7 thanks to evolt.org) installed for x-browser testing purposes.
Jan 30 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
I believe you should put that on the ul and not the li.
Jan 30 '07 #5

Expert 100+
P: 1,892
Cunning! Stick the max width on the div instead.

Yep, that fixes it. Thanks.

Unfortunately can't really avoid having IE (versions 3,4,5,5.5,6,7 thanks to evolt.org) installed for x-browser testing purposes.
I haven't designed any web apps or sites lately so I haven't bothered installing IE7. From what I've heard I'm not missing much.
Jan 30 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
I see absolutely no reason to have to support IE<5.5 and I'm not so sure about 5.5 either.
Jan 31 '07 #7

P: 24
I believe you should put that on the ul and not the li.
Technically, yes, but see my previous comment about IE7 then not displaying the bullet point.
Jan 31 '07 #8

P: 24
I see absolutely no reason to have to support IE<5.5 and I'm not so sure about 5.5 either.
Probably right. :-)
Jan 31 '07 #9

Post your reply

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