Displaying lists in ie7 media print

[fm86]

Hello everybody!

I am having troubles visualizing a set of images made with lists in the PRINT PREVIEW of IE7.

The elements of the list are like follows:

<li><a href="url.html"><img src="profileImage.jpg"></a><p>Name<b>Surname</b></p></li>

and this is the associated style command:
li{
display: block;
float: left;
height: 170px;
}

In the page I see it properly (every image is displayed near to the next one until the dimension of the containing div is reached and a new line of images is started). In explorer 7 print mode I can't use float:left because it is buggy so I will use display: inline-block instead. Unfortunately each image will be displayed in a new line, destroying the original ordering. The question is:
WITHOUT altering the HTML list structure is there a way to achieve the desired result on print mode?

In FF everything works fine even with inline-block.

Thanks a lot!
Fabio
P.S. I wish I could link an example but from where I am I can't

[alt131]

Hi Fabio. I've looked at your problem several times, but I'm still not quite sure where the problem might be. You see both float and inline-block should work for this situation - so if you aren't seeing the desired output then there must be something else affecting the print layout. Have you double-checked there isn't a width, margins or padding that might be affecting the layout?

[rocknbil]

Try adding this . . .

li img { display:block; }

I did some searching and can't find references - but I'm **pretty sure** the default mode for <img> is inline, which puts an inline element inside a block element which produces some unexpected results, especially in IE 7. There is an old post around here somewhere where I learned this one the hard way, but can't find it.

The second thing that could be problematic is that when you float elements, you should normally assign a width to them, and you don't. Combine this with the inline inside block scenario and there may be two problems.

By what I see, it almost looks like setting display: inline (and removing float) on the li's would work too - have you tried it?

[fm86]

Thank you a lot! I will try this out as soon as possible!