Question

I have a very peculiar problem across the IE board (ignoring IE6).

Basically I have a list in a div with fixed width. The list contains li cells without height or width, containing a link and a styled span tag. The li cells are supposed to float right, with the span tag floating right relative to the <a>

Problem, IE can’t handle it. And I absolutely don’t know where to begin.

div#all { 
    width: 800px; 
    margin: 0 auto 0 auto;
    }

div#head { 
    width: 800px; 
    margin: 0;
    }

ul { 
    width: 800px; 
    list-style: none; 
    margin: 35px 0 10px 0; 
    padding: 0; 
    }

ul span {
    float: right;
    display: block; 
    height: 18px; 
    width: 18px; 
    margin: 0 0 0 6px; 
    }

li  { 
    float: right;
    margin: 5px 15px;
    padding: 0 0 4px 0;
    border-bottom: 2px solid;
    }

li a {
    float: left;
    }

  <ul>
      <li class="ABC">
      <a href="ABCD">ABCD</a>
      <span class="li-ABC">
      </li>
  </ul>

Ignore the span class and the li class, they just have color settings

Site can be viewed here

Answer 1

You have HTML errors. There are several list items in a row that do this:

                <li class="ArabicWorld">
                <a class="menu" href="/Arabic World/Arabic World">
                    العالم العربي
                </a>
                <span class="li-ArabicWorld">
                </li>

Note the unclosed <span>. You open a new span for each list item but don’t close it. There may be other issues as well. Always validate your HTML before blaming the browser. The reason it looks OK in other browsers is most likely because they were handling the error differently.