styling lists (bullets) margins/padding

  • The bullets of the list on my homepage keeps merging into the div to the left, despite the padding and margins I’ve styled into both the list and the div to the left.

    The site is here: https://www.upmarketmerchant.com/

    Any ideas?

    Relevant CSS:

    List:

    .post ul {list-style-type: square; margin-left: 5px; padding-left: 5px;}
    .post ul li {margin-left: 5px; padding-left: 5px;}

    Sidebar to the left:

    .picturecallbox {float: left; width: 250px; margin: 20px 10px 5px 0px; padding: 2px; background: #efefef; border: 1px solid #10466F; color: #000000; font-family: “Trebuchet” “Arial” “Microsoft Sans serif” “sans serif”; font-size: 70%;}

    Relevant HTML:


    <div id="post">
    <div class="picturecallbox">
    <img src="https://www.upmarketmerchant.com/wp-content/themes/upmarket-merchant-actual/large-visa-mastecard-amex-discover.gif" alt="" />

    In as little as one business day, you could have a merchant account that lets you process all major credit cards, plus debit cards and e-checks.
    </div>
    <h2>Get a merchant account online!</h2>

    • Leading ecommerce and small-business payment processor.
    • Compatible with vast majority of shopping carts.
    • Easy application.
    • No set up fee.
    • No early termination fee - leave any time.
    • Low discount rate.
    • Low monthly fees.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Are you seeing the problem in a particular browser? In all of them?

    Thread Starter joelwalsh

    (@joelwalsh)

    IE and Firefox; haven’t tried the others…why, you don’t see it?

    The bullets are blending into the credit card logos’ box border.

    Try changing your picturecallbox class to this:

    .picturecallbox {float: left; width: 250px; margin: 20px 5% 5px 0px; padding: 2px; background: #efefef; border: 1px solid #10466F; color: #000000; font-family: "Trebuchet" "Arial" "Microsoft Sans serif" "sans serif"; font-size: 70%;}

    Thread Starter joelwalsh

    (@joelwalsh)

    VK–that did it!

    Thank you, thank you!

    What do you think of it now? I’m going to release it as a theme.

    It’s a content management-style theme.

    Glad it helped! Happy holidays….

    Actually, it’s a very nice setup for a cms-type merchant site. It’s not busy, it’s not graphics-heavy, it loads fast, it’s clean, and it seems to be customizable. I think you’ve done very well.

    Thread Starter joelwalsh

    (@joelwalsh)

    Thank you VK,

    happy holidays, too

    I’m so glad you understood the point of the theme…function over…well, it’s got form too, but not pizaaaz

    It has a couple new features:

    1. Free reprint template: https://upmarketmerchant.com/wp-content/themes/upmarket-merchant-actual/reprint.php?p=2

    2. Site map template: https://upmarketmerchant.com/site-map

    Thanks Joel,

    Your site looks very nice, clean cut ??

    There does appear to be a little scroll bug though in FF.

    Well done! Happy Holidays

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘styling lists (bullets) margins/padding’ is closed to new replies.