another thing, if i wrap each anchor in a <div></div> then it works fine... or if i add a style display:block to the anchor, then everything displays the way it should...

regards
jd

You need the <div>. Even if you tweak the CSS, different browsers will react differently. I'd strongly suggest using a <div> anyway, as it gives you a great deal more control.

if i add a style display:block to the anchor, then everything displays the way it should...

It's a common issue in the way standards mode works, compared to quirks mode. See [webmasterworld.com...] for more.

The deal here is that an <img> element is an inline element by default. That means, in standards mode, that the images are aligned to the text baseline. This leaves space below the baselie for the descenders of any text -- hence the gap that you see.

Though I hate looking at this style of formatting, it does avoid the whitespace problem:

<div id="galleryNav" style="width:30px; height: 180px; margin: 10px 0px 0px 0px; float: left;"
><a href="#"><img src="nav/gallery_1_1.gif" name="roGallery1" border="0" id="roGallery1" /></a
><a href="#"><img src="nav/gallery_2_0.gif" name="roGallery3" border="0" id="roGallery3" /></a
><a href="#"><img src="nav/gallery_3_0.gif" name="roGallery3" border="0" id="roGallery3" /></a
><a href="#"><img src="nav/gallery_4_0.gif" name="roGallery4" border="0" id="roGallery4" /></a
><a href="#"><img src="nav/gallery_5_0.gif" name="roGallery5" border="0" id="roGallery5" /></a
><a href="#"><img src="nav/gallery_6_0.gif" name="roGallery6" border="0" id="roGallery6" /></a
></div>

is there a way to make a new line in the code that doesnt create a space in the layout?

New-lines / spaces / tabs will always collapse to a single space in the layout, although as tedster points out, this is not really the problem in this instance... you are getting an additional horizontal gap beneath each image.

However, in IE6 those new-lines do 'appear' to be the problem, as pinterface points out, you can remove the new-lines to sort the problem (in IE6) - but this won't work in FF, Opera... (Strict DOCTYPE) (In some ways this (IE6) appears logical to me... the text-node is being removed and therefore there should be no text baseline?!)

You can also sort the problem in FF and Opera by using a Transitional DOCTYPE, and still keep the new-lines in the code.

As illustrated here...
[developer.mozilla.org...]

To illustrate tedsters point you could set:

<img style="vertical-align:bottom;"...

to alter the images default of aligning to the baseline in strict mode. This will work in IE6, FF and Opera.

Experiment... To minimise the effect of the image sitting on the baseline, you could set

font-size:1px;

on your galleryNav - this reduces the space taken up by the (non-existent) 'descenders' and therefore reduces the space between your images. This is enough to sort the problem in IE6, but in FF and Opera there is still a slight gap.

another thing, if i wrap each anchor in a <div></div> then it works fine... or if i add a style display:block to the anchor, then everything displays the way it should...

Only in IE6 (not sure about IE7...?) - in FF and Opera this has no effect in Strict mode. You need to set

display:block

on the img tag for it to work cross-browser.

(I've just realised that most of these points are mentioned in tedsters link also, but hey :)