Forum Moderators: open
I have made a new page for our fishing club and placed a 1x1 transparent spacer between a couple of tables so as to break the colour with a single thin bit of background colour. The problem is, in IE it looks like its about 15-20px instead of 1, which looks silly.
I hope someone can help me solve this issue.
I have included the code for that section of the page.
Thank you for your time.
Dave
P.S. I'm not a pro. Just having a go and on a massive learning curve.
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('Assets/nvbar_home.jpg','Assets/nvbar_meetings.jpg','Assets/nvbar_Photo-Gallery.jpg','Assets/nvbar_brag.jpg','Assets/nvbar_forums.jpg','Assets/nvbar_links.jpg','Assets/nvbar_Rules.jpg','Assets/nvbar_contact.jpg')">
<table width="100%" height="120" border="0" cellpadding="0" cellspacing="0" background="Assets/ocean_banner.jpg">
<tr>
<td width="120" bgcolor="#000000"><img src="Assets/colourseabees2.jpg" width="120" height="120"></td>
<td width="926" height="120" align="right" valign="top" background="Assets/ocean_banner2.jpg"><font color="#FFFFFF" size="6" face="Georgia, Times New Roman, Times, serif"><em>Angling
for Conservation</em></font></td>
</tr>
</table>
<img src="Assets/spacer.gif" width="1" height="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td height="25"> <table width="100%" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#000000">
<tr>
<td height="30"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Assets/nvbar_home.jpg',1)"><img src="Assets/nvbar_home_yellow.jpg" name="Home" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Meetings','','Assets/nvbar_meetings.jpg',1)"><img src="Assets/nvbar_meetings_yellow.jpg" name="Meetings" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Photo','','Assets/nvbar_Photo-Gallery.jpg',1)"><img src="Assets/nvbar_Photo-Gallery_yellow.jpg" name="Photo" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Brag','','Assets/nvbar_brag.jpg',1)"><img src="Assets/nvbar_brag_yellow.jpg" name="Brag" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Forums','','Assets/nvbar_forums.jpg',1)"><img src="Assets/nvbar_forums_yellow.jpg" name="Forums" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','Assets/nvbar_links.jpg',1)"><img src="Assets/nvbar_links_yellow.jpg" name="Links" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rules','','Assets/nvbar_Rules.jpg',1)"><img src="Assets/nvbar_Rules_yellow.jpg" name="Rules" width="120" height="25" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','Assets/nvbar_contact.jpg',1)"><img src="Assets/nvbar_contact_yellow.jpg" name="Contact" width="120" height="25" border="0"></a></td>
</tr>
</table></td>
</tr>
</table>
<img src="Assets/spacer.gif" width="1" height="1">
<table width="100%" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr valign="top">
<td width="151" height="100%" bgcolor="#FFFFFF"> <table width="150" height="100%" cellpadding="5" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="120" height="74" valign="top" nowrap bgcolor="#000000"> <p><font color="#FFFF99" size="2" face="Arial, Helvetica, sans-serif">Outdoor
Program</font><font color="#FFFF99" size="2"><br>
<br>
<font face="Arial, Helvetica, sans-serif">Records Category A<br>
<br>
Records Category B<br>
<br>
Score Sheet</font></font></p>
<p><font color="#FFFF99" size="2" face="Arial, Helvetica, sans-serif">About
Us </font></p>
<p><font color="#FFFF99" size="2" face="Arial, Helvetica, sans-serif">Membership
Form </font></p>
<p><font color="#FFFF99" size="2" face="Arial, Helvetica, sans-serif">Club
Magazine </font></p></td>
[edited by: tedster at 8:57 pm (utc) on Dec. 4, 2006]
[edit reason] put code in a box [/edit]
I am not going to even try going into major explanations here, but I do suggest you look into CSS, it will be worth your time.
Meanwhile, if you remove the gif altogether, and just put this above the </head> tag of your page and make the other edit below, it should do the trick.
Above </head> put:
<style type="text/css">table.spaced {margin-bottom:1px;}</style>
Then edit the table tag of what ever table you want to have a space below from:
<table width="100%" ..... background="Assets/ocean_banner.jpg">
To this:
<table class="spaced" width="100%" ..... background="Assets/ocean_banner.jpg">
That table will then have a 1px margin below it.
I think I will go and learn how to apply CSS properly to my pages. It seems like the way to go.
Thanks again.
Dave
