• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 553
  • Last Modified:

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

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

0
harpsw
Asked:
harpsw
1 Solution
 
mrichmonCommented:
Looks fine to me in IE 6.  Actually looks the same as in other browsers.
0
 
ExpertAdminCommented:
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
 
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now