468,301 Members | 1,511 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,301 developers. It's quick & easy.

Div in Table Cell extra space

Hello please help,

I have a table cell with a div in it. The div has a width of 300px.
but when it is rendered it puts extra space into the table cell.

Here's the style

<style>
#treecontainer
{
HEIGHT: 100%;
BACKGROUND: #ffffff;
overflow: hidden;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 2px solid;
BORDER-RIGHT: 2px solid;
WIDTH: 230px;
DISPLAY: inline;
position: static;
}
</style>

and here is the HTML fragment...

<table border="1" cellspacing="0" cellpadding="0"
style="width:250px;">
<tr height="10">
<td></td>
<td><img src="./images/top-lf-lb.gif" border="0" /></td>
<td width="100%" background="./images/top-repeat-strip-lb.gif"></td>
<td><img src="./images/top-rt-lb.gif" border="0" /></td>
</tr>
<tr>
<td></td>
<td colspan="3" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
<div id="treecontainer" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
</div>
</td>
</tr>
<tr height="10" id="r3">
<td width="3" valign="top">
</td>
<td><img src="./images/bottom-lf-lb.gif" border="0"></td>
<td width="100%" background="./images/bottom-repeat-strip-lb.gif">
<img src="./images/sp.gif" border="0"></td>
<td><img src="./images/bottom-rt-lb.gif" border="0"></td>
</tr>
</table>
Jul 20 '05 #1
1 6632
MB*********@yahoo.co.uk (MattB) wrote:
I have a table cell with a div in it. The div has a width of 300px.
Your CSS says 230px not 300px.
but when it is rendered it puts extra space into the table cell.
It's impossible to tell from the code you've posted below. Other
factors such as the doctype, the widths of the images used, and the
content within the div may all play a part. Post a URL.
<style>
Missing type attribute.
#treecontainer
{
HEIGHT: 100%;
BACKGROUND: #ffffff;
overflow: hidden;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 2px solid;
BORDER-RIGHT: 2px solid;
WIDTH: 230px;
DISPLAY: inline;
You can't set widths on inline elments. So the width should be ignored
altogether.
position: static;
This is the default. Unless you have something like
div {position: relative;} elsewhere in your stylesheet this is totally
usless.
}
</style>

and here is the HTML fragment...

<table border="1" cellspacing="0" cellpadding="0"
style="width:250px;">
So the table should be 250px wide.
<tr height="10">
No such attribute as height for tr.
<td></td>
<td><img src="./images/top-lf-lb.gif" border="0" /></td>
Missing the required alt attribute here and on every image in your
sample.
<td width="100%" background="./images/top-repeat-strip-lb.gif"></td>
<td><img src="./images/top-rt-lb.gif" border="0" /></td>
</tr>
<tr>
<td></td>
<td colspan="3" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
Wouldn't style="padding: 0;" be a lot less typing?
<div id="treecontainer" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">


Again, style="padding: 0;", and why not put this in the #treecontainer
style?

Make sure your code validates, then post a URL and we may be able to
find your problem.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by John A. | last post: by
reply views Thread by MattB | last post: by
2 posts views Thread by Marian Aldenhövel | last post: by
2 posts views Thread by Mark Goldin | last post: by
10 posts views Thread by phil-news-nospam | last post: by
11 posts views Thread by rfox | last post: by
5 posts views Thread by Tom | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.