none
Margin Left IE vs Mozilla RRS feed

  • Question

  • I am using an unordered list to create a navigation structure in the left colum but Mozilla renders this differently than IE by about 50 pixels when I use "margin-left: 0px;" I would like the margin to be all the way to the left in Mozilla but can't seem to achieve that. I am using the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    .newStyle1 {
    margin-left: 0px;
    }
    </style>
    </head>

    <body>

    <ul class="newStyle1">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ul>

    </body>

    </html>

    Any ideas on how to do this would be appreciated.

    Friday, March 28, 2008 7:37 PM

Answers

  • Add a padding-left setting to the css like this:
    .newStyle1 {
    margin-left: 0px;
    padding-left:15px;
    }

    FF has a default left padding of 40 px

    FrontPage MVP
    Saturday, March 29, 2008 12:35 AM

All replies

  • Don't forget, there is a margin that precedes the one you are setting. What you are telling the browser to do is make sure that the unordered list (<ul>) has a zero margin to the left of it's parent. That's the key here, is that the tags are done in a hierarchical manner. So, you have a zero left margin but still have indentation, which is correct because it's a zero margin from the left margin of the <body> element. The page itself has a margin so you need to set a margin style on the <body> element to get rid of the page's margin. How much of a margin the browsers will give by default is up to them and this could be where you are seeing your discrepancy.
    Friday, March 28, 2008 7:44 PM
  • Thanks for the reply Mark. I added a style for the body and that moved it about 10px more to the left so I am assuming that the default left margin in the Mozilla browser must be about 40px from the left of the screen as opposed to IE's 0 px which places it right up to the edge of the screen.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    .newStyle1 {
    margin-left: 0px;
    }
    body {
    margin-left: 0px;
    }
    </style>
    </head>

    <body>

    <ul class="newStyle1">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ul>

    </body>

    </html>

    This being the case, I would then have to design the page based on the Mozilla Browser left margin and move everything over to the right of the unordered list by about 40 px in order to make them display the same. Is my thinking on this correct?

    Friday, March 28, 2008 8:31 PM
  • Add a padding-left setting to the css like this:
    .newStyle1 {
    margin-left: 0px;
    padding-left:15px;
    }

    FF has a default left padding of 40 px

    FrontPage MVP
    Saturday, March 29, 2008 12:35 AM
  • Thanks Steve, that did it !!!! Had me going crazy there for a while :-)
    Saturday, March 29, 2008 2:18 AM