SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image with bigger bottom border ?

    Floated img - bigger bottom border ?

    untitled

    I have a list of images in <li> tags that contain <a> tags with images in

    The <a> tags have padding and a border.

    The looks bigger in the bottom and I can't see why

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	*{
    	  margin:0;
    	  padding:0;
    	}
    	ul{
    	  margin:50px;
    	  list-style:none;
    	}
      li{
        display:inline;
      }
      li a{
        overflow:auto;
        border: 1px solid #999;
        display:block;
        float:left;
        padding:5px;
        1height:100px;
        margin:8px;
      }
    	</style>
    </head>
    
    <body>
      <ul>
        <li><a href="#"><img src="01_th.jpg"></a></li>
        <li><a href="#"><img src="02_th.jpg"></a></li>
        <li><a href="#"><img src="03_th.jpg"></a></li>
        <li><a href="#"><img src="04_th.jpg"></a></li>
      </ul>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Not sure, but 1height:100px; is an invalid attribue.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know I was using height:100px; to fix the problem.
    It does, but I thought it looked like a hack and wanted to understand why there was more padding.

    the 1height:100px; is just a quick way to comment out that line instead of
    /*height:100px;*/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    By default, browsers align the bottom of images (which are inline) with the baseline of any text that might sit beside them, leaving space below for the descenders. To stop this behavior, add this to your CSS:

    Code:
    img {vertical-align:bottom;}


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
  •