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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    undesired space around table

    I have a table with the class="chart". When I look in the div, the center tag is pushed down about 5px more than it should be. I've tried messing with the margin/padding with no luck. Any ideas? Thanks.
    Code:
    <div id="leftbar"><center><table class="chart">
    	<tr><td>blah</td><td>blah</td></tr>
    	<tr>
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    	<tr class="chartRow chartRow2">
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    	<tr>
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    </table></center></div>
    
    table.chart {
    	border-collapse:collapse;
    }
    Last edited by mxb7642; 07-19-2008 at 06:01 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by mxb7642 View Post
    I have a table with the class="chart". When I look in the div, the center tag is pushed down about 5px more than it should be. I've tried messing with the margin/padding with no luck. Any ideas? Thanks.
    Code:
    <div id="leftbar"><center><table class="chart">
    	<tr><td>blah</td><td>blah</td></tr>
    	<tr>
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    	<tr class="chartRow chartRow2">
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    	<tr>
    		<td><a href="/">blah</a> - blah</td>
    		<td>7-14-2008</td>
    	</tr>
    </table></center></div>
    
    table.chart {
    	border-collapse:collapse;
    }
    Without your CSS, we really can't help you. Please post it or give us a link to it.

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a more comprehensive sample of my code. The table in the right bar is positioned correctly with only 10px above it based on the padding. However, the table in the left bar has an additional ~19px above it beyond the 10px padding. The value seems to vary - not sure based on what. While preparing this sample, I was able to determine it has something to do the content in the right bar, still not sure how to fix it though Thanks.

    Code:
    <html>
    <head>
    	<style>
    		html,body {
    			min-width:1042px;
    			background:#353535;
    			font-family:Arial,Tahoma,Helvetica,sans-serif;
    			font-size:12px;
    			color:#FFF;
    			margin:0;
    			padding:0;
    		}
    
    		a {
    			color:#FFD100;
    			text-decoration:none;
    		}
    		
    		div#frame {
    			top:-15px !important;
    			display:table;
    			background:#000;
    			margin-left:2%;
    			margin-right:2%;
    			width:96%;
    		}
    
    		div#frame > div {
    			display:table-row;
    		}
    
    		div#frame > div > div {
    			display:table-cell;
    			position:relative;
    		}
    
    		div#leftbar,div#rightbar {
    			border:1px solid #666;
    			padding:10px;
    		}
    
    		div#leftbar {
    			width:300px;
    		}
    
    		div#middlebar {
    			background:#353535;
    			width:10px;
    		}
    		
    		table.chart {
    			border-collapse:collapse;
    			border:2px solid #404040;
    		}
    	</style>
    </head>
    <body>
    	<div id="frame">
    		<div>
    			<div id="leftbar">
    				<center>
    					<table class="chart">
    						<tr>
    							<td>blah</td>
    							<td>Date</td>
    						</tr>
    						<tr>
    							<td>
    								<a href="/">blah</a> - blah
    							</td>
    							<td class="check">7-14-2008</td>
    						</tr>
    					</table>
    				</center>
    			</div>
    
    			<div id="middlebar"></div>
    
    			<div id="rightbar">
    				<center>
    					<table class="chart">
    						<tr>
    							<td>
    								<div>Blue Whale</div>
    								<center>
    									1&diams;2&diams;3
    								</center>
    							</td>
    						</tr>
    					</table>
    				</center>
    			</div>
    		</div>
    	</div>
    </body>
    </html>


  •  

    Posting Permissions

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