Spaces between navigation buttons

[Golf Tee Warehouse]

I am working on the naviagtion bar but am unable to remove a 4-pixel wide space between each button. I would like the right edge of one button to be in contact with the left edge of the next button to form a seemless bar.
I have looked through various templates looking for a border or padding value of 2 but cannot find the culprit.
I am using the Smart theme.

Below is a link to a page containing the navigation bar (top right hand corner)

http://www.golfteewarehouse.co.uk/acatalog/index.html

[AndrewPK]

you have about 4-5 spaces in the HTML used to make the nav bar between the </b> at the end of each image and the <b> of the next one,

removing them in the In-line HTML editor in firefox seems to get rid of the white spaces, so the tags should read .....</b><b>.... not ...</b> </b>

or for the full code

<td align="right"><img src="LeftNavBar.gif" height="26" width="47"><b><a href="../index.html" target="_parent" class="actxxsmall" onmouseover="SwapImage('hnavb_home','homeRollover.gif')" onmouseout="RestoreImage()"><span class="actxxsmall"><img src="http://www.golfteewarehouse.co.uk/acatalog/home.gif" alt="Home" name="hnavb_home" border="0" height="26" width="86"></span></a></b><b><a href="info.html" target="_self" class="actxxsmall" onmouseover="SwapImage('hnavb_info','infoRollover.gif')" onmouseout="RestoreImage()"><span class="actxxsmall"><img src="http://www.golfteewarehouse.co.uk/acatalog/info.gif" alt="Terms &amp; Conds" name="hnavb_info" border="0" height="26" width="75"></span></a></b><b><a href="http://www.wholesalegolftees.co.uk/cgi-bin/mf000001.pl?ACTION=SHOWFORM" target="_self" class="actxxsmall" onmouseover="SwapImage('hnavb_mail','contactusRollover.gif')" onmouseout="RestoreImage()"><span class="actxxsmall"><img src="http://www.golfteewarehouse.co.uk/acatalog/contactus.gif" alt="Contact Us" name="hnavb_mail" border="0" height="26" width="75"></span></a></b><b><a href="sitemap.html" target="_self" class="actxxsmall" onmouseover="SwapImage('hnavb_sitemap','SiteMapRollover.gif')" onmouseout="RestoreImage()"><span class="actxxsmall"><img src="http://www.golfteewarehouse.co.uk/acatalog/SiteMap.gif" alt="Site Map" name="hnavb_sitemap" border="0" height="26" width="98"></span></a></b></td>

just replace the table cell (<td> - </td>) that contains your nav bar with that, and i think that should work

[Golf Tee Warehouse]

Thanks,

But any ideas how to remove them as I although I can see the spaces in the finished HTML and don't see which template is producing them.

In act_primary.html I have

    <td align="right"><img src="LeftNavBar.gif" width="47" height="26">NETQUOTEVAR:NAVBHOME 
      NETQUOTEVAR:NAVBINFO NETQUOTEVAR:NAVBMAIL NETQUOTEVAR:NAVBSITEMAP 
      <!-- NETQUOTEVAR:FOOTERGUIDE&nbsp; -->
    </td>

In Act_NavigationItem.html I have

<!-- NavigationImage HTML begin -->
<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP>
<!-- NavigationImage HTML end -->

and in Act_NavigationImage I have:

NETQUOTEVAR:TEMPLATEBEGINXML 
<B><A HREF="NETQUOTEVAR:NAVLINK" TARGET="NETQUOTEVAR:NAVTARGET" class="actxxsmall" NETQUOTEVAR:MOUSEOVERCALL><span class="actxxsmall">NETQUOTEVAR:NAVIMAGE</span></A></B>
NETQUOTEVAR:TEMPLATEENDXML

[AndrewPK]

try removing the spaces between the navigation items on your act_primary

so it reads

<td align="right"><img src="LeftNavBar.gif" width="47" height="26">NETQUOTEVAR:NAVBHOMENETQUOTEVAR:NAVBINFONETQUOTEVAR:NAVBMAILNETQUOTEVAR:NAVBSITEMAP<!-- NETQUOTEVAR:FOOTERGUIDE&nbsp; --></td>

I would guess its the spaces between the NETQUOTEVAR elements in the Act_primary that are generating the spaces in the result,
so removing them their should stop them being created at the end

[Golf Tee Warehouse]

I have tried that but it makes no difference.

[fleetwood]

try adding the following to actinic.css

a {
padding: 0;
margin: 0;
border: 0;
}

[Golf Tee Warehouse]

Does the code need to be added anywhere in particular.
I have not edited a css file before and have added to the end and uploaded it but without any effect.

[fleetwood]

anywhere in the css would do.

I can see you have already done that, and it dosen't appear to work!

it was a longshot - on the guess that the browser may be adding a default padding between your anchors (a href elements).

other than that, I can't see where the extra space is coming from, other than what has already been suggested, and seeing if you can't lose that " " space which is in your html, between each button.

that shouldn't really make a difference, but you never know!

[fleetwood]

Just to cover all bases, try substituting the style I first mentioned for:


a:link
a:visited
a:hover
a:active {
padding: 0;
margin: 0;
border: 0;
}

[Golf Tee Warehouse]

Tried but no improvement,

Thanks for the suggestions.
I will have another look in the morning.

[fleetwood]

If its your own code, or you know how to do it, you may want to try having each button in its own <td></td>, rather than the whole lot in one.

[Golf Tee Warehouse]

Rollover effect no longer working

Thanks Martin,

That has overcome the problem, although I have just noticed that the rollover effect is no longer working, any ideas why.

[Golf Tee Warehouse]

All okay now,

I had left the original navigation buttons in place while I inserted new ones in individual table cells and Actinic didn't seem to like having both sets of buttons on the same page.
I have now removed the original buttons and the rollovers now work again.

[fleetwood]

Good to see you have it working Darren.
Happy to have helped.