View Full Version : Help! Menu bar image spacing issue

09-22-2009, 03:56 PM
I sliced my menu bar up in photoshop and am placing the image files in a column using the insert image rollover feature... In dreamweaver the images are lining flush with each other but when I view in internet explorer there is a space between the images causing the menu bar to not line up correctly. How do I fix this? Your help is much appreciated.... I have wasted over an hour trying to fix it.... I set up a nesting table trying to fix it and it did but then when I tried to add additional rows it kept moving my menubar in though I coded it valign=top (I think I did it correctly) but I am a beginner.

See it here http://www.octoberhill.com/candystoresporthorses/main2.html

This is what I want it to look like (here it is setup with a table inside BUT I cant not add rows to this without the menu bar shifting downwards) (see link below)


09-22-2009, 04:10 PM
Try using an unordered list for your menu items, controlled with CSS. Much easier to get consistency cross-browser. Looks fine in Chrome by the way.

09-22-2009, 04:21 PM
I don't know how to do CSS yet :-( is there another way to fix i?

09-22-2009, 04:32 PM
errrrm....not really. CSS is the only correct way to build a website I'm afraid. Anyone else on here will tell you that. Sorry :(

09-22-2009, 09:55 PM
I have to side with corrosive here.

BUT, if you insist (no guarantees ), you might try deleting all the spaces and returns between your menu items so that the end of one (</a>) butts up directly against the beginning of the next (<a href+"etc).

In your case:

<a href="http://www.octoberhill.com/candystoresporthorses/home.html (http://www.dreamweaverclub.com/forum/view-source:http://www.octoberhill.com/candystoresporthorses/home.html)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','homealt.jpg',1)"><img src="home.jpg (http://www.dreamweaverclub.com/forum/view-source:http://www.octoberhill.com/candystoresporthorses/home.jpg)" name="Image25" width="173" height="38" border="0"></a><a href="http://www.octoberhill.com/candystoresporthorses/collection.html (http://www.dreamweaverclub.com/forum/view-source:http://www.octoberhill.com/candystoresporthorses/collection.html)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','collectionalt.jpg',1)"><img src="collection.jpg (http://www.dreamweaverclub.com/forum/view-source:http://www.octoberhill.com/candystoresporthorses/collection.jpg)" name="Image26" width="173" height="57" border="0"></a>

IE is notorious for adding space between images if there any space between them in the code.

If that works, you'll still encounter other issues and we'll still recommend learning to use CSS.

I feel like such an enabler!