Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Firefox and IE6

  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Firefox and IE6

    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:

    Code:
    <div id="spacer"></div>
    Here is the external CSS:

    Code:
    #spacer {
    padding-bottom:1px;
    
    }

    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!
    Attached Thumbnails Attached Thumbnails Firefox and IE6-firefox.jpg   Firefox and IE6-ie6.jpg  

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    margin:0;?

    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.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi tomws!

    Here is the revised html and external css.

    HTML:

    Code:
    <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>
    
    
    </div>

    CSS:


    Code:
    #nav {
    	text-align:center;
    	margin-top:1px;
    	margin-bottom:1px;
    
    }
    The Firefox is still showing a bigger gap. Any other way to resolve this issue?

    Thanks!

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •