I have a list:

<div id="null">
  <div id="content">
    <div id="content-primary">
      <div id="content-flash">
        <noscript>
          <div class="noscript"><a href="<?php echo $noscript_article_content; ?>"><img src="<?php echo $noscript_flash_content; ?>home_h_hi.jpg" width="555" height="305" alt="" /></a></div>
          <div class="noscript, noscript-flash-bar">Learn More</div>
          <div class="noscript, calendar-events">
            <ul>
            <?php
              for($i = 0; $i < $num_cal_events; $i++) {
                echo '<li><span style="color: #' . $cal_events[$i]['color'] . '">' . $cal_events[$i]['date'] . ' ' . $cal_events[$i]['activity'] . '</span></li>';
              }
            ?>
            </ul>
          </div>
        </noscript>
      </div>
    </div>

and I have a list style:

# content ul {
  list-style-type: none;
}

But when the list appears on the browser, it still contains bullet points. Why?

5 answers

Andy Ford 533
2
points

ID selectors should not have a space between the hash and the ID name. You have this:

# content ul

but it should be:

#content ul

(it can also be shortened to '#content ul { list-style: none; }' if you like)

Also, it would be more helpful to post the rendered HTML rather than the server-side code. But there are other problems in your code that may or may not contribute to the bullet problem, but should definitely be fixed (As FinalFrag mentioned multiple classes should not be comma separated).

I'd highly recommend checking your HTML output with a markup validator (you can 'view source' of your page, copy the entire source contents, and paste in the validator's 'Validate By Direct Input' tab if this is not a publicly accessible URL )

Since it appears that your CSS selector is the issue, it also be worth it to validate your stylesheet(s) to help catch any other possible syntax errors.

Also, Firebug is your friend!

Answered almost 7 years ago by Andy Ford
1
point

Also, I see that you have this code:

<div class="noscript, calendar-events">

While it should be

<div class="noscript calendar-events">

You don't have to add comma's to get multiple classes, just a space.

Answered almost 7 years ago by FinalFrag
0
points

you want something like: ul li {list-style-type: none}, I believe. Also make sure you prefix any classes with "."

Answered almost 7 years ago by Nathan DeGruchy
0
points

My boss helped me figure this one out. Earlier, a 'list-style-image' rule had been defined. I needed to negate it with 'list-style-image: none' That worked. Thanks for everyone's input.

Answered almost 7 years ago by Chris Barnhill
-1
points

Based on your example code you aren't using the correct id name. It looks like markdown ate your hash, but you need #content-primary ul { . . . } You appear to be using just #content ul { . . . }

But maybe the example is incomplete?

Edit: Example code has since been changed.

Answered almost 7 years ago by Alex Taylor
  • There should be a <div id="content">...</div> at the top of the source. I don't know how to mark-up source code in this forum. Chris Barnhill almost 7 years ago