...

View Full Version : undesired space around table



mxb7642
07-19-2008, 04:57 AM
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.


<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;
}

macwiz
07-19-2008, 05:30 AM
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.


<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.

mxb7642
07-19-2008, 06:09 AM
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.



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum