Css list-style-type not showing with display:inline

HTML & CSS
1

Hi there,

I’ve been fooling around for hours now trying to solve this problem, any help would be great.

If i have an un-orderd list normal it will display the bullet points, but as soon as i make them display:inline i can’t get them to show. in FF. Any ideas? its driving me crazy!!! lol!


		<div class="menuTop">
			<ul>
				<li class="menuTopListFirst">GIFT SHOP</li>
				<li>WEDDING TIPS</li>
				<li>CUSTOMER SERVICE</li>
				<li>OUR MISSION</li>
				<li class="menuTopListLast">OUR STORY</li>
			</ul>
		</div>

.menuTop {
	width:100%;
	height:2.8em;
	position:relative;
	background-color:#00898d;
	border-bottom: 5px solid #049284;
	z-index:1;
}
.menuTop ul {
	float:right;
	color:#FFF;
	font-family:arial;
	font-weight:normal;
	font-size:12px;
	list-style-type: disc;
	list-style-position: inside;
}
.menuTop li {
	display:inline;
	list-style-type: disc;
	list-style-position: inside;
	padding-left:1em;
}

Many thanks

2

Hello your.fm!
Just float the .menuTop li to the left and remove your display property.

That should work

3

Thank you!
It’s showing the bullets now in FF but not IE… any suggestions?


.menuTop {
	width:803px;
	_width:804px;
	height:2.8em;
	margin-left:1px;
	position:relative;
	background-color:#1C7370;
	border-bottom: 5px solid #2D7F66;
	z-index:1;
	top:4.1em;
}
.menuTop ul {
	float:right;
	color:#FFF;
	font-family:arial;
	font-weight:normal;
	font-size:11px;
	margin-top:0.8em;
	list-style-type: disc;
	list-style-position: outside;
}
.menuTop li {
	float:left;
	padding-right:2em;
}
4

Hi,

When you set the display to inline then the list loses its marker because it is no longer display:list-item.

When you float the list then IE sets the display to block and you again lose the bullet because it is no longer display:list-item.

You will have to do something like this to keep both happy.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.menuTop {
    width:100&#37;;
    height:2.8em;
    position:relative;
    background-color:#00898d;
    border-bottom: 5px solid #049284;
    z-index:1;
}
.menuTop ul {
    float:right;
    color:#FFF;
    font-family:arial;
    font-weight:normal;
    font-size:12px;
    list-style-type: disc;
    list-style-position: inside;
}
.menuTop li {
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}
.menuTop li span {
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
    padding-left:16px;
}


</style>
</head>
<body>
<div class="menuTop">
    <ul>
        <li class="menuTopListFirst"><span>GIFT SHOP</span></li>
        <li><span>WEDDING TIPS</span></li>
        <li><span>CUSTOMER SERVICE</span></li>
        <li><span>OUR MISSION</span></li>
        <li class="menuTopListLast"><span>OUR STORY</span></li>
    </ul>
</div>
</body>
</html>

A span has been added and then turned into a list-item.

5

Wow Paul :slight_smile:
I tried to help him but after the float tip i was blank and i was coming back to post to see if someone could help him ^^

I guess i need more practice :smiley:

6

Thank you so much, you’re a life saver :slight_smile:

7

Don’t worry I doubt there’s many people would have been able to answer this question correctly anyway :slight_smile: