Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Gaps CSS Table

  1. #1
    DMN
    DMN is offline
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Gaps CSS Table

    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.
    Last edited by VIPStephan; 01-22-2013 at 02:08 AM. Reason: corrected code BB tags

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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, &#91;code&#93;&#91;/code&#93; - 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    DMN (01-22-2013)

  • #3
    DMN
    DMN is offline
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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>
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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