KDLA
03-22-2006, 09:11 AM
Hi -
I've got coding such as this:
<div style="float: right; margin-right: 0; padding-right: 150px; margin-top: 33px; padding-bottom: 0;"><a href="#" OnMouseOver="move_in('image4','bkfair-contact-2.gif')"
OnMouseOut="move_out('image4','bkfair-contact.gif')"><img src="bkfair-contact.gif" alt="contact us" style="margin: 0; padding: 0; vertical-align: bottom; border: 0;" name="image4"/></a><a href="#" OnMouseOver="move_in('image5','bkfair-news-2.gif')"
OnMouseOut="move_out('image5','bkfair-news.gif')"><img src="bkfair-news.gif" alt="news" style="margin: 0; padding: 0; vertical-align: bottom; border: 0;" name="image5"/></a><a href="#" OnMouseOver="move_in('image6','bkfair-calendar-2.gif')"
OnMouseOut="move_out('image6','bkfair-calendar.gif')"><img src="bkfair-calendar.gif" alt="calendar" style="margin: 0; padding: 0; vertical-align: bottom;border: 0;" name="image6"/></a>
</div>
When I try to clean it up by inserting breaks in the coding (by hitting "enter" to visually separate the link from the image tag), the browser adds spaces (about 3px in both FF and IE) between the images. Does anyone know why this occurs? I've checked the coding, and no spaces are in it, only breaks. (FYI - I'm using Dreamweaver MX, code view.)
It sure would be helpful to be able to break this code up.... I've tried adding padding and margin styles to the images to prevent this from happening, but that has had no effect. Can anyone explain this inconsistency?
Thanks,
KDLA
I've got coding such as this:
<div style="float: right; margin-right: 0; padding-right: 150px; margin-top: 33px; padding-bottom: 0;"><a href="#" OnMouseOver="move_in('image4','bkfair-contact-2.gif')"
OnMouseOut="move_out('image4','bkfair-contact.gif')"><img src="bkfair-contact.gif" alt="contact us" style="margin: 0; padding: 0; vertical-align: bottom; border: 0;" name="image4"/></a><a href="#" OnMouseOver="move_in('image5','bkfair-news-2.gif')"
OnMouseOut="move_out('image5','bkfair-news.gif')"><img src="bkfair-news.gif" alt="news" style="margin: 0; padding: 0; vertical-align: bottom; border: 0;" name="image5"/></a><a href="#" OnMouseOver="move_in('image6','bkfair-calendar-2.gif')"
OnMouseOut="move_out('image6','bkfair-calendar.gif')"><img src="bkfair-calendar.gif" alt="calendar" style="margin: 0; padding: 0; vertical-align: bottom;border: 0;" name="image6"/></a>
</div>
When I try to clean it up by inserting breaks in the coding (by hitting "enter" to visually separate the link from the image tag), the browser adds spaces (about 3px in both FF and IE) between the images. Does anyone know why this occurs? I've checked the coding, and no spaces are in it, only breaks. (FYI - I'm using Dreamweaver MX, code view.)
It sure would be helpful to be able to break this code up.... I've tried adding padding and margin styles to the images to prevent this from happening, but that has had no effect. Can anyone explain this inconsistency?
Thanks,
KDLA