homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Displaying lists in ie7 media print

5+ Year Member

Msg#: 4387518 posted 8:10 am on Nov 16, 2011 (gmt 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



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4387518 posted 9:31 am on Nov 24, 2011 (gmt 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?


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

Msg#: 4387518 posted 4:54 pm on Nov 25, 2011 (gmt 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?


5+ Year Member

Msg#: 4387518 posted 10:01 am on Nov 28, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved