PDA

View Full Version : table border trouble



gib65
02-16-2012, 09:49 PM
Hello,

I'm having trouble with the bold line in the code below:




<html>

<head>
<title>H&R Properties</title>

<style type="text/css">
table.master
{
height: 100%;
}

td.banner
{
height: 100px;
text-align: center;
}

span.banner
{
font-size: 24pt;
}

td.news
{
width: 200px;
padding-top: 10px;
text-align: center;
}

iframe.news
{
width: 100%;
height: 100%;
}

td.menuandcontent
{
width: 530px;
}

table.menuandcontent
{
width: 100%;
height: 100%;
}

td.menu
{
height: 50px;
background: url('menu_bg.jpg');
text-align: center;
}

td.content
{
text-align: center;
}

iframe.content
{
width: 100%;
height: 100%;
}


</style>

</head>

<body>

<table class="master" cellspacing=0 cellpadding=0 border=1>

<tr><td colspan=2 class="banner">
<span class="banner">
<img src="H&R banner.jpg" border=0></span></td></tr>

<tr>

<td class="news">
<iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
</td>

<td class="menuandcontent">
<table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>

<tr>
<td class="menu">

<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>

</td></tr>

<tr>
<td class="content">
<iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>

</table>
</td>

</tr>
</table>

</body>
</html>


This code produced this: http://www.shahspace.com/border1/

But if I do something as simple as set border to 0 in the bolded line above, I get this:

http://www.shahspace.com/border0/

The banner is all of a sudden shifted to the right by about 20 pixels. Why is this?

keyboard
02-17-2012, 12:14 AM
I'm not replying because I have an answer to your question, just letting you know something.
You shouldn't use tables for the layout of your site. Try using <div> tags and css instead.

Here's an article about it http://webdesign.about.com/od/layout/a/aa111102a.htm

gib65
02-17-2012, 06:20 PM
Thank you. That's actually very helpful.