[SOLVED] CSS IE6 Bug

[Hartley]

Attached is an image showing the bug in IE6.

 

http://*cast*buzz.com/bs-test/ (Remove the stars)

 

When I put a spacer.gif into those areas, it fixes the problem, but I want to see if this can be fixed the right way through CSS.

 

HTML in Question

				<!-- users online -->
			<div class="s-top-first"></div>
			<div class="s-mid">
				<ul class="s-bar">
					<li id="s-online"><a href="#">Online</a></li>
				</ul>

			</div>
			<div class="s-bot"></div>

			<!-- member side panel -->
			<div class="s-top"></div>
			<div class="s-mid">
				<ul class="s-bar">
					<li id="s-email"><a href="#">Mail</a></li>
						<li><ul id="s-mail-sub">

							<li><a href="#">Compose Mail</a></li>
							<li><a href="#">View Inbox</a></li>
							<li><a href="#">Track Messages</a></li>
							<li><a href="#">Edit Folders</a></li>
						</ul></li>
					<li id="s-profile"><a href="#">Profile</a></li>

							<li><ul id="s-profile-sub">
							<li><a href="#">View Profile</a></li>
							<li><a href="#">Edit Profile</a></li>
							<li><a href="#">Edit Photos</a></li>
							<li><a href="#">Profile Privacy</a></li>
						</ul></li>
					<li id="s-settings"><a href="#">Settings</a></li>

						<li><ul id="s-settings-sub">
							<li><a href="#">Edit Avatar</a></li>
							<li><a href="#">Edit Signature</a></li>
							<li><a href="#">Edit Options</a></li>
						</ul></li>
					<li id="s-blog"><a href="#">Blog</a></li>
					<li id="s-stats"><a href="#">My Statistics</a></li>

				</ul>
			</div>
		<div class="s-bot"></div>
		</div>

 

Relevant CSS

/* sidebar */
.s-top-first {
height:5px;
width:180px;
background:url("../images/site/main/side-top.png") no-repeat;
display:block;
}

.s-top {
height:5px;
width:180px;
margin:10px 0 0 0;
background:url("../images/site/main/side-top.png") no-repeat;
display:block;
}

.s-mid {
width:160px;
padding:0 10px;
background:url("../images/site/main/side.png") repeat-y;
}

.s-bot {
height:5px;
width:180px;
background:url("../images/site/main/side-bottom.png") no-repeat;
display:block;
}

/* side menu */
.s-mid a {
color:#fff;
font:11px Verdana;
text-decoration:none;
text-transform:uppercase;
}
.s-mid a:hover { text-decoration:underline; }

.s-bar li {
width:160px;
padding:0 0 5px 0;
list-style:none;
text-indent:22px;
}

/* menu itemization */
#s-online {
background:url(../images/icons/status_online.png) no-repeat;
padding:0;
}

#s-email {background:url(../images/icons/email.png) no-repeat; }
#s-profile { background:url(../images/icons/vcard.png) no-repeat; }
#s-settings { background:url(../images/icons/cog.png) no-repeat; }
#s-blog { background:url(../images/icons/book.png) no-repeat; }

#s-stats {
background:url(../images/icons/chart_bar.png) no-repeat;
padding:0; }

/* remove uppercase */
#s-mail-sub a { text-transform:none; }
#s-profile-sub a { text-transform:none; }
#s-settings-sub a { text-transform:none; }

 

Thank you in advance

 

[attachment deleted by admin]

[Hartley]

Problem fixed: solution was simply adding a "font-size:1px;" to each DIV container.