IE6 - List doesn't indent second child item

[CWitt]

Right now I am unable to replicate this code in IE6. I have a list in the sidebar. Anything greater than the 2nd child item is not indented. I cannot figure this one out right now. Anyone have some insight?

/* Default CSS */
/* Base Styles */
body {
 padding: 0;
 margin-top: 10px;
 width: 100%;
 height: 100%;
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 0.8em;
 text-align: center;
 line-height: 1.2em;
 color: #333333;
 background: #D8C981 url(images/main.bg.png) repeat-x top;
}
a, a:visited, a:active {
 color: #333333;
 text-decoration: underline;
}
a:link {
 color: #333333;
 text-decoration: underline;
}
a:hover {
 color: #000000;
 text-decoration: underline;
}
/* Main Layout */
#wrapper {
 margin: 0 auto;
 width: 940px;
 border: 1px solid #2f3746;
 background: #ffffff;
}
#page-wrapper {
 padding: 0;
 margin: 10px auto;
 width : 920px;
 text-align: left;
 background: #ffffff;
}
#middle-wrapper {
}
body.sidebars #middle-wrapper {
  background: url(images/sidebar-bg.png) repeat-y;
}
body.sidebar-left #middle-wrapper {
  background: url(images/sidebar-bg-left.png) repeat-y left;
}
body.sidebar-right #middle-wrapper {
  background: url(images/sidebar-bg-right.png) repeat-y right;
}
#main-content {
 float: left;
 width: 100%;
}
#squeeze {
}
#main-content-inner {
 padding: 10px 20px;
 margin: 0; 
 overflow: hidden; /* Fix for collapsible fieldsets in IE */
}
#middle-wrapper .sidebar-right {
 float: left;
 z-index: 1;
 position: relative;
}
#middle-wrapper .sidebar-left {
 float: left;
 z-index: 1;
 position: relative;
}
body.sidebars #main-content { 
 margin-left: -200px;
 margin-right: -200px;
}
body.sidebar-left #main-content { 
 margin-left: -200px;
}
body.sidebar-right #main-content { 
 margin-right: -200px;
}
body.sidebars #squeeze { 
 margin: 0 200px 0 200px;
}
body.sidebar-left #squeeze { 
 margin-left: 200px;
} 
body.sidebar-right #squeeze { 
 margin-right: 200px;
}
#middle-wrapper .sidebar-left {
 width: 200px;
}
#middle-wrapper .sidebar-right { 
 width: 200px;
}
.sidebox-left h3, .sidebox-right h3 {
 padding: 0 5px;
 margin: 0;
 font-size: 1.0em;
 font-weight: bold;
 line-height: 34px;
 background: url(images/sidebox-h3.png) no-repeat;
}
.sidebox-left, .sidebox-right {
 padding: 18px 18px 0 18px;
}
.sidebox-content {
 margin: 0;
 padding: 5px 0px;
}
#topboxes {
 padding: 0;
 margin: 0;
 background: #c3d9ff url(images/bb-bg.png) repeat-x top;
 overflow: hidden;
}
#topboxes a {
 font-weight: bold;
}
#topboxes a:hover {
 color: #ffffff;
}
#bottomboxes {
 padding: 0;
 margin: 0;
 color: #ffffff;
 background: #111318;
 overflow: hidden;
}
#bottomboxes a {
 color: #cbdeff;
 font-weight: bold;
}
.userbox, .userbox-bottom {
 float: left;
 padding-bottom: 32767px;
 margin-bottom: -32757px;
}
.userbox-inner {
 padding: 20px;
}
.userbox-bottom-inner {
 padding: 20px;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 background: #111318;
}
.width25 {width: 25%;}
.width33 {width: 33.3333%;}
.width50 {width: 50%;}
.width100 {width:100%;}
#footer {
 height: 26px;
 padding: 0px;
 margin: 0;
 clear: both;
 text-align: center;
 background: url(images/footer.png) repeat-x;
}
/* Header */
#header-wrapper {
 height: 150px;
 background: url(images/header-bg.png) no-repeat; 
}
#site-logo {
 padding: 2px 0 0 0;
 height: 77px;
 float: left;
 border: 0;
}
#site-name {
 padding: 17px 0 0 10px;
 margin: 0;
 float: left;
 text-align: right;
}
#site-name a {
 font-size: 54px;
 font-weight:900;
 line-height: 54px;
 color: #4B5324;
 text-decoration: none;
}
.site-slogan-logo h2 {
 margin-top: -20px;
 padding: 0;
 font-size: 12px;
 line-height: 12px;
 text-align: right;
}
.site-slogan h2 {
 margin-top: 0;
 padding: 0;
 font-size: 12px;
 line-height: 12px;
 text-align: right;
}
#search-box {
 float: right;
 padding: 40px 20px 0 0;
} 
/* Side Menu */
.sidebox-content ul.menu, .sidebox-content ul.menu li {
 position: relative; 
 margin: 0;
 padding: 0;
 list-style-image: none;
 list-style: none;
 list-style-type: none;
}
.sidebox-content ul.menu li {
 padding: 0;
 margin-left: 0;
 background: url(images/li-bg.png) repeat-x bottom;
}
.sidebox-content ul.menu li a {
 display: block;
 padding: 5px 5px 5px 2px;
 font-weight: bold;
}
.sidebox-content ul.menu li a:hover {
 color: #ffffff;
 font-weight: bold;
 background: #303948 url(images/primary-bg.png) repeat-x;
 text-decoration:none;
}
.sidebox-content ul.menu li a {
 font-weight: bold;
}
.sidebox-content ul.menu li ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.sidebox-content ul.menu li ul li {
 margin: 0;
 margin-left: 10px;
 padding: 0;
 list-style: none;
 background: url();
}
.sidebox-content ul.menu li ul li a {
 font-weight: normal;
}
.sidebox-content ul.menu li ul li a.active {
 color: #2f3746;
 font-weight: bold;
}
.sidebox-content ul.menu li ul li a.active:hover {
 color: #ffffff;
 font-weight: bold;
}
/* Misc Elements */
.item-list {
 color: #999999;
}
.item-list ul {
 padding: 10px 0;
 margin: 0;
}
.item-list ul li {
 padding: 0 0 5px 5px;
 margin: 0;
 list-style:none;
 font-size: 0.9em;
}
.item-list ul li a {
 font-size: 1.0em;
 font-weight: bold;
}
.sidebox-content .item-list ul {
 padding: 10px 0;
 margin: 0;
}
.submitted {
 font-size: 0.8em;
 color:#999999;
}
.title, .node-title {
 padding: 0;
 margin: 0;
 font-family: "Times New Roman", Times, serif;
 font-size: 2.0em;
 line-height: 1.5em;
 font-weight: bold;
}
.title a {
 text-decoration: none;
}
.node {
 padding-bottom: 10px;
 margin-bottom: 10px;
 border-bottom: 1px dashed #a9c9ff;
 background: url(images/node-bg.png) repeat-x bottom;
}
.form-text {
 border: 1px solid #4d5b78;
}
.form-submit {
 color: #ffffff;
 font-size: 12px;
 font-weight: bold;
 height: 20px;
 border: 1px outset #000000;
 background: #2f3847;
}
.breadcrumb {
 float: left;
 font-weight: bold;
}
.block-region {
 padding: 10px;
 border: 2px dashed #333333;
 background:#FFFFFF;
}
.links {
 clear: both;
 font-size: 1.0em;
 font-weight: bold;
}
.more-link a {
 padding: 0 2px;
 font-weight: bold;
 border: 1px solid #2d3644;
 background: #c0d7fd;
}
#search-block-form {
 width: 100%;
 text-align: center;
}
/* Comments */
#comments {
}
#comments .submitted {
 color: #2d3644;
}
.comment {
 padding: 10px;
 margin-bottom: 10px;
 color: #363636;
 border: 1px solid #2d3644;
 background: #c0d7fd;
}
.indented {
 margin-left: 0px;
}
/* Aggregator */
.feed-url {
 padding: 10px 0;
 font-size: 0.8em;
}
.feed-updated {
 padding: 0 0 10px 0;
 font-size: 0.8em;
}
.feed-item-date {
 font-size: 0.8em;
 color:#999999;
}
.feed-item-body a {
 font-weight: bold;
}
/* Poll */
.poll {
 padding: 5px 0;
}
.poll .bar {
 height: 1.0em;
 background: url(images/poll-bar.png) repeat-x;
}
.poll .bar .foreground {
 height: 1.0em;
 background: url(images/poll-foreground.png) repeat-x;
}
.sidebox-content .poll .title {
 font-size: 1.0em;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
}
/* Admin Styles */
table {
 width: 100%;
}
div.admin {
}
div.admin .left {
 float: left;
 margin: 0;
 width: 49%;
}
div.admin .right {
 float: left;
 margin: 0;
 width: 49%;
}
/* Primary Links */
#primary-links h2 {
 display:none;
}
#primary-links {
 border-bottom: 3px solid #d9dbde;
}
#primary-links, #primary-links ul {
 padding: 0;
 margin: 0;
 line-height: 30px;
 list-style: none;
 background: url(images/primary-bg.png) repeat-x;
}
#primary-links a {
 display: block;
 padding: 0 11px 0 0;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 list-style: none;
 background: url(images/primary-r.png) right top no-repeat;
}
#primary-links li {
 float: left;
 list-style: none;
 padding: 0 0 0 11px;
 background: url(images/primary-l.png) left top no-repeat;
}
#primary-links li:hover a {
 color: #333333;
 background: url(images/primary-hover-r.png) right top no-repeat;
}
#primary-links li:hover {
 background: url(images/primary-hover-l.png) left top no-repeat;
}
#primary-links li:hover li a, #primary-links li:hover li {
 color: #333333;
 background: #d9dbde;
}
#primary-links li ul {
 margin-left: -10px;
 position: absolute;
 width: 100px;
 left: -999em;
 border: 3px solid #999999;
 background: #d9dbde;
}
#primary-links li:hover ul, #primary-links li.sfhover ul {
 left: auto;
}
#primary-links li ul li a, #primary-links li ul li {
 padding: 0 0 0 5px;
 margin: 0;
 width: 90px;
 background: #d9dbde;
}
#primary-links li ul li a:hover, #primary-links li ul li:hover {
 color: #ffffff;
 background: #4B5225;
}
#primary-links li:hover ul ul, #primary-links li.sfhover ul ul {
 left: -999em;
}

The issue seems to be in the Side Menu.

[edited by: CWitt at 5:27 am (utc) on Oct. 28, 2008]

[Tom_Cash]

I'm not sure if I am reading the correct part of your CSS when I say this, but have you tried setting the margin on the side you want your indentation to +5 or whatever you want it to?

It'd be really helpful if you only posted the code to the area with your problem and the HTML to go with it.

[edited by: Tom_Cash at 8:57 am (utc) on Oct. 28, 2008]

[CWitt]

That's where I am stumbling, I can't seem to replicate the issue. It's a really interesting issue, because on all other browsers the list is fine. But in IE6, at first glance, it looks fine. But when you look at it again you realize that only the first child of the list is indented, the rest are not.

[CWitt]

Okay so the problem is in the IE6.css that I pull up, now figuring that out is my problem. I posted this CSS above in it's entirety in the IE6.css and the indentation worked. So this code above is right, I need to figure which code to grab and throw into my IE6.css. My IE6.css code is:

.sidebox-content ul.menu li {
 display: inline;
}
#footer {
 height: 26px;
 padding-top: 10px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 margin: 0;
 clear: both;
 text-align: center;
 background: url(images/footer.png) repeat-x;
}
.sidebox-content ul.menu li a {
 background: url(images/li-bg.png) repeat-x bottom;
}
#primary-links li ul {
 width: 200px;
}
#primary-links li ul li a, #primary-links li ul li {
 padding: 0;
}
#primary-links li ul li a {
 padding-left: 5px;
}
#primary-links a {
 background: url(images/primary-r-8.png) right top no-repeat;
}
#primary-links li {
 background: url(images/primary-l-8.png) left top no-repeat;
}
#primary-links li:hover a {
 background: url(images/primary-hover-r-8.png) right top no-repeat;
}
#primary-links li:hover {
 background: url(images/primary-hover-l-8.png) left top no-repeat;
}

[CWitt]

The /* Side Menu */ Section is where the indentation is located.

[edited by: CWitt at 11:21 pm (utc) on Oct. 29, 2008]

[CWitt]

---

System: The following message was spliced on to this thread from: http://www.webmasterworld.com/css/3777087.htm [webmasterworld.com] by swa66 - 11:59 pm on Oct. 30, 2008 (utc 0)

---

So I am surely but slowing figuring out this issue. The second item of the child list on the side menu is not indented. It works fine in most browsers, but when I pull it up in IE6 it creates this issue. I have a conditional statement that brings up some CSS for IE6. In my IE6.css file I have this listed:

.sidebox-content ul.menu li {
 display: inline;
}

Now without this code, the list is properly indented. However, the spacing (vertically) becomes an issue. Anyone have any suggestions?