1

Possible Duplicate:
IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

I'm trying to get items in a HTML unordered list (UL tag) to always be the height of 1 line regardless of how many lines of text are in each item, using a fixed height and overflow:hidden on a DIV inside each LI.

Here's a demo:
http://www.isw.com.au/domino/isw/iswdevelopmentwebsite.nsf/test-overflow-hidden
The red box contains the list in question.

This works perfectly in Opera, Firefox and Chrome, but doesn't work in IE. I want it to work in at least IE 7, 8 and 9.
IE is making the extra lines of text invisible, but still leaving space for them, effectively ignoring the fixed height for the DIV inside each LI.

Another StackOverflow question linked to the following page, which states overflow problems can be fixed by setting position:relative on containers:
http://snook.ca/archives/html_and_css/position_relative_overflow_ie
The CSS for my demo page has position:relative on every element up to the top-level DIV inside the BODY, but that has no effect.

How can I fix the problem in IE?

Update:
I've added a fixed height (1.8em) to the LI tags, which has helped a lot, but there's another problem.
For each LI, IE shows the text one line below the bullet character. This makes the entire list take 5 lines of space when it should be 4.

Community
  • 1
  • 1
Scott Leis
  • 2,810
  • 6
  • 28
  • 42

1 Answers1

2

I've solved it. I needed all of the following to make it work consistently cross-browser:
- "display:inline" on the DIV inside each LI (to stop IE adding a line-break);
- a fixed height and "overflow:hidden" on the LI tags; and finally
- "list-style-position:inside" on the UL, because "overflow:hidden" was hiding the bullets.

Scott Leis
  • 2,810
  • 6
  • 28
  • 42