Disappearing bullets when using <span> tags in <li>

Forum Moderators: not2easy

Message Too Old, No Replies

Disappearing bullets when using <span> tags in <li>

kbish

9:47 am on Feb 15, 2005 (gmt 0)

I'm trying to create a list with different coloured text to the bullets, in this case blue bullets and grey text. I'm using a technique I found using a search of this site, ie. putting the text within <span> tags and setting the color to grey, while setting the color of the <ul> to blue in the style sheet. It works fine in Mac IE 5.1, Netscape 7, but when I look at PC IE 6, the blue bullets don't show up. Anyone have any ideas how to work around this. Here's the code I'm using:

External CSS:
ul {
list-style-type: disc;
color: #2364cd;
}

li {
font-size: 1.0em;
text-align: left;
line-height: 1.2em;
margin-top: 0em;
margin-bottom: 0.1em;
}

SuzyUK

10:26 am on Feb 15, 2005 (gmt 0)

kbish..

that code is working fine for me in IE6?
is your list inside a static div beside a floating one?

kbish

2:27 pm on Feb 15, 2005 (gmt 0)

Ah-ha. It's nested within two divs with the following code:

#main {
position: absolute;
top: 0px; left: 180px;
width: 657px;
height: auto;
margin: 0;
padding: 0;
)
#offset {
margin: 0 0 0 90px;
padding: 0 40px 0 0;
}

The bulletted list is within the #offset div. The 90px left margin is to give an offset from a 180px wide div containing navigation links. Any clues there?...

SuzyUK

6:34 pm on Feb 16, 2005 (gmt 0)

>>Any clues there?

No not really I still have it working OK, even with the new info.. except (and this just may be a typo) your closing bracket on the #main rule is ..not.. a curly one "}"

.. normally it's only floats in IE that cause bullets not to appear.. well they're there they're just hidden under the floated content (way to the left) is your list content still margined?

have you validated both the HTML and CSS, and if so can you post just the code for the affected areas

Suzy

[added]
here's the test code I have so far.. that is working..

<style type="text/css" media="screen">
ul {
list-style-type: disc;
color: #2364cd;
}
li {
font-size: 1.0em;
text-align: left;
line-height: 1.2em;
margin-top: 0em;
margin-bottom: 0.1em;
}
#main {
position: absolute;
top: 0px; left: 180px;
width: 657px;
height: auto;
margin: 0;
padding: 0;
background: #ffc;
}
#offset {
margin: 0 0 0 90px;
padding: 0 40px 0 0;
}
</style>
</head>
<body>
<div id="main"><div id="offset">
<ul>
<li><span style="color:#7f96ad;">Some text</span></li>
<li><span style="color:#7f96ad;">Some text</span></li>
</ul>
</div></div>
</body></html>

kbish

3:22 pm on Feb 17, 2005 (gmt 0)

Thanks for your efforts, SuzyUK, they're much appreciated. You'll be pleased to learn that the problem has been solved, but unfortunately I can't tell you how!

You see, I work on a Mac and don't have a PC with IE6 to hand to test. I therefore have to upload my changes and then phone a friend to check. Frustrating and long-winded to say the least!

Well, after a bout of removing and adding divs and adjusting this and that - none of which helped - I finally ended up back at square one with things as they were - or so I thought. And then my friend called to say the bullets had appeared!

So the problem has been solved, but we're none the wiser!

Thanks again.