0

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

5
Contributors
7
Replies
8
Views
9 Years
Discussion Span
Last Post by MelechM
0

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>

Edited by mike_2000_17: Fixed formatting

0

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.

0

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

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.