Simple CSS Question

by 7 replies
8
I'm having some trouble with something really simple. I'm just trying to get some bullet points to show up when I use a list. I can't figure out why it's not working.

Here's the html:
HTML Code:
<div class="entry">										
<div class="post-content clearfix"><p style="text-align: center;"><img src="/images/stories/gator-2-seed.jpg" border="0" alt="Gators 2 Seed" title="Gators 2 Seed" /></p>
<p>Here are the teams that will almost certainly be seeded ahead of the Gators, regardless of what happens today.</p>
<ul>
<li>Ohio State</li>
<li>Kansas</li>
<li>Pittsburgh</li>
<li>Notre Dame</li>

<li>Duke</li>
<li>UNC</li>
<li>San Diego State</li>
</ul>
And here's the CSS:
Code:
.entry ul li {
	list-style-type: square;
	background: url(../images/primary/green/li-blue.png) 0 2px no-repeat;
}
I know the path to the image is right, because when I change the css entry to just .entry ul (and take off the li) it puts the bullet on just the first entry.

The full page is here in case anyone wants to view the full source: Florida Gators Blog
#website design #css #question #simple
  • Use this CSS code:

    .entry ul li {
    list-style-type: square;
    list-style-image: url(../images/primary/green/li-blue.png);
    }

    If it solves you problem, do go to SpeckyGeek.com and click on the Facebook like button.
  • If you are trying to get your own custom bullet then you need to use

    List-style-type:none;
    list-style-image:url("path to your image");
  • Unfortunately neither of those work. The issue really that I can't get anything to show up. Even if I take my image out and just make it list-style-type: square.
    • [1] reply
    • Webpages consider all styles mentioned for them. There must be some other code that is the culprit.
  • Hi @vcize - @xtrapunch is right - you have a style that is preceding the one for your .entry ul list.

    I looked at your site's CSS code and found it:
    #eblog-wrapper ul li {
    background: none !important;
    }

    Of course, the problem with disabling that rule means that other ul lists may break. The better course of action is to make the CSS rules for other ul lists more specific like you did with the .entry ul one.

    HTH!
    • [1] reply
    • Thanks guys, I'll give that a shot!

      I would have thought it would take the inner-most div's rule, but I guess it's the !important causing a more general rule to overwrite the more specific one?
  • Hi @vcize - no, even if you removed the !important from that #eblog-wrapper rule, that wouldn't completely fix your problem. Try it, you'll see. Also, it appears that the #eblog-wrapper id is used on some pages, but not all, which muddies the problem a bit more.
Join the discussion

Next Topics on Trending Feed

  • 8

    Simple CSS Question

    I'm having some trouble with something really simple. I'm just trying to get some bullet points to show up when I use a list. I can't figure out why it's not working. Here's the html: