HTML - reducing gap between image and text

[paulbeckett]

Hi All

I have been working on my left hand nav on the homepage of www.kjbeckett.com and have almost got it the way I need it. However I have a query on something I am struggling with.

I have inserted an image (SHOP BY CATEGORY) at the top of the box containing the left hand nav but there is a big gap between the image and first line of text (Bangles). I think this is because of the <div>. Is there any way to reduce the gap (c. 10ox) without removing the <div>? I just cant figure it out!?!

This is the HTML:

<table width="160" border="1px" cellspacing="0" cellpadding="0" bgcolor="#EBEBE8" bordercolor="B8B8B8">
<tr>
<td>
<img name="accessoriesbycat" src="http://www.kjbeckett.com/acatalog/leftnav_bycat.gif" alt="">
<div id="navsite">
<ul class="highlighter">
<li><a href="http://www.kjbeckett.com/acatalog/mensbanglesbracelets.html">Bangles</a></li>


I have thought one way may be to overlay the image over the code (perhaps over some line breaks) as opposed to above it?!?

Kind regards

Paul
www.kjbeckett.com

[jont]

margin-bottom: -10px;

[paulbeckett]

Hi jont

margin-bottom: -10px;

Thanks. I have had a play with this and I'm not totally sure where I should use this. Presumably in the css file?

The image is at the very top of the table with the left hand nav code directly above it all the way to the bottom of the table. By using the margin-bottom: -10px; would this then push the entire contents upwards and close the gap?

Paul

[jont]

Yep -needs to go into the CSS file .... apply a class to the <img> tag (or if in a div you can set the img descender) .... this would have the effect of moving the starting point of the next element upwards by 10px (and consequently everything sitting beneath that)

You will need to experiment with the value and would also benefit from setting padding:0; also to level the field