Z-Index/CSS Problem?

  • Resolved animeshtripathi

    (@animeshtripathi)


    12 years, 1 month 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. 😛

    Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • esmi

    (@esmi)

    12 years, 1 month ago

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

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month 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.

    esmi

    (@esmi)

    12 years, 1 month ago

    Firebug is 10x better than Chrome’s Inspector.

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month ago

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

    esmi

    (@esmi)

    12 years, 1 month ago

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

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month 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 😛 I feel so stupid right now.

    esmi

    (@esmi)

    12 years, 1 month 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;.

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month ago

    Worked like a charm 😀

    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. 😀

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month 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?

    esmi

    (@esmi)

    12 years, 1 month ago

    No problem 🙂

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 1 month ago

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Z-Index/CSS Problem?’ is closed to new replies.