Hey guys. This is the first time I have attempted to do a navigation bar with roll-over images; but even after following several tutorials I just couldn't do it right. It screwed up the whole layout of the whole banner or it just did not work at all!

My question is; what is the easiest, most browser compatible and recomended way of doing this. Any help will be greatly appreciated because it's something I really want to include in this layout.

Here is the banner in question; http://www.shadowedcorner.co.uk/furr.../blog/test.htm
The images are both already sliced and prepared and are in place with tables. It shows how the buttons will look when highlighted.

If you are unsure of what I am refering to and want to achieve have a look at the navigation bar here; http://www.newgrounds.com/

I am sorry if this does not belong in the HTML part of the forum, but since I was unsure of what I am going to need I thought I would post it here.

Thanks in advance

I usually use the following for my rollovers:

<img border="0" height="xx" width="xx" alt="" src="image_normal.gif" onmouseover="this.src='image_over.gif'" onmouseout="this.src='image_normal.gif'" />

Ah yes; that worked great thanks.
Well It worked fine in all other browsers appart from IE. It seems that for some reason IE does not like my tables and is leaving large white gaps between the images.
Is there any way of fixing this?

Can we see the code ???

Try using a <br /> tag after the image -or- use this inside the img tag: style="display: block;"

Originally Posted by LadynRed

Can we see the code ???

The banner was placed on a page which I mentioned in my first post.
http://www.shadowedcorner.co.uk/furr.../blog/test.htm

Originally Posted by mgraphic

Try using a <br /> tag after the image -or- use this inside the img tag: style="display: block;"

The display: block; trick worked great. Thanks!