Hello all.
I'm making an attempt to remove all of the excess markup in a site I'm working on. For reasons I can't phanthom, I have some extra space at the bottom of the page banner.
<!-- m --><a class="postlink" href="http://floridarusticcabins.com/test_plans.htm">http://floridarusticcabins.com/test_plans.htm</a><!-- m -->
The css coding is:
-------------------------------------------------------------------
/* main table */
table.main {border: 2px solid #000; background-color: #fff; margin: 0px; padding: 0px;}
/* page banner, company name, motto, phone */
td.banner {margin: 0px; padding: 0px; vertical-align: top;}
div#banner {width: 700px; height: 92px; }
td#name {padding: 5px 0px; margin: 0px; border-top: 2px solid #000; text-align: center;}
-------------------------------------------------------------------
The html coding is:
-------------------------------------------------------------------
<table width="700" align="center" c cellspacing="0" class="main">
<tr>
<td class="banner"><div id="banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Imgs/main/banner.gif" alt="Florida Rustic Cabins Banner" name="banner" width="700" height="92" id="banner">
</div></td>
</tr>
<tr>
<td id="name"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Imgs/main/Home_Title.gif" width="323" height="40"></td>
</tr>
</table>
------------------------------------------------------------------
I don't know why it is giving me the additional space. It is driving me nuts.
As usual, any advice you provide is greatly appreciated.
MagikeyFirst, the problem is IE specific...kind of important to note, as it looks perfect in netscape.
Also, must you use tables for this? Divs would work so much better...
<div id="banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg"></div>
<div id="title"><img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg"></div>
#banner{
border: 2px solid #000000;
margin: 0px;
padding: 0px;
}
#title{
border: 2px solid #000000;
margin: 0px;
padding: 0px;
}
It's just a quick framework and probably needs some tweaking but it should get the job done.
Technically, you could use CSS for the title image too, and save some bandwidth.
I'm making an attempt to remove all of the excess markup in a site I'm working on. For reasons I can't phanthom, I have some extra space at the bottom of the page banner.
<!-- m --><a class="postlink" href="http://floridarusticcabins.com/test_plans.htm">http://floridarusticcabins.com/test_plans.htm</a><!-- m -->
The css coding is:
-------------------------------------------------------------------
/* main table */
table.main {border: 2px solid #000; background-color: #fff; margin: 0px; padding: 0px;}
/* page banner, company name, motto, phone */
td.banner {margin: 0px; padding: 0px; vertical-align: top;}
div#banner {width: 700px; height: 92px; }
td#name {padding: 5px 0px; margin: 0px; border-top: 2px solid #000; text-align: center;}
-------------------------------------------------------------------
The html coding is:
-------------------------------------------------------------------
<table width="700" align="center" c cellspacing="0" class="main">
<tr>
<td class="banner"><div id="banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Imgs/main/banner.gif" alt="Florida Rustic Cabins Banner" name="banner" width="700" height="92" id="banner">
</div></td>
</tr>
<tr>
<td id="name"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Imgs/main/Home_Title.gif" width="323" height="40"></td>
</tr>
</table>
------------------------------------------------------------------
I don't know why it is giving me the additional space. It is driving me nuts.
As usual, any advice you provide is greatly appreciated.
MagikeyFirst, the problem is IE specific...kind of important to note, as it looks perfect in netscape.
Also, must you use tables for this? Divs would work so much better...
<div id="banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg"></div>
<div id="title"><img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg"></div>
#banner{
border: 2px solid #000000;
margin: 0px;
padding: 0px;
}
#title{
border: 2px solid #000000;
margin: 0px;
padding: 0px;
}
It's just a quick framework and probably needs some tweaking but it should get the job done.
Technically, you could use CSS for the title image too, and save some bandwidth.