SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <Li> Not Expanding

    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.

    Code:
    #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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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)
    Code:
    #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;
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,383
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

    Inline elements should only paint their "content area" and although the image (which is a replaced 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •