Margin-left=0px is not working in IE8

HTML & CSS
1

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

Abdul, your syntax is wonky you don’t use = an example of what it might look like;

p {
  margin-left : 0px;
}

If written correctly.

3

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

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

Uls have either a default left margin or a default left padding depending on the browsers concerned so you need to address both.


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

Rober/Steve,

Thanks for your reply.

I have no access to the production system as it needs logins.
Following is the 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

7

Ignore me then I don’t care :slight_smile: (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:


.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:


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

Strict:


<!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% width here and 4px left margin.


.history {
    width:100%;
    height:100%;
   [B] margin-left:4px;[/B]
    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

Hi Paul,

Many Thanks.
It is working fine.

Thankd you
-Abdul