Odd, CSS Error

[mattyd]

Hi,

I am developing a simple site and have (after it being recommended) been using CSS to handle the homepage image display. The display consists of an array of 25 (95x95 px) images aligned to form one image. CSS has allowed me to display them just as I wanted (please see homepage link above). A minor problem exists now though. I have decided to add Javascript to the page so each image rolls over upon mouse contact-- simple. This works fine. (*NOTE: the website link is pre-Javascript, not the scripted version which contains the errors) But, ever since I've added JS, I am having an odd alignment problem. I have tried everything I can think of. The original non-JS works fine, and I do not see how adding JS would cause this problem.

Attached are two screenshots of the situation:

1) Before, without JS (lower-righthand image is placed correctly)
2) After JS (lower-righthand image is placed incorrectly)

Below is a relative code-snippet for each:

1)

<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

<!-- layer 5-->
<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

2)

<div class="thumbnail">  
<A href="#" onMouseOver="return changeImage18()" onMouseOut= "return changeImageBack18()" ><img name="shirtButton18" src="bombers.jpg" width="95" height="95" border="0" alt="javascript button"></A><br>
</div> 


<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

** Both, full code versions upon request

I hope I explained this well to some extent. Basically, the image (blocked in a red rectangle, "bottomLeftCorner.jpg", in the attached BMPs) is misaligned.

Thank-you in advance for any help.

Matty

[MidiMagic]

Something is shoving the whole bottom row of images to the right. The bottom right image (in the red rectangle) is then crashing into the text box, so it is displaced downward.

How are you positioning the images?

Why can't you use one large image?

[trudge]

It's been my experience that even though HTML is supposed to ignore white space, if you have a number of images you want to line up horizontally, you CANNOT have any hard returns in the code. That's right - if there is a new line in your code you might notice a small 'tick' or underscore between images. I don't know if this is your case, but it might be worth looking at.