3

I finally figured out the cause of my problem, but I cannot determine a solution, so your help is needed!

I'm trying to style a button, and it looks great in FireFox and Internet Explorer, but not in Chrome! I'm using negative margins here, but the issue still exists even if they're positive margins.

Here's the code, simplified to illustrate the problem:

<div style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> div </span>
</div> <!-- DIV works the same in all browsers -->

<button style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> button </span>
</button> <!-- BUTTON ignores margins in Chrome only -->

​ Here's the expected result in FireFox:

Expected

And here's the issue I see in Chrome:

Actual in Chrome

See it yourself: http://jsfiddle.net/ScottRippey/SZV45/13/

It seems to me like the margins are being ignored. However, I cannot seem to disable margin collapsing for the button!
I've tried: display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;

Any ideas?

2
  • 7
    Another day, another WebKit bug...
    – BoltClock
    Sep 13, 2012 at 18:29
  • 1
    @BoltClock That's not what I wanted to hear! Come on, think out of the box. Sep 13, 2012 at 18:51

1 Answer 1

2

Discard the negative margin, move the width/height to .button (and adjust for margin), and use position instead (example):

<div class="button">
    <span class="inner"> div </span>
</div>

<button class="button">
    <span class="inner"> button </span>
</button>
.button {
    display: inline-block;
    background: rgba(255,0,0,0.5);
    border: none;
    padding: 0;
    margin: 20px;
    position: relative;
    width: 60px;
    height: 60px;
    vertical-align: top;
}
.inner {
    display: block;
    background: rgba(0,0,255,0.5);
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}
1
  • +1 Good answer, thank you. However, I can't accept it because I forgot to mention that I'm actually using negative margins to achieve the layout I want. I will update my question accordingly, but thank you for this correct response. Sep 13, 2012 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.