2 replies [Last post]
captain
Offline
newbie
Last seen: 17 years 37 weeks ago
Joined: 2004-11-26
Posts: 3
Points: 0

hi folks,

sorry for my bad english, but i have a strange problem which is needed to bring out to the world...

i have a horizontal list with list icons as images. this list can have two or more breaks. but when the list breakes, the list-icon does not display.

for better understanding:

here comes the code and i have attached an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>listen</title>
<style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#listBreadCrumb {
	font-size:11px;
	padding: 0px;
	margin-left:10px;
}
#listBreadCrumb li {
	color:#333;
	line-height:1.5em;
	display:inline;
	padding-left:5px;
	background-image:url(../images/grafics/icon_breadcrumb.gif);
	background-repeat:no-repeat;
	background-position:0px 5px;
}
#listBreadCrumb li a {
	color:#333;
	text-decoration:none;
}
#listBreadCrumb li a:hover {
	text-decoration:underline;
}
#listBreadCrumb li.active {
	color:#906;
}
-->
</style></head>

<body>
<div style="width:580px">
<ul id="listBreadCrumb">
		<li><a href="#">Home</a></li>
		<li><a href="#">Subpoint 01</a></li>
		<li><a href="#">Subpoint 02</a></li>
		<li><a href="#">Subpoint 03</a></li>
		<li><a href="#">Another Subpoint</a></li>
		<li><a href="#">Another Subpoint</a></li>
		<li><a href="#">A very lonk subpoint to show the break</a></li>
		<li><a href="#">Subpoint </a></li>
      	<li class="active">Active subpoint </li>
    </ul>
</div>
</body>
</html>

thanks for your help!

greetings from captain

blackEyEz
Offline
Regular
Last seen: 17 years 49 weeks ago
Joined: 2004-09-02
Posts: 16
Points: 0

Problem with list icon in horizontal list (IE)

Seems that when a box element covers two lines IE looses it box property. Another reason to download Firefox Wink

I found a possible work around where the links are treated as inline boxes. So when a line is full the whole box will be put on the next line avoiding the background-position problem.

This is what i have changed

#listBreadCrumb li {
   color: #333;
   display: inline;
   line-height:1.5;
}
#listBreadCrumb li a {
   display: inline-block;
   color:#333;
   text-decoration:none;
   background:url(http://www.csscreator.com/css-forum/templates/subSilverCSS/images/icon_minipost_new.gif) left top no-repeat;
}

html>body #listBreadCrumb li a
{
   display: -moz-inline-box;
}

So mainly changing the link into a inline block element and a mozilla to make it do the same.

I tested it on IE5x, IE6, Mozilla. Opera understands it too but places the active LI (which doesnt have the link block element) a bit lower.

Hope this helps you :)[/code]

captain
Offline
newbie
Last seen: 17 years 37 weeks ago
Joined: 2004-11-26
Posts: 3
Points: 0

Problem with list icon in horizontal list (IE)

thanks a lot blackEyEz!

i've also found a solution:

i just used for horizontal style instead of "display:inline", "float:left" combined with "white-space:nowrap;".

#listBreadCrumb li { 
margin-right:5px; 
    color:#333; 
    line-height:1.5em; 
    float:left; 
    padding-left:5px; 
    white-space:nowrap; 
    background-image:url(../images/grafics/icon_breadcrumb.gif); 
    background-repeat:no-repeat; 
    background-position:0px 5px; 
} 

but i will test your solution as well. maybe its better...?

thanks and greets, captain