View Full Version : Firefox and IE6

11-07-2008, 06:39 PM
Hi all,

I am trying to create a 1px gap between 2 images. In IE6, the gap looks fine but in Firefox, the gap looks a little bigger. I am using a DIV tag and external CSS sheet.

Here is the HTML:

<div id="spacer"></div>

Here is the external CSS:

#spacer {


Is there anything I need to add within the external sheet that Firefox will look the same as IE6 or IE 7? I have attached 2 images to show you the gap or spacer diferences.

Thanks in advanced!

11-07-2008, 06:42 PM

By the way, you're not really using an empty div for spacing, are you? If so, just add the padding to the image(s)/div(s) you're wanting spaced.

11-07-2008, 06:51 PM
Hi tomws!

Here is the revised html and external css.


<div id="nav">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','assets/buttons/botton_rest_roll.gif',1)"><img src="assets/buttons/botton_rest.gif" name="Image13" width="160" height="20" border="0" id="Image13" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','assets/buttons/botton_rest_roll.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','assets/buttons/botton_about_roll.gif',1)"><img src="assets/buttons/botton_about.gif" name="Image19" width="157" height="20" border="0" id="Image19" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','assets/buttons/botton_about_roll.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','assets/buttons/botton_menu_roll.gif',1)"><img src="assets/buttons/botton_menu.gif" name="Image15" width="157" height="20" border="0" id="Image15" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','assets/buttons/botton_contact_roll.gif',1)"><img src="assets/buttons/botton_contact.gif" name="Image16" width="157" height="20" border="0" id="Image16" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','assets/buttons/botton_gallery_roll.gif',1)"><img src="assets/buttons/botton_gallery.gif" name="Image17" width="157" height="20" border="0" id="Image17" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','assets/buttons/botton_survey_roll.gif',1)"><img src="assets/buttons/botton_survey.gif" name="Image18" width="165" height="20" border="0" id="Image18" /></a>



#nav {


The Firefox is still showing a bigger gap. Any other way to resolve this issue?


11-07-2008, 06:59 PM
First of all, add a doctype to your page. Transitional removes the standard hanging character space below <img>s.

Don't use margin-top to space things out, not yet, there's still major discrepancies b/n FF collapsing left and top margins (as w3 suggests) and IE not. Use padding-left and padding-top to ensure you get the spacing you need.

You can also set bottom spacing by adding height: Xpx; overflow: hidden; in the img container to ensure the container retains an exact height in all browsers.