Forum Moderators: open
I have 4 table cells. 3 of them have content. I can use colspan on the lefthand collumn, but not on the right, because both on the right have content.
And I can't move the content to one table cell because then I'm back to my problem of centered something at the bottom of a SSI.
Here's my bare-bones relevant code:
<table width="100%" height="100%" cellpadding="5px">
<tr>
<td>
Cell one has a navbar
</td>
Cell 2 has the main content
</td>
</tr>
<tr>
<td id="navbar">
Cell three (blank)
</td>
<td id="mainstuff">
<img src="my image"> (Cell four)
</td>
</tr>
</table>
{Cell three (blank)}
<td id="navbar">
</td>
to this
<td id="navbar"> </td>
I'm a bit confused as to why cell one actually has the navbar and cell 3 is id'ed as navbar but I'll let you figure that one out. :-)
The above solution may STILL act differently in different browsers and not space the way you'd like, even if you apply CSS rules to explicitly assign it a width. If all else fails, you may have to create a 1x1 pixel transparent image and assign it to that blank space. You can give it any size, the 1x1 pixel image will speed downloading. This is a HACK that is as depricated as using tables for layout but it still works.
<td id="navbar"><img src="spacer.gif" width="24" height="1" border="0" alt=""></td>
None of this fixes the question that I asked in the first place. I don't care at all about the other cells, because I know the solution for my empty cell.
I want to remove the border between Cell 2 and Cell 4. Is there a way I can make what I want more clear?
This ain't right.
Cell 1 has a nav bar
Cell 2 has main content, a SSI.
Cell 3 is blank.
Cell 4 has an image.
edit: terrible typo. Never post after naptime :P
<td><div style="margin: 0 10px">Qwerty</div></td>
Is there anyone else who'd like to give it a shot?
jessejump's method should work in a table with cellpadding and cellspacing set to 0.
Or maybe another way is to use transparent left and/or right borders on the <td>s to imitate cellspacing.
table td {
padding:5px;
border-right:10px solid transparent;
}
<table cellspacing="0" cellpadding="0">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css" media="all">
body {
background:orange;
}
table {
background:yellow;
}
table td {
padding:10px;
border-left:20px solid orange;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr valign="top">
<td><h3>Navigation cell 1</h3>
<ul>
<li>link</li>
<li>link</li>
<li>link</li></ul></td>
<td><h1>Content - cell 2</h1>
<p>Praesent scelerisque dictum leo. Vestibulum lobortis sapien et felis. In hac habitasse platea dictumst. Aenean eget pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean porta pharetra diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis elit non est commodo luctus. Sed turpis massa, fringilla ut, vulputate aliquam, sagittis sed, urna. Nulla suscipit mauris eget eros. Phasellus dolor. Aenean laoreet tellus quis diam. Suspendisse est. Donec vitae mauris. Morbi rutrum. Proin luctus commodo nibh.</p>
<h2>More content</h2>
<p>Praesent scelerisque dictum leo. Vestibulum lobortis sapien et felis. In hac habitasse platea dictumst. Aenean eget pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean porta pharetra diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis elit non est commodo luctus. Sed turpis massa, fringilla ut, vulputate aliquam, sagittis sed, urna. Nulla suscipit mauris eget eros. Phasellus dolor. Aenean laoreet tellus quis diam. Suspendisse est. Donec vitae mauris. Morbi rutrum. Proin luctus commodo nibh.</p>
<h2>More content</h2>
<p>Praesent scelerisque dictum leo. Vestibulum lobortis sapien et felis. In hac habitasse platea dictumst. Aenean eget pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean porta pharetra diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis elit non est commodo luctus. Sed turpis massa, fringilla ut, vulputate aliquam, sagittis sed, urna. Nulla suscipit mauris eget eros. Phasellus dolor. Aenean laoreet tellus quis diam. Suspendisse est. Donec vitae mauris. Morbi rutrum. Proin luctus commodo nibh.</p></td></tr>
<tr valign="top">
<td>Cell 3</td>
<td><h3>More content in cell 4</h3>
<p>Praesent scelerisque dictum leo. Vestibulum lobortis sapien et felis. In hac habitasse platea dictumst. Aenean eget pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean porta pharetra diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis elit non est commodo luctus. Sed turpis massa, fringilla ut, vulputate aliquam, sagittis sed, urna. Nulla suscipit mauris eget eros. Phasellus dolor. Aenean laoreet tellus quis diam. Suspendisse est. Donec vitae mauris. Morbi rutrum. Proin luctus commodo nibh.</p></td></tr></table>
</body>
</html>
This works.
Text is moved 10 px away from td sides.
No, jesse. I wish I could show you my page to show what is going on, but short of copying and pasting my entire code here, I can't. I didn't want the text moved away from the sides. I wanted two cell borders gone.
