Help with HTML tables

[steve]

Hi All

I am having annoying problems with VS 2005 (VB) positioning tables on a web
page

If I create HTML tables for layout, sometimes the next table sits at the
bottom of the above table and other times there is a gap of about 10mm
between them

I am at a loss as the code is identical

It is really starting to irritate me as I am spending hours on trying to
format the page

If anybody can point me in the right direction I would be most appreciative

You can see the web at
www.microsolutions.net.au
The code follows...

regards
Steve
<form id="mainForm" runat="server">

<!--
Header
-->

<table border="0" cellspacing="0" cellpadding="0" id="header" width="100%"
style="height: 80px; font-size: 24px; background-color: royalblue;">

<tr>

<td style="width: 100%" align="center"><strong><a href="Default.aspx"><span
style="font-size: 24pt">Geelong Microsolutions</span></a></strong></td>

</tr>

</table>

*** there is NO gap between these tables *****************

<table border="0" cellspacing="0" cellpadding="0" id="mainmenu" width="100%"
style="height: 22px; background-color: whitesmoke;">

<tr>

<td style="width: 10%" align="center"><strong><a
href="Default.aspx">Home</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Products.aspx">Products</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Downloads.aspx">Downloads</a></strong></td>
<td style="width: 70%" align="center"></td>

</tr>

</table>

**** There is a 10mm gap between these tables*********
<table border="0" cellspacing="0" cellpadding="0" id="content-container"
width="100%" style="height: 537px;">

<tr>

<!--

LEFT COLUMN

-->

<td id="content-left" style="height: 537px; width: 115px; background-color:
whitesmoke;">
</td>

<!--

CONTENT

-->

<td id="content" style="width: 453px; height: 537px;" valign="top">
<asp:ContentPlaceHolder ID="Content" runat="server">

</asp:ContentPlaceHolder>

</td>

<td style="width: 112px; height: 537px; background-color: whitesmoke"
valign="top">

<asp:Image ID="Image1" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-01.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image2" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-02.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image3" runat="server"
ImageUrl="~/App_Themes/default/Images/ad-03.gif"

Width="120px" /></td>

</tr>

</table>

<!--

FOOTER
-->

<table border="0" cellspacing="0" cellpadding="0" id="footer" width="100%">

<tr>

<td><p>

Drysdale Vic 3222<br />

[phone]<br />

Copyright &copy; 2005 Geelong Microsolutions&nbsp;</p></td>

</tr>

</table>

</form>

[Brett Wiltshire]

Steve,

This could be an artifact of your css definition for a table in
Default.css. (margin-bottom: 20px). (Line 13).

Your header table has the margin-bottom redefined to 1px in the
definition for #header (Line 183). There is no corresponding #mainmenu
definition.
Hope this helps.
Brett.

[Eliyahu Goldin]

Put the tables inside the cells of another table and setup cellspacing and
the spacepadding for the outer table as you wish.

Eliyahu

"steve" <ga*****@newsgroups.nospam> wrote in message
news:ux**************@TK2MSFTNGP11.phx.gbl...

Hi All

I am having annoying problems with VS 2005 (VB) positioning tables on a
web page

If I create HTML tables for layout, sometimes the next table sits at the
bottom of the above table and other times there is a gap of about 10mm
between them

I am at a loss as the code is identical

It is really starting to irritate me as I am spending hours on trying to
format the page

If anybody can point me in the right direction I would be most
appreciative

You can see the web at
www.microsolutions.net.au
The code follows...

regards
Steve
<form id="mainForm" runat="server">

<!--
Header
-->

<table border="0" cellspacing="0" cellpadding="0" id="header" width="100%"
style="height: 80px; font-size: 24px; background-color: royalblue;">

<tr>

<td style="width: 100%" align="center"><strong><a
href="Default.aspx"><span style="font-size: 24pt">Geelong
Microsolutions</span></a></strong></td>

</tr>

</table>

*** there is NO gap between these tables *****************

<table border="0" cellspacing="0" cellpadding="0" id="mainmenu"
width="100%" style="height: 22px; background-color: whitesmoke;">

<tr>

<td style="width: 10%" align="center"><strong><a
href="Default.aspx">Home</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Products.aspx">Products</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Downloads.aspx">Downloads</a></strong></td>
<td style="width: 70%" align="center"></td>

</tr>

</table>

**** There is a 10mm gap between these tables*********
<table border="0" cellspacing="0" cellpadding="0" id="content-container"
width="100%" style="height: 537px;">

<tr>

<!--

LEFT COLUMN

-->

<td id="content-left" style="height: 537px; width: 115px;
background-color: whitesmoke;">
</td>

<!--

CONTENT

-->

<td id="content" style="width: 453px; height: 537px;" valign="top">
<asp:ContentPlaceHolder ID="Content" runat="server">

</asp:ContentPlaceHolder>

</td>

<td style="width: 112px; height: 537px; background-color: whitesmoke"
valign="top">

<asp:Image ID="Image1" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-01.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image2" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-02.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image3" runat="server"
ImageUrl="~/App_Themes/default/Images/ad-03.gif"

Width="120px" /></td>

</tr>

</table>

<!--

FOOTER
-->

<table border="0" cellspacing="0" cellpadding="0" id="footer"
width="100%">

<tr>

<td><p>

Drysdale Vic 3222<br />

[phone]<br />

Copyright &copy; 2005 Geelong Microsolutions&nbsp;</p></td>

</tr>

</table>

</form>

[steve]

Brett

You were spot on with the .css issue

Thank you

Steve

"Brett Wiltshire" <br*************@commerzbank.com> wrote in message
news:11**********************@g10g2000cwb.googlegr oups.com...

Steve,

This could be an artifact of your css definition for a table in
Default.css. (margin-bottom: 20px). (Line 13).

Your header table has the margin-bottom redefined to 1px in the
definition for #header (Line 183). There is no corresponding #mainmenu
definition.
Hope this helps.
Brett.

[steve]

Eliyahu

Thanks for your reply

Steve
"Eliyahu Goldin" <re*************@monarchmed.com> wrote in message
news:Ot**************@TK2MSFTNGP14.phx.gbl...

Put the tables inside the cells of another table and setup cellspacing and
the spacepadding for the outer table as you wish.

Eliyahu

"steve" <ga*****@newsgroups.nospam> wrote in message
news:ux**************@TK2MSFTNGP11.phx.gbl...

Hi All

I am having annoying problems with VS 2005 (VB) positioning tables on a
web page

If I create HTML tables for layout, sometimes the next table sits at the
bottom of the above table and other times there is a gap of about 10mm
between them

I am at a loss as the code is identical

It is really starting to irritate me as I am spending hours on trying to
format the page

If anybody can point me in the right direction I would be most
appreciative

You can see the web at
www.microsolutions.net.au
The code follows...

regards
Steve
<form id="mainForm" runat="server">

<!--
Header
-->

<table border="0" cellspacing="0" cellpadding="0" id="header"
width="100%" style="height: 80px; font-size: 24px; background-color:
royalblue;">

<tr>

<td style="width: 100%" align="center"><strong><a
href="Default.aspx"><span style="font-size: 24pt">Geelong
Microsolutions</span></a></strong></td>

</tr>

</table>

*** there is NO gap between these tables *****************

<table border="0" cellspacing="0" cellpadding="0" id="mainmenu"
width="100%" style="height: 22px; background-color: whitesmoke;">

<tr>

<td style="width: 10%" align="center"><strong><a
href="Default.aspx">Home</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Products.aspx">Products</a></strong></td>
<td style="width: 10%" align="center"><strong><a
href="Downloads.aspx">Downloads</a></strong></td>
<td style="width: 70%" align="center"></td>

</tr>

</table>

**** There is a 10mm gap between these tables*********
<table border="0" cellspacing="0" cellpadding="0" id="content-container"
width="100%" style="height: 537px;">

<tr>

<!--

LEFT COLUMN

-->

<td id="content-left" style="height: 537px; width: 115px;
background-color: whitesmoke;">
</td>

<!--

CONTENT

-->

<td id="content" style="width: 453px; height: 537px;" valign="top">
<asp:ContentPlaceHolder ID="Content" runat="server">

</asp:ContentPlaceHolder>

</td>

<td style="width: 112px; height: 537px; background-color: whitesmoke"
valign="top">

<asp:Image ID="Image1" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-01.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image2" runat="server" Height="240px"
ImageUrl="~/App_Themes/default/Images/ad-02.gif"

Width="120px" /><br />

<br />

<br />

<asp:Image ID="Image3" runat="server"
ImageUrl="~/App_Themes/default/Images/ad-03.gif"

Width="120px" /></td>

</tr>

</table>

<!--

FOOTER
-->

<table border="0" cellspacing="0" cellpadding="0" id="footer"
width="100%">

<tr>

<td><p>

Drysdale Vic 3222<br />

[phone]<br />

Copyright &copy; 2005 Geelong Microsolutions&nbsp;</p></td>

</tr>

</table>

</form>