A few CSS nitpicks I can't figure out

  • Unknown's avatar
    riffraffrandy · Member ·

    I’m trying to finish building this blog, but the following little CSS issues are bugging me:

    1) For some reason, the post preview images (.home . post img) on the home page are being clipped at the bottom by 1 px. Then on the category and post pages they are back to their normal height. It’s not really noticeable, but it still bugs me.

    2) The post preview images on the category page (.category .post img) have an annoying line running through them that you can see when the opacity effect is applied. Using border-bottom commands won’t get rid of it. Might be a h2 or h3 issue?

    3) No idea why using the #top url doesn’t bring you to the tippy top when clicked; it brings you to the almost top (example in bottom right footer image). Maybe using a text widget and html is the answer and not the image widget?

    Save me CSS wizards!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    1) That’s because you have applied a negative margin to the images in the Text editor. First, I don’t really see why you need this margin, second (since you have the Custom Design upgrade), changes like this should be taken care of in the CSS editor, not the Text editor.

    2) I’m not seeing any line in Firefox or Safari.

    3) Try adding this: 

    #top {
    margin-top: -5em;
    padding-top: 5em;
}
  • Unknown's avatar
    riffraffrandy · Member ·

    Thanks justpi!

    Problems 1 and 3 solved!

    2) In Safari this is a non-issue (everything looks good). But in Firefox, I still see the horizontal lines that want to show up between posts on the category pages (e.g. http://ocdstyle.com/category/obsessed-w/). Those dividing lines are causing small spacing issues, and I want to get rid of them. I’ve made the images more transparent to help you see the lines running through the images.

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.

    Forgot to explain no.3. Modularity Lite happens to have a div with the ID “top”: it’s the div that encloses the blog title, tagline and top menu. So your link links to that div instead of the top of the browser window.

    As for no.2, yes, I can see the line now. It’s a stupid hr tag in the HTML of the theme (separates posts on category and archive pages). Add this: 

    .archive hr {
height: 0;
}
  • Unknown's avatar
    riffraffrandy · Member ·

    Very informative stuff. All fixed up now. Thanks again :)

  • The topic ‘A few CSS nitpicks I can't figure out’ is closed to new replies.