Gaps CSS Table

DMN · 01-21-2013, 10:10 PM

Hi all, I have created a table using HTML Unordered List and CSS. The problem I am having is that I cannot get rid of the gaps on the right and left of the table. Please take a look at my HTML markup and CSS below:

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;margin:0 5px 5px 0;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>

Any suggestions on how to fix this problem will be greatly appreciate, thanks for your help.

Excavator · 01-21-2013, 11:15 PM

Hello DMN,
It's hard to tell what you have going on without seeing your images or, at the very least, knowing the size of your images.

If I assume your Sample.jpg is 120px square then I would say the gaps are either cause by your 3px margin on the li's or, even more likely, the margin: 0 5px 5px; on your anchors.

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your 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>

jerry62704 · 01-22-2013, 02:31 PM

Fixing the CSS and HTML errors creates quite a different look. Try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
 <title>My Title</title>
<style type=text/css>
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" alt="sample"></li>
				<li><a href="#">1hvhjbob bhbohbp vgovohggv bhjhhbhb</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">2</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">3</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">4</a></li>
			</ul>
			
			<ul>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">1hvhjbob bhbohbp vgovohggv bhjhhbhb</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">2</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">3</a></li>
				<li><img src="Images/Sample.jpg" alt="sample"></li>
				<li><a href="#">4</a></li>
			</ul>
		</div>
		<div id="BottomRight">
		</div>
	</div>
   <div id="Footer">
   </div> 
 </div>
</body>
</html>

jerry62704 · 01-22-2013, 02:36 PM

The biggest problems were "div" tags that were closed, but should have been open. See line 26 for an example. The other errors should be tended too as well.