Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Displaying lists in ie7 media print

8:10 am on Nov 16, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 30, 2008
posts: 42
votes: 0

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:
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!
P.S. I wish I could link an example but from where I am I can't
9:31 am on Nov 24, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

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?
4:54 pm on Nov 25, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

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?
10:01 am on Nov 28, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 30, 2008
posts: 42
votes: 0

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members