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 9 of 9
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts

    Firefox and IE discrepancy with margin

    I am trying to get the two beasts (and Firefox is the bigger beast today) to render the same thing.

    Here is my test code:

    *************************

    <html>

    <head>
    <style>
    {
    margin: 0;
    padding: 0;
    }
    </style>
    </head>

    <body bgcolor="#800000">
    <div align="center">
    <center>
    <table border="1" style="border-collapse: collapse" bordercolor="#111111" width="98%" height="500">
    <tr>
    <td bgcolor="#FFFFEE">
    </div>
    </td>
    </tr>
    </center>
    </div>
    </table>
    </body>

    </html>

    *************************

    Looks JUST the way I want it in IE. How do I get Firefox to do EXACTLY the same?

    OK - it's probably IE's fault, but there has to be a way.

    I like the way IE does it from my code, NOT the way Firefox adds yards to the top margin.

    Any ideas?

    Many thanks in advance,

    Terry

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    give this a try
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    <style type="text/css">
    html, body {
    margin:0px;
    padding:0px;
    background-color:#800000;
    }
    #content {
    margin:auto;
    width:98%;
    height:500px;
    margin-top:20px;
    }
    #table1 {
    border-collapse: collapse;
    height:500px;
    width:100%;
    border:1px solid #111111;
    }
    #table1 td {
    background-color:#FFFFEE;
    }
    </style>
    </head>
    
    <body>
    <div id="content">
    <table id="table1">
    <tr>
    <td></td>
    </tr>
    </table>
    </div>
    </body>
    
    </html>
    Last edited by _Aerospace_Eng_; 02-04-2005 at 11:27 PM.

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    Thank you Aerospace - I have learned a lot and it works.

  • #4
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    I'm having the same problem with this site:http://www.oasi.org.mt

    I can't understand why firefox adds witdh to the top margin

    any help will be much apprecioated...

    regards

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please be more specific on your issue. Also I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". Tables are NOT for page layout.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your reply.

    I already read the article and intend to re-code the whole site in CSS in due course but I need a quick fix before the festive season....

    My problem is that I need the menu (which is and iframe within a layer) placed in a specific position. In IE the postioning is as desired but not in Firefox. My guess is that Firefox is adding some pixels to the top margin thus pushing the contents of the page down....I came to this conclusion as the space above the top picture is bigger in Firefox.

    Any help is much appreciated.

    Thanks

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Change this-

    Code:
    <style>
    {
    margin: 0;
    padding: 0;
    }
    </style>
    to this -

    Code:
    <style type = "text/css"> 
    *{
    margin: 0;
    padding: 0;
    }
    </style>
    The * is known as the universal selector. The whole resets all padding and margins to zero. Not all the browsers start from the same place!

    Look here.

    View source for code.

    This is the significant change.

    Code:
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    </style>
    Frank
    Last edited by effpeetee; 12-16-2008 at 11:15 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    gfarr (12-16-2008)

  • #8
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your insight.

    Your solution is great however it created other layout problems, since some of the tables i'm using have padding set...so I removed the
    Code:
    padding: 0;
    and it worked fine...

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by gfarr View Post
    Thank you for your insight.

    Your solution is great however it created other layout problems, since some of the tables i'm using have padding set...so I removed the
    Code:
    padding: 0;
    and it worked fine...
    Really you should leave the code as I put it, and reset the padding on the tables. But I understand that your version is easier and may be satisfactory, however, it could cause problems on other browsers.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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