CodingForums.com - View Single Post

DMN · 01-22-2013, 01:33 AM

Hi, thanks for replying. When I said gaps I meant the gaps that exist between the border of the box containing the CSS table and the CSS table it itself. I would like to get rid of the gaps that are between the left, right, and top borders of the CSS table and the inside walls of the box containing the table. I have changed the CSS based on your response but it didn't help. My images are 120px by 120px and I've tried to get rid of the gaps by changing the size of the list element without success. The following are my HTML markup and modified CSS:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
 <title>
 </title>
<style >
body{margin: 0;padding:0;background-color:white}

#Page{margin:0 auto; width:1366px;}

#Bottom{width:100%;height:266px;}

#BottomLeft{float:left;width:80%;height:266px;background-color:orange;margin:0}
#BottomLeft ul{list-style:none;width:100%}
#BottomLeft li{width:120px;height:120px;list-style-type:none;float:left;margin:3px}
#BottomLeft ul li a{width:120px;height:120px;list-style:none;display:block;
text-decoration:none;background-color:blue;vertical-align:top;color:red} 

#BottomRight{float:left;width:20%;height:266px;background-color:blue;}
#Footer{top:0;clear:left;width:100%;height:25px;background-color:black;}  

</style>
</head>
<body>
 <div id="Page">
   </div id="Bottom"> 

     <div id="BottomLeft">
        <ul>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">1hvhjbob bhbohbp vgovohggv bhjhhbhb</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">2</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">3</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">4</a></li>
          
       </ul>
       <ul>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">1hvhjbob bhbohbp vgovohggv bhjhhbhb</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">2</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">3</a></li>

          <li><img src="Images/Sample.jpg"></li>
          <li><a href="#">4</a></li>
          
       </ul>
     </div>

     <div id="BottomRight">
     </div>

   </div>

   <div id="Footer">
   </div> 

 </div>
</body>
</html>