41 users online (0 members and 41 guests)  


  Results 1 to 2 of 2

Related

  1. One pixel off in IE - center div    Forum: CSS Forum
    Replies: 1
  2. Mysterious 1 pixel border around jpg's    Forum: CSS Forum
    Replies: 3
  3. OS differences in CSS positioning    Forum: CSS Forum
    Replies: 2
  4. OS differences in CSS positioning    Forum: General Discussion
    Replies: 0
  1. #1
    demon_jr's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2003
    Posts
    3

    Question Are there pixel differences in IE and Mozilla?

    Hi everyone,

    I am just learning CSS and how to use Positioning. When I created a sample web page, the positioning was different for IE and Mozilla. It was off by a few pixels.

    Please refer to the CSS at the bottom.

    The space between the .nav box and the .center box does not appear to be the same in both browsers.

    In addition, right margin of the .top box appears differently in both browsers.

    What is the problem?

    The CSS I used follows:

    body { background-color: white;
    color: black;
    font-family: verdana, sans-serif;
    margin: 0em;
    }

    .top { background-color: #006699;
    font-weight: bold;
    color: white;
    position: absolute;
    top: 40px;
    left: 0px;
    width: 400px;
    }

    .nav { position: absolute;
    top: 95px;
    left: 0px;
    font-size: 75%;
    border-style: dotted;
    border-width: 1px;
    width: 100px;
    }

    .center { position: absolute;
    top: 95px;
    left: 105px;
    border-style: solid;
    border-width: 1px;
    width: 300px;
    }

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi demon.

    The difference probably lies in the differing ways that the two browsers treat the 'box model'.

    You didn't say what version of IE you are running, but they are all pretty bad, especially 5.*.

    The correct way of treating a box , for example, is if you have a box 500px wide, and you put a border around it of 2px to a side. This box should now be 504px wide, as a border is defined as being around the box.

    Internet Explorer makes the box smaller and then puts the border round it, so it remains 500px. This is incorrect.

    thats just an example, but IE is riddled with this kind of thing.

    For a good explanation of the faults of IE's box model, and a great 'hack' to get around it -

    http://alistapart.com/stories/tohell/
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread