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
steve136 0 Newbie Poster
Recommended Answers
Jump to PostI 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, …
Jump to PostCapital 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.
All 7 Replies
buddylee17 216 Practically a Master Poster
Could you post the code or give a link to your site.
macneato 29 Posting Pro in Training
Hi Steve,
I second Buddy... Its probably something minor, need to see the code though.
steve136 0 Newbie Poster
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>
MidiMagic 579 Nearly a Senior Poster
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.
MelechM 1 Junior Poster in Training
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> MidiMagic 579 Nearly a Senior Poster
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.
MelechM 1 Junior Poster in Training
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.