asked on

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">

</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>



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

      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 */

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

mrichmon

Looks fine to me in IE 6. Actually looks the same as in other browsers.

ASKER CERTIFIED SOLUTION

ExpertAdmin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

harpsw

ASKER

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.