CSS coding help

  • Resolved Miz.Michele

    (@mizmichele)


    11 years, 2 months ago

    I added related posts to single blog posts and a bullet point is coming up next to the picture that I do not want.

    The CSS is

    .related-posts {
width: 100%;
display: block;
overflow: hidden;
margin: 20px 0;
}
.related-posts h4 {
color: #840000;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
padding:  0;
}
.related-posts ul li {
float: left;
width: 30%;
margin: 0 4.3% 3% 0;
}
.related-posts ul li:last-child {
margin-right: 0 !  important;
}
h5.related-article {
margin: 10px 0;
}
h5.related-article a {
color: #333333;
font-size: 16px;
font-weight: bold;
line-height: 24px;
text-decoration: none;
}
h5.related-article a:hover {
color: #333333;
text-decoration: underline;
}

    In firefox, there is a bullet point showing next to the related posts and it looks awful. I’m not a great coder but I tried and used firebug and can see it is inherited from somewhere so I tried this;

    .related posts.entry ul .entry {
list-style: none ! important;
}

    but that doesn’t work because the bullet is still there.

    Here’s a link to a post so you can see it;
    http://www.lasvegasworldnews.com/where-are-the-conning-gann-twins-simon-gann-jordan-gann/12459/

    How can I get rid of the bullet and how can I move the whole block over to the left so there is no margin and it lines up better?

    Thank-you much.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    I don’t see how this relates to WordPress. You can ask CSS queries in CSS forums such as http://csscreator.com/forum

    Thread Starter Miz.Michele

    (@mizmichele)

    11 years, 1 month ago

    [Moderated]

    My question is related to wordpress. That’s why I use wordpress -because of the community

    WPyogi

    (@wpyogi)

    11 years, 1 month ago

    Hi Michele, the bullet in question is from this CSS:

    .entry ul, .entry ol {
    list-style: inherit;
    margin-bottom: 30px;
    margin-left: 30px;
}

    If you put the related posts class before the above and change the list-style and margin-left, that should fix the issue.

    .related-posts .entry ul {
...
}

    On the other we do often refer people to CSS forums for CSS questions, though you are right we often answer them here as well. It’s not consistent and perhaps that’s not ideal. Sorry it landed on you hard.

    Thread Starter Miz.Michele

    (@mizmichele)

    10 years, 5 months ago

    Thanks very much for the help and the answer.
    I still don’t get it though.
    I now understand where it is inheriting the attributes from but if I change it on that portion that you mentioned I am thinking it will other things up so I thought I should override it somehow . . I am trying though and I thank you again for your help.

    Thread Starter Miz.Michele

    (@mizmichele)

    10 years, 4 months ago

    Update – took me 9 months but I finally got it. If anyone cares, I was making a separate CSS entry for the related posts to display none but I had to go under the particular heading and add the none.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS coding help’ is closed to new replies.

Tags