CODEWITHSUNDEEP
htmloverflowcss
Brad Dwyer
Brad Dwyer

Reputation: 6484

Overflow: hidden isn't working consistently

I am working on some buttons. I want to have a rollover state and I have this in an image in a div with overflow:hidden to hide the state that's not active. It works sometimes but sometimes it looks like this:

Broken

The weirdest part is that when I try to use the Chrome Web Inspector it fixes itself! And nothing looks weird in the HTML/CSS.

Working

I'm super confused as to why it isn't consistently either broken or working.

Here's the HTML:

<div class="hunting_card_button">
    <div class="hunting_card_icon" id="gift_to_friend">
        <img src="/images/icons/friend2.png?1" />
    </div>
    Friend
</div>

And the relevant CSS:

.hunting_card_button {
    width: 65px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    margin: 0 2px 0 2px;
}
.hunting_card_icon {
    position: relative;
    right: 0;
}
.hunting_card_icon:hover {
    right: 65px;
    cursor: pointer;
}

Upvotes: 1

Views: 380

Answers (1)

Brad Dwyer
Brad Dwyer

Reputation: 6484

The solution was to change one of its containers to a div from a span.

Upvotes: 1

Related Questions