SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin-left=0px is not working in IE8

    The css property margin-left=0px is not working in IE8.

    It is working fine as expected in IE6.

    Please reply if you have any idea, how to make it fix it in IE8?


    Mnay Thanks
    Abdul Gafar

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Abdul, your syntax is wonky you don't use = an example of what it might look like;
    Code CSS:
    p {
      margin-left : 0px;
    }
    If written correctly.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Robert,

    Thank you for your quick response.
    I typed wrongly in my post.

    I am using "magin-left:0px" for the html tag <ul>

    It is working fine in ie6 (the alignment is working as expected).
    However it is not working as expected in ie8.

    Please reply.

    Many Thanks,
    Abdul

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,828
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by abdul.gafar View Post
    I typed wrongly in my post.

    I am using "magin-left:0px" for the html tag <ul>

    It is working fine in ie6 (the alignment is working as expected).
    However it is not working as expected in ie8.
    It won't work any better with the wrong spelling than the wrong syntax - but I'm guessing that's just a typo when you've copied it here rather than a mistake in your original?

    You might need to give us a link to a page where it isn't working, so we can see what else is happening on the page and how the other elements are being laid out.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Uls have either a default left margin or a default left padding depending on the browsers concerned so you need to address both.

    Code:
    ul{margin-left:0;padding-left:0}
    Also note that some browsers also ad a top and bottom margin and some only add a bottom margin so you need to address these on most block elements also (not needed for divs but needed for h1,h2,h2, p, form ol,ul etc... ) .

  6. #6
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rober/Steve,

    Thanks for your reply.

    I have no access to the production system as it needs logins.
    Following is the code.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    
    <style type="text/css">
    
    .history 
      {width:100&#37;; height:100%; margin-left:4px; background-color:#F5F5F5;}
    .history-items  
               {margin:0px; background-color:#F5F5F5; font-family:Arial, Helvetica, sans-serif; font-size:60%; padding-bottom:50px; padding-top:3px;}
    
    .history-items ul           {height:100%; margin-left:2px; margin-top:5px; margin-bottom:0px; }
    
    .history-items li            {list-style:none; font-weight:bold; color: #CC0000; background-color: transparent; padding-top:4px}
    
    .history-items li a:link                    {color: #CC0000;}
    .history-items li a:visited                {color: #CC0000;}
    .history-items li a:hover                  {color: #990000;}
    
    .history-items li div         {font-weight: normal; background-color: #F5F5F5; padding-bottom:4px}
    .history-items li div a:link                 {color: #CC0000;}
    .history-items li div a:visited            {color: #CC0000;}
    .history-items li div a:hover               {color: #990000;}
    
    </style>
    
    
    <body class="history">
                <h1><span/>History</span></h1>
                    
                    <div class="history-items">
                            <ul>
                 <li>
                                        <div> <a href=""> Order1   </a> </div>
                                   </li>
                                    
                                    <li>
                                        <div> <a href="">order 2  </a> </div>
                  </li>
    
                                       <li>
                                        <div> <a href=""> order 3 </a> </div>
                      </li>
              </ul>
                    </div>
                   
        </body>
    
    </BODY>
    </HTML>
    The above code is working fine in ie6 with respect to margin property.
    It is not showing the similar layour in ie8.

    I hope it helps to find out the problem.

    Waiting for your reply.

    Many Thanks,
    Abdul
    Last edited by Paul O'B; Oct 4, 2010 at 07:40. Reason: Code tags added

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by abdul.gafar View Post
    Rober/Steve,

    Thanks for your reply.
    Ignore me then I don't care (and welcome to Sitepoint by the way )

    The answer is as I have given already above and you need to remove the left padding here:

    Code:
    .history-items ul {padding-left:0}
    It's not just ie8 that will be wrong but most other browsers only so don't just check only in IE as it has under half the market share now (if stats can be believed).

    Actually the doctype you are using above will force quirks mode in IE anyway and your example will actually show IE8 rendering mostly the same as IE6

    Use a full doctype with uri and these days you should really use a strict doctype.

    Transitional:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Strict:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    One last thing I notice you have a 100&#37; width here and 4px left margin.

    Code:
    .history {
        width:100%;
        height:100%;
        margin-left:4px;
        background-color:#F5F5F5;
    }
    How wide do you think that will make the element ?

    Yes it will be 4px too big to fit anywhere and will cause a horizontal scrollbar. Remove the width from the body and it should be ok.

    You wouldn't usually want a 4px margin on the body anyway and would be easier to apply to inner elements instead.

  8. #8
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Many Thanks.
    It is working fine.

    Thankd you
    -Abdul


Bookmarks

Posting Permissions

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