Problem With Menu Buttons Created with Webstyle

I created a horizontal 3-button menu with Webstyle 3.

The height of the button graphics are exactly 60px. The buttons appear in the correct height, but there is a border space above and below the buttons which I do not want.

I want the buttons to fit exactly into a table cell which has a height of 60px.

How do I sove this problem? I attach the Webstyle code below.

Thank you in advance for your kind help.


Start of Webstyle3 code:

var clicked=""
var gtype=".gif"
var selstate="_over"
if (typeof(loc)=="undefined" || loc==""){
var loc=""
if (document.body&&document.body.innerHTML){
var tt = document.body.innerHTML.toLowerCase();
var last = tt.indexOf("buttonsanimated.js\"");
if (last>0){
var first = tt.lastIndexOf("\"", last);
if (first>0 && first<last) loc = document.body.innerHTML.substr(first+1,last-first-1);
}}}
document.write("<table border=\"0\" cellspacing=\"4\" cellpadding=\"0\"><tr>");
tr(false);
writeButton(loc+"","mypage1.html","mybutton1",100, 60,"","",0);
writeButton(loc+"","mypage2.html","mybutton2",100, 60,"","",0);
writeButton(loc+"","mypage3.html","mybutton3",100, 60,"","",0);
tr(true);
document.write("</tr></table>")
loc="";
function tr(b){}
function turn_over(name) {
if (document.images != null && clicked != name) {
document[name].src = document[name+"_over"].src;}}
function turn_off(name) {
if (document.images != null && clicked != name) {
document[name].src = document[name+"_off"].src;
}}
function reg(gname,name)
{if (document.images)
{
document[name+"_off"] = new Image();
document[name+"_off"].src = loc+gname+gtype;
document[name+"_over"] = new Image();
document[name+"_over"].src = loc+gname+"_over"+gtype;
}}
function evs(name){ return " onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}
function writeButton(urld, url, name, w, h, alt, target, hsp)
{ gname = name;
while(typeof(document[name])!="undefined") name += "x";
reg(gname, name);
tr(true);
document.write("<td>");
if (alt != "") alt = " alt=\"" + alt + "\"";
if (target != "") target = " target=\"" + target + "\"";
if (w > 0) w = " width=\""+w+"\""; else w = "";
if (h > 0) h = " height=\""+h+"\""; else h = "";
if (url != "") url = " href=\"" + urld + url + "\"";
document.write("<a " + url + evs(name) + target + ">");
if (hsp == -1) hsp =" align=\"right\"";
else if (hsp > 0) hsp = " hspace=\""+hsp+"\"";
else hsp = "";
document.write("<img src=\""+loc+gname+gtype+"\" name=\"" + name + "\"" + w + h + alt + hsp + " border=\"0\" /></a></td>");
tr(false);}

End of code

Hi Rwon, the Webstyle 3 code places the navbar within a table.

Code:

---

var clicked=""
 var gtype=".gif"
 var selstate="_over"
 if (typeof(loc)=="undefined" || loc==""){
 var loc=""
 if (document.body&&document.body.innerHTML){
 var tt = document.body.innerHTML.toLowerCase();
 var last = tt.indexOf("buttonsanimated.js\"");
 if (last>0){
 var first = tt.lastIndexOf("\"", last);
 if (first>0 && first<last) loc = document.body.innerHTML.substr(first+1,last-first-1);
 }}}
 document.write("<table border=\"0\" cellspacing=\"4\" cellpadding=\"0\"><tr>");
 tr(false);
 writeButton(loc+"","mypage1.html","mybutton1",100, 60,"","",0);
 writeButton(loc+"","mypage2.html","mybutton2",100, 60,"","",0);
 writeButton(loc+"","mypage3.html","mybutton3",100, 60,"","",0);
 tr(true);
 document.write("</tr></table>")
 loc="";
 function tr(b){}
 function turn_over(name) {
 if (document.images != null && clicked != name) {
 document[name].src = document[name+"_over"].src;}}
 function turn_off(name) {
 if (document.images != null && clicked != name) {
 document[name].src = document[name+"_off"].src;
 }}
 function reg(gname,name)
 {if (document.images)
 {
 document[name+"_off"] = new Image();
 document[name+"_off"].src = loc+gname+gtype;
 document[name+"_over"] = new Image();
 document[name+"_over"].src = loc+gname+"_over"+gtype;
 }}
 function evs(name){ return " onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}
 function writeButton(urld, url, name, w, h, alt, target, hsp)
 { gname = name;
 while(typeof(document[name])!="undefined") name += "x";
 reg(gname, name);
 tr(true);
 document.write("<td>");
 if (alt != "") alt = " alt=\"" + alt + "\"";
 if (target != "") target = " target=\"" + target + "\"";
 if (w > 0) w = " width=\""+w+"\""; else w = "";
 if (h > 0) h = " height=\""+h+"\""; else h = "";
if (url != "") url = " href=\"" + urld + url + "\"";
 document.write("<a " + url + evs(name) + target + ">");
if (hsp == -1) hsp =" align=\"right\"";
 else if (hsp > 0) hsp = " hspace=\""+hsp+"\"";
 else hsp = "";
 document.write("<img src=\""+loc+gname+gtype+"\" name=\"" + name + "\"" + w + h + alt + hsp + " border=\"0\" /></a></td>");
 tr(false);}

---

If you are also putting the navbar within a table this is most likely why you are seeing the "border space".

Do you need to use your table, or can you use the one provided within the Webstyle 3 code?

Hi Bill, thank you for your kind reply.

You are right about that. In my site's layout, I need to fit the Webstyle navbar into a [td] cell, which is part of a main table of 3 other cells in a row.

Is there any way I can solve my problem without changing my overall table structure? If not, then I may have no choice but do just that, as I do like the Webstyle script a lot.

You may try changing the cell spacing code within the Webstyle code

Code:

---

document.write("<table border=\"0\" cellspacing=\"4\" cellpadding=\"0\"><tr>");

---

by testing different values to see how the border space changes.

I have already done that before. It does not affect the top and bottom spaces, but only the button spacing is changed.

I'm sorry but I cannot see a way to keep the navbar intact and within your table without the border space. Perhaps someone with more experience with tables within a table can provide a solution.

Anyway, thank you for your kind help, Jim.