<Li> Not Expanding

HTML & CSS
1

Hi,
I’m trying to make a simple image gallery using an unordered list.
The issue I’m having is that the list item only contains an image, I want the <li> to expand to the size of the image.

I assign a thin border to the list item to see where it ends and it doesn’t seem to encompass the image.

I know I could just apply a border to the image itself, or manually make the <li> the size of the image, but I’d rather do it this way as I personally think it’s the most logical way.



#myImageGallery li{
display:inline;
}

#myImageGallery li img{
height:100px;
width:100px;
}

#myImageGallery li{
border:1px solid #000000;
padding:0;
margin:0;
}

<ul id='myImageGallery'>
	<li>
		<img src="images/test1.jpg" alt=""/>
	</li>
</ul>

Any suggestions are welcome.

Thanks.

2

You can either do option 1 or 2
Option 1) Just add float:left; to the <li>

Option 2) Make it display:inline-block (full code for that below)

#myImageGallery li{
display:-moz-inline-box;
display:inline-block;
}
* html #myImageGallery li{
display:inline;/*IE6 support*/
}
*+html #myImageGallery li{
display:inline;/*IE7 support*/
}
#myImageGallery li img{
height:100px;
width:100px;
}

#myImageGallery li{
border:1px solid #000000;
padding:0;
margin:0;
}
3

Float looks cleaner and easier.
I’ve tried it and it works.
Are there any cross browser compatibility issues?
Thanks a lot for your help.

May I ask why this step is necessary, surely the image is inside the <li> whether I user my original code or either of your methods, it shouldn’t make a difference.

4

With the current code there are no bugs, but you are treading on thin ice :). The <li> needs to be block level (aka floating does that) to contain the image.

I don’t make the rules :p.

5

May I ask why this step is necessary, surely the image is inside the <li>

It was inside the list until you made the list display:inline :slight_smile:

Inline elements should only paint their “content area” and although the image (which is a r[URL=“http://reference.sitepoint.com/css/replacedelements”]eplaced element) pushes the line-height higher it does not change the content area of the list element.

IE6 and 7 would however have put the border around the image (with position:relative added) but that would not be correct behaviour.

The inline box model is perhaps one of the most complicated aspects of css.