Yet I cannot seem to find the CSS thing that lets you make the borders in tables nonexistant. Can somebody help me with this one?<!--content-->table { border: none }<!--content-->The HTML file:<br />
<br />
<table width="100%" class="frame"><br />
<tr><br />
<td class="side"><br />
<br><br />
<p><a href=http://www.htmlforums.com/archive/index.php/"http://www.apple.com">Apple</a></p><br />
</td><br />
<td class="mid"><br />
<h1>Nick's Test Site</h1><br />
<p>testy testy!</p><br />
</td><br />
<br />
The CSS file:<br />
<br />
td.side {background-image: url(side.jpg); width: 144px; height: 576px; text-align: right; vertical-align: top}<br />
td.mid {background-image: url(mid.jpg); background-repeat: repeat-x}<br />
table.frame {border: none}<br />
<br />
That's what it currently is. I want it so that the table functions as a frameset of sorts, and there is no gap between the two images. I'll try to get the page online in a sec.<!--content-->Ok, here it is. (<!-- m --><a class="postlink" href="http://kakeeman.ktcs.net:81/freetime/page.html">http://kakeeman.ktcs.net:81/freetime/page.html</a><!-- m -->)<br />
<br />
The layout kinda sucks, but this is just a test thing. Help will be greatly appreciated.
<!--content-->If you want the table data to have no gaps/spaces it isn't a css case in your example. A very educated guess would lead me to the fact you have white space.<br />
<br />
You need to close the <td> on the same line you opened it if you want 100% control of the table in relation to images.<br />
<br />
Ie:<br />
<br />
<td><img blah blah><a href blah blah>blah</a></td><br />
<br />
not:<br />
<br />
<td><br />
<img blah blah><a href blah blah>blah</a><br />
</td><br />
<br />
Contary to what most people think, setting widths and heights on <td>'s will not be secure if the content needs over flow from the dimensions you set. By having a return of carriage or a space like this <code> <code> you are adding extra information to the <td>. If you are wrapping <td>'s around an image/s you will need to eradicate the white space.<!--content--><td class="side" border="0"><br />
<br />
<td class="mid" border="0"> ??<br />
That might work. I belive.<!--content-->Hm. I'm still not having any luck... Here's the entire file:<br />
<br />
<html><br />
<head><br />
<link rel="stylesheet" type="text/css"<br />
href=http://www.htmlforums.com/archive/index.php/"style.css" /> <br />
<title>Freetime Test Page</title><br />
</head><br />
<body><br />
<table width="100%" class="frame"><tr><td class="side"><br><p><a href=http://www.htmlforums.com/archive/index.php/"http://www.apple.com">Apple</a></p></td><td class="mid"><h1>Nick's Test Site</h1><p>testy testy!</p></td></tr></table><br />
</body><br />
</html><br />
style.css:<br />
hr {color: black}<br />
<br />
p.light {background-color: #CCCCCC;font-size: small ;font-family: Techno;border-style: hidden; margin: 0%; text-align: center}<br />
<br />
p.dark {background-color: #999999; font-size: small; font-family: Techno;border-style: hidden; margin: 0%; text-align: center}<br />
<br />
p.body {font-family: Times; font-color: #000000}<br />
<br />
body {background-color: #FFFFFF} <br />
<br />
h1 {color: #000033; font-size: large; text-decoration: underline; text-align: center}<br />
<br />
table.frame {border: none}<br />
td.side {background-image: url(side.jpg); width: 144px; height: 576px; text-align: right; vertical-align: top}<br />
td.mid {background-image: url(mid.jpg); background-repeat: repeat-x}<br />
<br />
a:link {color: #000099}<br />
a:visited {color: #330066}<br />
a:hover {color: #990000; text-decoration: overline underline}<br />
a:active {color: #CC9900}<br />
<br />
I'm baffled here. I tried putting it all on one line, and that didn't work. Any ideas?<!--content-->Include this in the table tag<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"><!--content-->Originally posted by entimp <br />
Include this in the table tag<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> Thank you, sir! You deserve a cookie.<br />
<br />
*gives entimp a cookie*<br />
<br />
Thanks, everyone. It seems it finally works.
<!--content-->while you're playing with the body code why not place it in css as height and width are deprecated <!--content-->
<br />
<table width="100%" class="frame"><br />
<tr><br />
<td class="side"><br />
<br><br />
<p><a href=http://www.htmlforums.com/archive/index.php/"http://www.apple.com">Apple</a></p><br />
</td><br />
<td class="mid"><br />
<h1>Nick's Test Site</h1><br />
<p>testy testy!</p><br />
</td><br />
<br />
The CSS file:<br />
<br />
td.side {background-image: url(side.jpg); width: 144px; height: 576px; text-align: right; vertical-align: top}<br />
td.mid {background-image: url(mid.jpg); background-repeat: repeat-x}<br />
table.frame {border: none}<br />
<br />
That's what it currently is. I want it so that the table functions as a frameset of sorts, and there is no gap between the two images. I'll try to get the page online in a sec.<!--content-->Ok, here it is. (<!-- m --><a class="postlink" href="http://kakeeman.ktcs.net:81/freetime/page.html">http://kakeeman.ktcs.net:81/freetime/page.html</a><!-- m -->)<br />
<br />
The layout kinda sucks, but this is just a test thing. Help will be greatly appreciated.
<!--content-->If you want the table data to have no gaps/spaces it isn't a css case in your example. A very educated guess would lead me to the fact you have white space.<br /><br />
You need to close the <td> on the same line you opened it if you want 100% control of the table in relation to images.<br />
<br />
Ie:<br />
<br />
<td><img blah blah><a href blah blah>blah</a></td><br />
<br />
not:<br />
<br />
<td><br />
<img blah blah><a href blah blah>blah</a><br />
</td><br />
<br />
Contary to what most people think, setting widths and heights on <td>'s will not be secure if the content needs over flow from the dimensions you set. By having a return of carriage or a space like this <code> <code> you are adding extra information to the <td>. If you are wrapping <td>'s around an image/s you will need to eradicate the white space.<!--content--><td class="side" border="0"><br />
<br />
<td class="mid" border="0"> ??<br />
That might work. I belive.<!--content-->Hm. I'm still not having any luck... Here's the entire file:<br />
<br />
<html><br />
<head><br />
<link rel="stylesheet" type="text/css"<br />
href=http://www.htmlforums.com/archive/index.php/"style.css" /> <br />
<title>Freetime Test Page</title><br />
</head><br />
<body><br />
<table width="100%" class="frame"><tr><td class="side"><br><p><a href=http://www.htmlforums.com/archive/index.php/"http://www.apple.com">Apple</a></p></td><td class="mid"><h1>Nick's Test Site</h1><p>testy testy!</p></td></tr></table><br />
</body><br />
</html><br />
style.css:<br />
hr {color: black}<br />
<br />
p.light {background-color: #CCCCCC;font-size: small ;font-family: Techno;border-style: hidden; margin: 0%; text-align: center}<br />
<br />
p.dark {background-color: #999999; font-size: small; font-family: Techno;border-style: hidden; margin: 0%; text-align: center}<br />
<br />
p.body {font-family: Times; font-color: #000000}<br />
<br />
body {background-color: #FFFFFF} <br />
<br />
h1 {color: #000033; font-size: large; text-decoration: underline; text-align: center}<br />
<br />
table.frame {border: none}<br />
td.side {background-image: url(side.jpg); width: 144px; height: 576px; text-align: right; vertical-align: top}<br />
td.mid {background-image: url(mid.jpg); background-repeat: repeat-x}<br />
<br />
a:link {color: #000099}<br />
a:visited {color: #330066}<br />
a:hover {color: #990000; text-decoration: overline underline}<br />
a:active {color: #CC9900}<br />
<br />
I'm baffled here. I tried putting it all on one line, and that didn't work. Any ideas?<!--content-->Include this in the table tag<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"><!--content-->Originally posted by entimp <br />
Include this in the table tag<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> Thank you, sir! You deserve a cookie.<br />
<br />
*gives entimp a cookie*<br />
<br />
Thanks, everyone. It seems it finally works.
<!--content-->while you're playing with the body code why not place it in css as height and width are deprecated <!--content-->