Grow your CSS skills. Land your dream job.

Bullets not showing in first column?#$!

  • # January 28, 2013 at 2:00 pm

    What makes the bullets not show up in the first column in this wordpress theme.
    In either a three column or two column layout, the first column shows no bullets?
    hoping the URL redirect works here.
    The first column of services shows no bullets, at least for me?
    http://crssp.com/i/bullets-gone-berserk

    Any ideas?

    thanks,
    Crssp-ty

    # January 28, 2013 at 2:05 pm

    Your `overflow: hidden;` on `.page-content` is what’s causing them to disappear.

    Instead of using overflow hidden to clear floats, I prefer using the clearfix class method: http://nicolasgallagher.com/micro-clearfix-hack/

    # January 28, 2013 at 2:43 pm

    Or, you could restore the default margin or padding that you stripped off of all ul

    .one_third ul {
    margin-left: 20px;
    }

    # January 28, 2013 at 2:55 pm

    Working with a theme, I still don’t see what you mean where to apply the CF class?
    Can overflow hidden be removed somehow if that is the problem.

    Not really understanding the problem here, but I hate to use hack code.
    Tried several things, applying the cf class to the structure items, guess I don’t get it.

    # January 28, 2013 at 2:56 pm

    Thanks wolfcry911, our comments crossed the wires, taking a look at that now.
    I’m at the mercy of the theme designer on this one…
    Not having coded it from scratch.

    # January 28, 2013 at 3:00 pm

    Thanks all!

    # January 28, 2013 at 3:03 pm

    right, when I state ‘you’, I don’t necessarily mean you personally, but whomever created the site’s stylesheet… The reset strips the default left margin or left padding that lists typically use to indent (and show the bullets). Doc’s suggestion works as well.

    I think it boils down to whether you want the bullets to lie outside the pages’ left margin or be contained within

    # January 28, 2013 at 3:12 pm

    Actually I think that collapsed one of the three column div’s top example. still issues :/

    # January 28, 2013 at 3:14 pm

    Actually I’m missing something in the translation from using the shortcodes to what produces the actual coded div structure output. That could be why the styles are not applying correctly from their demo here:
    http://inkthemes.com/wptheme/blackbird-interior/columns/
    They don’t show any bulleted lists, maybe they would not appear correctly in the demo there either?

    # January 28, 2013 at 3:17 pm

    I think the bullets should be contained within for sure.
    No offense taken wolfcry911.

    # January 28, 2013 at 3:29 pm

    .page-content-container ul {
    margin-left: 20px;
    }

    this will place a left margin on all the lists used within the page content container – their bullets will fall inside the page and won’t hang out into the left margin

    # January 28, 2013 at 3:38 pm

    That did the trick, my preferred method coding from scratch is to place a reset something like Eric Meyer’s, but then throw in a base stylehsheet.
    I used to use the CSS 4 base styles here:
    http://www.w3.org/TR/CSS21/sample.html
    It bugs me when it requires specificity in a design to put the bullets back where they belong.
    Thanks for you help spotting what was off on this one :)

    # January 29, 2013 at 10:54 am

    Using Wolfcry911 suggested CSS above:
    .page-content-container ul {
    margin-left: 20px;
    }
    Still getting mixed results in IE, at best not seeing the bullets in first column div still, and at worst the columns are collapsing and none show bullets.
    Can you say …aaaa-a-a-nnnxiety.
    thanks for any more suggestions.

    On further checking the page was cached, fine in newer IE.
    What’s anybody else seeing, is there three lists of services side by side, and all bullets showing???

    # January 29, 2013 at 12:22 pm

    Looks okay to me in IE7, 8, and 9

    # January 29, 2013 at 1:25 pm

    Awesome. thanks bunches.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".