8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Simple CSS Question

by Vcize
7 replies
  • WEB DESIGN
    • |
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
#css #question #simple
  • Profile picture of the author xtrapunch
    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.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[3523567].message }}
  • Profile picture of the author ronc0011
    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");
    {{ DiscussionBoard.errors[3523583].message }}
  • Profile picture of the author Vcize
    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.
    Signature
    Halo Reach | Miami Dolphins Posters
    {{ DiscussionBoard.errors[3523620].message }}
    • Profile picture of the author xtrapunch
      Originally Posted by Vcize View Post

      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.
      Webpages consider all styles mentioned for them. There must be some other code that is the culprit.
      Signature
      >> Web Design, Wordpress & SEO - XtraPunch.com <<
      Web Design & SEO Agency | Serving World Wide from New Delhi, India

      {{ DiscussionBoard.errors[3523636].message }}
  • Profile picture of the author kjhosein
    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!
    Signature
    <!--PM me for a quicker reply. Thx!-->
    {{ DiscussionBoard.errors[3526141].message }}
    • Profile picture of the author Vcize
      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?
      Signature
      Halo Reach | Miami Dolphins Posters
      {{ DiscussionBoard.errors[3528773].message }}
  • Profile picture of the author kjhosein
    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.
    Signature
    <!--PM me for a quicker reply. Thx!-->
    {{ DiscussionBoard.errors[3530480].message }}

Trending Topics