WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Z-Index/CSS Problem? (12 posts)

  1. animeshtripathi
    Member
    Posted 2 years ago #

    Hi guys,

    My website is at http://thinkrasta.com/home

    On the featured post, where you can see the comment box (number of comments bubble), you'll see that it's getting cut where the translucent Javascript overlay starts.

    I want to bring the rest of the bubble over the black overlay.

    I'm trying to use z-index but it isn't working. Here's my current code for the Featured Image and Post, as well as my Index.PHP:

    CSS code: http://pastebin.com/bUMhnpDh
    PHP code: http://pastebin.com/Wpi9Uk6i

    Hope you guys can help me out, I've been stuck at this for quite some time now, might be an easy fix. :P

    Thanks.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. animeshtripathi
    Member
    Posted 2 years ago #

    Hey, thanks for the quick reply. I haven't tried Firebug, currently I'm using Chrome's inbuilt 'Inspect Element' feature for realtime CSS edits...I'll give Firebug a try.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Firebug is 10x better than Chrome's Inspector.

  5. animeshtripathi
    Member
    Posted 2 years ago #

    okay...do you have any clue as to what might be the problem in this case?

  6. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    It's got nothing to do with z-index. The .commentscap block simply isn't tall enough at 30px. Try increasing its height.

  7. animeshtripathi
    Member
    Posted 2 years ago #

    SHITTT. You've gotta be kidding me. I increased the height, how do I move the box down to overlap the overlaying portion, though.

    Thanks for the suggestion :P I feel so stupid right now.

  8. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    You've gotta be kidding me

    I agree that initially it really looked like a z-index problem but this is why Firebug is so cool. It lets you play with and adapt the live CSS in your browser, so I was able to pull the comment bubble upwards and have a good look at it away from the overlay. That's when it got obvious :-)

    Try increasing the height of .commentscap to 36px. Then add position:relative;top:6px;.

  9. animeshtripathi
    Member
    Posted 2 years ago #

    Worked like a charm :D

    Thank you so much! I was trying to use position:absolute and define margin-left and margin-bottom. LOL. I guess I was kinda saturated over this error.

    Thanks a ton again. :D

  10. animeshtripathi
    Member
    Posted 2 years ago #

    One more thing,

    In the grid of posts below the featured post,
    I have a bg-image which consists of a dotted border. only the top and left parts of it are showing currently. What can I do to resolve this issue?

  11. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    No problem :-)

  12. animeshtripathi
    Member
    Posted 2 years ago #

    can you help me with that? I can't operate Firebug. :/

Topic Closed

This topic has been closed to new replies.

About this Topic