Unordered list not aligned in IE6

I've come across something strange that I can't seem to resolve - the first two items in a simple, unordered list don't align with the rest of the list or with other lists on the page. This only occurs in IE6. Firefox works fine.
The page is: www.cmmurraylaw.com/profile.asp

Thanks,
Bill


The html for this is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Law Office of Caroline M. Murray - Legal Services for Older Clients and Their Families</title>

<link rel="stylesheet" type="text/css" href="murraylaw.css" />
<STYLE TYPE="text/css">
<!--
  @import url(murraylaw.css);
-->
</style>
</head>

<body>


<div id="pageFrameMask">

  <div id="heading">
  <div align=center>
     <div id="titlepic">
     </div>
     <A HREF="mailto:c.m.murray@comcast.net"><IMG SRC="images/phone-fax-email.jpg" BORDER="0" ALT="phone-fax-email"></A>

  </div>
  </div>

   <div id="leftcolumn">
   </div>

  <!--#include file="includes/profilemenu.inc" -->

  <div id="maincontent">

    <h2>Attorney Profile</h2>

<p>
      Areas of Practice:
      <ul>
        <li>Elder Law</li>
        <li>Trusts and Estates</li>
        <li>Asset Protection</li>
        <li>Estate Planning</li>
        <li>Guardianship</li>
        <li>Wills</li>
        <li>Probate</li>
        <li>Medicaid Planning</li>
        <li>Real Estate Transactions</li>
        </ul>

<p>    <!--    <p> &nbsp </p>  -->  

      Law Schools:
      <ul>
      <li>Trinity College, Dublin, Ireland</li>
      <li>Western New England School of Law</li>
      <li>Barry University School of Law, JD 2003</li>
      </ul>
****************************************
The css:

body {
      background-color: #009900;
      margin: 20px;

}

#headinghome {
  background-color: #fff;      /* white */
  height: 375px;
}

#heading {
  background-color: #fff;      /* white */
  height: 222px;
}


#titlepic {
      background-image: url(Images/knots3.jpg);
      background-repeat: no-repeat;
      background-origin: border;
      background-position: center 0;
      background-size: 100%;
      width: 100%;
      height: 200px;
      margin-top: -5px;
      background-color: #FFFFFF;

    *   margin-top: 0px;    /* for IE only */
}

#photo {
      background-image: url(Images/caroline_photo_sm.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      width: 140px;
      height: 166px;
      margin-top: -15px;
      background-color: #FFFFFF;
}

#photoright {
      float: right;
      background-image: url(Images/caroline_photo_sm.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      width: 140px;
      height: 166px;
      margin-top: 5px;
      margin-right: 5px;
      background-color: #FFFFFF;
}

#pageFrameMask
{
      border-left: solid 2px #000;
      border-right: solid 2px #000;
}


#leftcolumn {
      float: left;
      margin-top: 50px;

}


#maincontent {
      padding: 2%;
      padding-top: 0px;
      text-align: left;
      margin-top: 15px;
      margin-left:  200px;
      border: solid 1px #000;
      border-right: 0px;
        background-image: url(Images/scales_justice_BG.jpg);
      background-color: #FFFFCC;
}


#navcontainer {
      padding-top: 15px;
      margin-left: 0px;
      width: 170px;
      float:left;
      display: block;

}

#navcontainer ul
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-family: verdana, arial, Helvetica, sans-serif;
      background-color: #FFFFCC;


}

#navcontainer li {
      border: 1px solid #333333;
      border-left: 0px;
      margin-top: 0;
      margin-right: 0;
      margin-left: 0;

}


#navcontainer a
{
      display: block;
      width: 159px;
     *      width: 170px;
      text-decoration: none;
      font-weight: normal;
      color: #003399;
      padding-top: 4px;
      padding-left: 10px;
      font-size: 1em;

}

#navcontainer a:hover
{
color: #FFFFCC;
background-color: #0033CC;
}


#navcontainer a.active {
color: #FFFFCC;
background-color: #0033CC;
}


#disclaimer {
font-size: 12px;

}


#footer {
  padding: 5px;
  text-align: center;
  font-size: .7em;
  clear: both;
  background-color: #fff;
}

html { min-height: 100%; margin-bottom: 1px; }                  /*  force vertical scroll bar */

********************************

harpswAsked:
Who is Participating?
 
ExpertAdminConnect With a Mentor Commented:
I am not sure why it is happening, but this line seems to cause it:

#navcontainer {
     padding-top: 15px;
     margin-left: 0px;
     width: 170px;
     float:left;      <----------------------
     display: block;

}

If I remove that line, the alignment problem goes away, but of course your formatting is not right either.

Possibly this article will help:

http://www.positioniseverything.net/explorer/floatIndent.html


M@
0
 
mrichmonCommented:
Looks fine to me in IE 6.  Actually looks the same as in other browsers.
0
 
harpswAuthor Commented:
Thanks ExpertAdmin. Looking at the position of the misaligned items, I now see that they were directly across from the nav container. My high-tech hack is to push the unordered list down so the list items aren't aligned with the nav box. It's simple and it works - I've spent far too much time on this one.

Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.