I have a slight problem (ie only, fine in firefox) where only the first item in an unordered list is displaced to the right (about 6 characters) The lists are in floated elements and all of them were doing this to start with but I cured this by using display: inline however I am still left with the first item being wrong. Sure i read about this somewhere but can't find it.. Many thanks in advance......steve

Could you post the code or give a link to your site.

Hi Steve,

I second Buddy... Its probably something minor, need to see the code though.

You are probably right in it being something simple, think I have been staring at this to long. I have not published the site yet so I have stripped down the code as much as possible and put the css inline. I am using an external css file but the error is in this little bit somewhere. Many thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    height:100%;
    width:100%;
    background-color: #FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align:center;
    background-repeat: repeat-x;
    background-position: left top;
}
body,td,th {
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 11px;
    color: #666666;
    background-color: #FFFFFF;
}
h3+p {
    margin-top:0.5em;
}
#wrapall {
    width:875px;
}
#content {
    text-align:left;
    width: 855px;
    margin-right: auto;
    margin-left: auto;
    padding-top:50px;
    padding-left:10px;
    padding-right:10px;
    background-repeat: no-repeat;
    background-position: right top;
    overflow:auto;
}
/* 835 */

#leftcolumn {
    float:left;
    width:210px;
}
.features {
    color:inherit;
    padding-top:10px;
    padding-left:10px;
    background-color:#e5e9f0;
    width: 190px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #91a6c4;
    margin-bottom:5px;
    float: none;
}

.features ul {
    padding-left:0;
    margin-top:5px;
    display: inline;
}
.features li {
    line-height: 17px;
    list-style-position: inside;
    list-style-type: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
}
</style>
</head>
<body>

<div id="content">
  <div id="leftcolumn">
    <div class="features">
      <h3>Problem Below</h3>
      <ul>
        <li>this is displaced</li>
        <li>this is ok</li>
        <li>this is ok</li>
        <li>this is ok</li>
      </ul>
     </div>  
    </div>
</div>
</body>
</html>

I see some problems:

- You have 0px in your styles. 0 must be alone, without a unit of measure. 0px, 0em, 0%, 0pt, and other 0 values with units of measure attached cause Firefox to throw away the entire style.

- You have surrounding styles (margin, border, padding) in the same style or tag as size styles (widths and heights). IE renders these in the wrong nesting order, compared to other browsers.

Fixed it. However I had to add an if IE statement and the code within there is a bit different from the original code to fix the IE problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
height:100%;
width:100%;
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
background-repeat: repeat-x;
background-position: left top;
}
body,td,th {
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 11px;
color: #666666;
background-color: #FFFFFF;
}
h3+p {
margin-top:0.5em;
}
#wrapall {
width:875px;
}
#content {
text-align:left;
width: 855px;
margin-right: auto;
margin-left: auto;
padding-top:50px;
padding-left:10px;
padding-right:10px;
background-repeat: no-repeat;
background-position: right top;
overflow:auto;
}
/* 835 */

#leftcolumn {
float:left;
width:210px;
}
.features {
color:inherit;
padding-top:10px;
padding-left:10px;
background-color:#e5e9f0;
width: 190px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #91a6c4;
margin-bottom:5px;
float: none;
}

.features ul {
padding-left:0;
margin-top:5px;
display: inline;
}
.features li {
line-height: 17px;
list-style-position: inside;
list-style-type: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
height:100%;
width:100%;
background-color: #FFFFFF;
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
text-align:center;
background-repeat: repeat-x;
background-position: left top;
}
body,td,th {
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 11px;
color: #666666;
background-color: #FFFFFF;
}
h3+p {
margin-top:0.5em;
}
#wrapall {
width:875px;
}
#content {
text-align:left;
width: 855px;
margin-right: auto;
margin-left: auto;
padding-top:50px;
padding-left:10px;
padding-right:10px;
background-repeat: no-repeat;
background-position: right top;
overflow:auto;
}
/* 835 */

#leftcolumn {
float:left;
width:210px;
}
.features {
color:inherit;
padding-top:10px;
padding-left: 10px;
background-color:#e5e9f0;
width: 190px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #91a6c4;
margin-bottom:5px;
float: none;
}

.features ul {
width: 190px;
margin-top:5px;
display: inline;
float: left;
}
.features li {
margin-left: -30px;
width: 190px;
float: left;
line-height: 17px;
list-style-position: inside;
list-style-type: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}
.features li a {
width: 190px;
display: block;
float: left;
text-decoration: none;
}
</style>
<![endif]-->
</head>
<body>

<div id="content">
<div id="leftcolumn">
<div class="features">
<h3>Problem Below</h3>
<ul>
<li>this is displaced</li>
<li>this is ok</li>
<li>this is ok</li>
<li>this is ok</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Capital letters in styles is also deprecated.

You should not have to use conditional styles. The trick is to nest two tags, one for surrounding styles, and one for size styles.

Too lazy to try and get it to be fine with the same code ;)