Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Button element with span inside vertical padding issue (ie7)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41324
    grimski
    Participant

    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

    #117777
    Ketan
    Member

    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

    #118281
    grimski
    Participant

    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 :/

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.