Member Avatar for steve136

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
  • 127 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MelechM
Member Avatar for buddylee17

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

Member Avatar for macneato

Hi Steve,

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

Member Avatar for steve136

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 because: Fixed formatting
Member Avatar for MidiMagic

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.

Member Avatar for MelechM

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>
Member Avatar for MidiMagic

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.

Member Avatar for MelechM

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.