IE7 List items not wrapping

HTML & CSS
1

Hi,

I have some code that displays elements in a list, but displayed inline so they appear like text on a page.

Problem I am having in IE7 is that if an element needs to wrap, it does so, but it pushes the next element below, so it looks like so:

http://cl.ly/4R6t

Any ideas why this could happen?

2

Put a border around your li and you will see why.

3

Ok, done that. It’s not displaying as I would expect though, it should go onto the next line.

http://cl.ly/4Qy2

4

no it shouldn’t, li’s are blocks. You can see that by looking at Amanda West. I think wrapping can be done in CSS3, but not many browsers support it.

5

Ok, well I am displaying the list items as inline, that’s how I have managed to get them to look like they are in the screengrab. In Safari/Chrome/IE8/FF what happens is if the element is not going to fit on the line it skips to the next line, so you don’t have any gaps to the left, if any they are to the right.

6

I am shocked that those four do that. You will need to do some conditional css for ie7 then. I would make the width a smidge smaller.

7

Why are you shocked? You know you can change block elements to behave inline?

8

I am shocked because I would imagine those would behave like your screen shots depict

9

Right, you didn’t expect them to drop down onto a new line? To me it’s the obvious conclusion for a list of inline elements.

10

I expected them to do what your second screen shot shows. You are saying it does

-------------- amanda
woods

correct?

11

Hi,

We’d need to see some code as it could be a number of things :slight_smile:

It looks to me as though you have displayed the list items as inline but perhaps also triggered haslayout on them at the same time which then makes them behave as inline-block elements and would behave as shown in your image.

12

Hi Paul,

Well the markup is basic UL and LI, however because its Drupal it adds in lots of markup, so within the LI there is a DIV and a SPAN.

The CSS is.

#artists_signed_up ul {
text-transform: uppercase;
font-size: 12px !important;
padding: 0;
width: 220px !important;
}

#artists_signed_up ul li {
line-height: 18px;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin-right: 2px;
}

The actual DIV and SPAN doesn’t have any css applied to it.

13

Hi Nick,

I can’t really see any problems with the above so there must be something else affecting it. I don’t see any display:inline rules in the above so each list would be on a separate line and there most be other rules affecting those elements.

If the element is display:inline then the width and height settings are unnecessary anyway as dimensions don’t apply to inline elements.

I’ll need to see the full page to debug properly.

14

Paul, its not actually online, its on my machine - I can’t upload it I’m afraid.

At the moment the only style I have now is:

ul li {
float:left;
}
15

Remove the float and make it display:inline only instead. You don’t need to float text unless you want to add dimensions etc.

Ie7 and under is very buggy with widthless floated lists especially when they wrap as it snags or catches on what was before.

If you need dimensions then display:inline-block would perhaps be better but needs a hack for ie6 and 7.


#artists_signed_up li{display:inline-block}
* html #artists_signed_up li{display:inline}/* e6*/
*+html #artists_signed_up li{display:inline}/* ie7*/
16

Cheers Paul, why have you not been given a knighthood?

:slight_smile: