Remove bullets from text widget

  • Resolved Charlie L

    (@charlielivingston)


    10 years, 10 months ago

    So in Chrome, not Firefox, there’s a bullet appearing before the ‘Best Hosting’ title in a text widget in my sidebar, and I can’t work out why. Possibly there’s something wrong with the HTML in the list before? But I’m not sure what…

    Help appreciated.

    My site can be found here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • CrouchingBruin

    (@crouchingbruin)

    10 years, 10 months ago

    When I examine the widget using Firebug in Chrome, it looks like it uses the “user agent stylesheet” to style the widget, which is an LI (list item) element. Meaning it uses whatever the default style is in Chrome for LI, and that style is:

    li {
display: list-item;
text-align: -webkit-match-parent;
}

    Which is why you’re seeing a bullet (it tries to display the widget as a list item, since it is, in fact, a list item).

    See if you can add this CSS somewhere:

    .sidebar li {
display : inline;
}

    Thread Starter Charlie L

    (@charlielivingston)

    10 years, 10 months ago

    So adding that CSS has removed the bullet, which is great, but it has messed up the spacing of the sidebar a bit. Everything’s closer together.

    CrouchingBruin

    (@crouchingbruin)

    10 years, 10 months ago

    Then add a margin-top to your widget LI DIV elements:

    .sidebar li {
display : inline;
}

.sidebar li div {
margin-top: 20px;
}
    Thread Starter Charlie L

    (@charlielivingston)

    10 years, 10 months ago

    Using this code and everything’s dandy: 

    .sidebar li {
list-style-type:none;
}

    Thanks again for the help. 🙂

    CrouchingBruin

    (@crouchingbruin)

    10 years, 10 months ago

    Ah, great, congrats!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove bullets from text widget’ is closed to new replies.