Welcome to WebmasterWorld Guest from 54.145.166.96

Forum Moderators: not2easy

Message Too Old, No Replies

Displaying lists in ie7 media print

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

5+ Year Member



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
9:31 am on Nov 24, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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)

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



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)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month