Hi,

 

I'm getting some layout behaviour that I don't quite understand and was wondering if someone could help me out.

 

I've got a bunch of image thumbnails that I'm displaying inside an unordered list. I want the items to be listed inline, aligned to the right. Floating to the right causes the images to appear in reverse order, so I chose to set the li items display to 'inline'.

 

Funny thing is, the li elements don't seem to be sized according to their contained images, and there's a mysterious 3px extra gap underneath.

 

Here's the CSS:

 

.eslidegallery-thumbnails
{
position: relative;
text-align: right;
}

.eslidegallery-thumbnails *
{
	padding: 0;
	margin: 0;		
}

.eslidegallery-thumbnails li
{
	list-style: none;
	display: inline;
}

.eslidegallery-thumbnails img
{
	margin: 5px 0 0 5px;
}

 

and I've attached a FireBug screen grab. Note the highlighted li element and the box model dimensions.

 

The images are all 50px x 50px and as you can see, I've added a top and left margin of 5px.

 

I noticed that even when I was floating the li elements, the 3px gap underneath was still present.

 

Thanks guys!

I would use float: right instead of display: inline and code the images in the reverse order in the html markup.

 

Another possible problem is that you are trying to apply a margin-top to an inline element, but I think margins should only be applied to block elements which is another reason to use float: right; display: block; (in fact I have been told that the float automatically makes the element block). Read this explanation

http://www.maxdesign.com.au/articles/inline/

 

If you continue to use display: inline, add line-height to equal the image height for the li style and the img style and delete the margins and see if that helps.

Try display:inline-block; -- best of both worlds! and float the ul not the list elements.

 

Oh and if you need to support IE6 and 7 then you'll need to add:

 

li {
display:inline;
zoom:1;
}

 

as they don't support 'inline-block' on elements with a natural display of block.