Grow your CSS skills. Land your dream job.

Button element with span inside vertical padding issue (ie7)

  • # December 13, 2012 at 2:34 pm

    Hi there,

    I’m having a problem with some buttons in ie7, they display fine in ie8+. I’ll include some images to show the problem, along with the code. The same styling works fine on anchors, but is off when using the button element.

    The reason I use a span inside the button/anchors is because of the strange drop shadow where an image is needed and also the diagonal gradient. So I apply the background image of the shadow to the button. Then the gradient colouring to the span inside, which leaves an intentional 5px gap at the bottom, so the shadow displays without colour behind it.

    **The Pictures**

    Top line of buttons is how it should look (Firefox, Chrome, Safari, Opera, IE8+ etc). Middle line is how they display in IE7 and the bottom row show the same buttons in IE7 with a background colour to show the padding: Note, the problem button is the far right one. The rest are all anchors, which display fine! You may also notice the words cut off in the ie7 version, like each word goes onto the next line?

    ![Button in IE7](http://i46.tinypic.com/2cdcr5j.png)

    And here is the code I currently have:

    **HTML**

    This is an Anchor

    **CSS**

    button::-moz-focus-inner {
    border: none; /* overrides extra padding in Firefox */
    }
    .btn {
    background: url(../img/interface/btn-shadow-dark.png) no-repeat right bottom;
    border: none;
    cursor: pointer;
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    font: 13px “PT Sans”, Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: normal;
    height: auto;
    line-height: 24px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 0 0 5px;
    position: relative;
    text-align: center;
    *zoom: 1;
    }
    .btn:active {
    top: 1px;
    }
    .btn span {
    background: #c91922; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c91922 0%, #da656c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c91922), color-stop(100%,#da656c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #c91922 0%,#da656c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #c91922 0%,#da656c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #c91922 0%,#da656c 100%); /* IE10+ */
    background: linear-gradient(135deg, #c91922 0%,#da656c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#c91922′, endColorstr=’#da656c’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #ffe2e4;
    display: block;
    height: 24px;
    padding: 0 15px;
    }
    .btn:hover span {
    color: #fff;
    text-decoration: none;
    }

    I have tried, setting the height of the button to 29px with zero padding – and the span set to 24px but it still seems to leave a gap at the top, like the button is always going to vertically center its contents? I’ve tried playing around with vertical-align but no joy yet!

    Thanks for ready and I really hope someone can help and advice.

    Steve

    # December 17, 2012 at 8:24 am

    Hi Steve,

    I have checked your CSS and HTML as above.

    Please remove span tag from HTML and apply “.btn span ” style into “.btn”.

    After that u need to do some minor modification in CSS and will work fine :)

    Thanks
    KD

    # December 20, 2012 at 1:27 pm

    Hi Ketan, thanks a lot for you reply!

    I think the problem with that would be that the background image on .btn is transparent. So applying the background colour of the span onto .btn would display the colour red, behind the image (which is a shadow). So I’m not sure this would work :/

    # December 20, 2012 at 2:21 pm

    Does floating both the button and the span fix the issue? And/or also giving each a width?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".