What's pushing this list item down?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tdrsam
    New Member
    • May 2015
    • 97

    #1

    What's pushing this list item down?

    I have a list with six items and the third one is not in the place it should be.

    Here's the html:

    Code:
    <ul>
    <!--1-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/W12.png" width="145" height="182" alt="W12 2 in 1 tablet">
      <p class="hp_ad_txt">W12 2-in-1 Tablet<br />-------<br />12" Screen</p>
     </li>
    </a>
    
    <!--2-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/4U.jpg" width="145" height="182" alt="Dream Micro 4U Server">
      <p class="hp_ad_txt">Dream<br />Micro 4U Server<br />--------<br />Full Scalability</p>
     </li>
    </a>
    
    <!--3-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/H81.jpg" width="180" height="132" alt="Dream Vision H81 All In One PC" style="padding-top:20px;">
    <p class="hp_ad_txt">Dream Vision H81<br />-------<br />All In One PC</p>
     </li>
    </a>
    
    <br />
    
    <!--4-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/MINI_PC.jpg" width="180" height="132" alt="Dream Vision Mini P C" style="padding-top:20px;">
     <p class="hp_ad_txt" style="margin-top:20px">Dream Vision <br />-------<br />Mini Pc</p>
     </li>
    </a>
    
    <!--5-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/P77.jpg" width="180" height="132" alt="Dream Book Laptops" style="padding-top:20px;">
      <p class="hp_ad_txt" style="margin-top:30px">Dream Book<br />-------<br />Laptops</p>
     </li>
    </a>
    
    <!--6-->
    <a href="">
     <li><img class="hp_img" src="images/homepage/5018D.jpg" width="180" height="132" alt="5018D Server" style="padding-top:20px;">
      <p class="hp_ad_txt" style="margin-top:10px">5018D Server<br />-------<br />Starting at $1249</p>
     </li>
    </a>
    </ul>
    And the css:

    Code:
    .col2 ul{
    	display:block;
    	list-style:none;
    	margin:0;padding:0;
    	text-align:center;
    }
    .col2 ul a li{
    	display:inline-block;
    	width:305px;
    	height:212px;
    	margin:0 auto;
    	background-image:url('images/homepage/border.png');
    	background-repeat:no-repeat;
    	padding-top:5%;
    	color:green;
    	position:relative;
    }
    .hp_img{
    	margin:-45px 100px 0 0;
    }
    .hp_ad_txt{
    	position:absolute;
    	top:5%;left:45%;
    	text-align:center;
    }
  • tdrsam
    New Member
    • May 2015
    • 97

    #2
    Nevermind. It was the height of the image that was causing the problem, so I just edited the image and the problem is fixed.

    Comment

    Working...