FF adding margins to images and wrapping nav bar

[davidcroda]

Ok. I am using a css layout for my website. I have four rollover nav bars in a div called topNav. Here is the code for them.

<div id="navTOP">
<div id="Home_">
<a href="Default.aspx"
onmouseover="changeImages('Home', 'images/Home-03.jpg'); return true;"
onmouseout="changeImages('Home', 'images/Home.jpg'); return true;"
onmousedown="changeImages('Home', 'images/Home-03.jpg'); return true;"
onmouseup="changeImages('Home', 'images/Home-03.jpg'); return true;">
<img name="Home" id="Img1" src="images/Home.jpg" width="148" height="23" alt="" /></a></div>
<div id="Health-Benefits_">
<a href="HealthBenefits.aspx"
onmouseover="changeImages('Health_Benefits', 'images/Health-Benefits-05.jpg'); return true;"
onmouseout="changeImages('Health_Benefits', 'images/Health-Benefits.jpg'); return true;"
onmousedown="changeImages('Health_Benefits', 'images/Health-Benefits-05.jpg'); return true;"
onmouseup="changeImages('Health_Benefits', 'images/Health-Benefits-05.jpg'); return true;">
<img name="Health_Benefits" id="Health_Benefits" src="images/Health-Benefits.jpg" width="197" height="23" alt="" /></a></div>
<div id="Jalapeno-Relish_">
<a href="JalapenoRelish.aspx"
onmouseover="changeImages('Jalapeno_Relish', 'images/Jalapeno-Relish-07.jpg'); return true;"
onmouseout="changeImages('Jalapeno_Relish', 'images/Jalapeno-Relish.jpg'); return true;"
onmousedown="changeImages('Jalapeno_Relish', 'images/Jalapeno-Relish-07.jpg'); return true;"
onmouseup="changeImages('Jalapeno_Relish', 'images/Jalapeno-Relish-07.jpg'); return true;">
<img name="Jalapeno_Relish" id="Jalapeno_Relish" src="images/Jalapeno-Relish.jpg" width="240" height="23" alt="" /></a></div>
<div id="Give-Feedback_">
<a href="ContactUs.aspx"
onmouseover="changeImages('Give_Feedback', 'images/Give-Feedback-09.jpg'); return true;"
onmouseout="changeImages('Give_Feedback', 'images/Give-Feedback.jpg'); return true;"
onmousedown="changeImages('Give_Feedback', 'images/Give-Feedback-09.jpg'); return true;"
onmouseup="changeImages('Give_Feedback', 'images/Give-Feedback-09.jpg'); return true;">
<img name="Give_Feedback" id="Give_Feedback" src="images/Give-Feedback.jpg" width="215" height="23" alt="" /></a><br />
</div>
</div>

I have
* { margin:0px; padding:0px; } at the top to reset margins, etc., but in firefox the site looks like this
<snip>
with padding around the images messing up the nav bar, but in ie 7 it looks like this
<snip>
arranging everything correctly. the css for those four divs is

#Home_ {
display:inline;
width:148px;
height:23px;
}

#Health-Benefits_ {
display:inline;
width:197px;
height:23px;
}

#Jalapeno-Relish_ {
display:inline;
width:240px;
height:23px;
}

#Give-Feedback_ {
display:inline;
width:215px;
height:23px;
}

any help is greatly appreciated! thanks!

[edited by: Robin_reala at 7:14 am (utc) on May 1, 2007]
[edit reason] Removed URLs as per TOS #13 [webmasterworld.com] [/edit]

[Xapti]

Interesting. You have the very same problem as this other guy: [webmasterworld.com...]
You cannot give widths to inline elements. Well I shouldn't say that... inline containers, since images (and in a sense, words, since they are inline elements as well, except their widths is based off the length of the word) can have widths set.
Realize that the only difference between a DIV and a SPAN is one is display:block, the other is display:inline (At least, AFAIK), so there's usually never much of a point of setting spans to display:block, or divs to display:inline.

Also, you can save a hell of a lot of code, and make the code prettier doing those image rollovers in CSS and not JS.
One of the simplest methods, is to just make an image with both rollover images one on top of the other, use it as the link's background image, and set the style to have background position display x pixels lower while hovered/active.

[edited by: Xapti at 7:40 am (utc) on May 1, 2007]