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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Oddity with UL margin-left in IE

    If no left margin is set in IE then the unordered list displays fine. However, if I set the left margin to "0px" using CSS the list runs off the left edge of the page.

    In Firefox I can set the left margin to "-10px" and have the UL element move over 10 pixels to the left. To move it to the same position in Internet Explorer I have to set the left margin to "30px". This is a pretty huge difference.

    How is it that IE treats a positive 30 pixel margin as negative? Am I doing something wrong here?

    Also, is the treatment of the left margin of the UL element uniform in all other browsers except IE?

  • #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
    No its not uniform in all browsers. You'll have to play around with the padding and margin something like margin-left:-7px; and padding-left 15px should work, its been a while.

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have it looking right in Firefox 1.5, Internet Explorer 6, and Safari 2. I have yet to test it in Opera but that shouldn't be a problem.

    Both Firefox and Safari display it as expected with a negative margin producing a negative shift. If Opera renders it the same then that means IE is the only oddball out.

  • #4
    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
    Does your ul happen to be floated to the left or right?

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Does your ul happen to be floated to the left or right?
    What do you mean? Currently in Firefox and Safari the UL element moves slightly to the left with "margin-left" set to "-10px" and the same occurs in IE if "margin-left" is set to "30px". Without the margin setting the UL element moves its contents to the right of the edge of the window. With the margin set, that shift to the right is reduced somewhat so that it moves back towards the edge of the window.

  • #6
    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
    What I mean is do you have float:left; or float:right; on the styles of your ul?

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    What I mean is do you have float:left; or float:right; on the styles of your ul?
    Nope.

  • #8
    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
    Can you post your html and CSS please?

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    <style>
         ul {
              margin-left:-10px
         }
    </style>
    <ul>
         <li>list item line 1</li>
         <li>list item line 2</li>
    </ul>

  • #10
    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
    A ul also has a default padding and its not the same in IE as it is in other browsers. It also has a default top margin but not in IE. IE by default has a page margin on the body as well.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>&nbsp;</title>
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    }
    ul {
    margin:0 0 0 -10px;
    padding:0;
    }
    </style>
    <body>
    <ul>
         <li>list item line 1</li>
         <li>list item line 2</li>
    </ul>
    </body>
    </html>


  •  

    Posting Permissions

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