Grow your CSS skills. Land your dream job.

CSS Issue in Chrome / Safari

  • # April 12, 2013 at 7:15 am

    Hey gurus,

    Can someone please explain to me why this code isn’t working on chrome and safari?

    HTML:

    `

    input type=”image” name=”submit” id=”af-submit-image-1731798193″ class=”image” alt=”Download” tabindex=”501″>

    ( *I had to remove part of a couple of “>” in this html above for it to show up. Sorry if it’s not allowed to post. )

    .btn.green {
    background: -moz-linear-gradient(center top , #5DBB73 0%, #2D9047 100%) repeat scroll 0 0 transparent;
    border-color: #1D692D;
    box-shadow: 0 1px 1px #94DDA6 inset, 0 1px 2px rgba(0, 0, 0, 0.61);
    color: #FFFFFF;
    font-size: 17px;
    height: 39px;
    line-height: 56px;
    margin-left: 300px !important;
    margin-top: 15px !important;
    padding: 8px 8px 8px 29px;
    width: 143px;
    }

    .image {
    color: #FFFFFF;
    font-family: Helvetica Neue;
    font-size: 17px !important;
    font-weight: bold;
    text-shadow: 0 1px 2px #114A1E, 0 1px 0 #114A1E;
    }

    It’s supposed to be a green button with white text. It’s working well in firefox,
    but it’s not showing the text of the button in chrome or safari

    # April 12, 2013 at 7:20 am

    You are missing an opening angle bracket

    …..> [HERE] input type

    # April 12, 2013 at 7:23 am

    Paulie I have the openining angle on my website. I had to remove it as it wouldn’t let me post the full HTML

    Here’s the webpage it’s on: http://100freeplugins.com/members/edwin/

    # April 12, 2013 at 7:31 am

    I know this is going to sound silly…but what isn’t working?

    Is it something wrong with the input?

    What is it you are trying to do?

    # April 12, 2013 at 7:34 am

    Ah…I don’t think you have defined the `src’ of the image…could that be it?

    Mag
    # April 12, 2013 at 7:44 am

    If you change type to submit you would make the text to show in chrome..

    I mean this:
    type=”submit”

    # April 12, 2013 at 7:46 am

    I’m assuming from the other code [`id="af-submit-image-1731798193"`] that this is supposed to be an image.

    Mag
    # April 12, 2013 at 7:50 am

    KevinStrong wrote in the first post that: “It’s supposed to be a green button with white text.”
    There’s no mention there’s supposed to be an image anywhere.. ;)

    # April 12, 2013 at 7:55 am

    Ah, you are correct…but this would imply that it is an image.

    type=”image” & class=”image”

    If we change the type to `submit` and add `value=”Download”` does that do it?

    Mag
    # April 12, 2013 at 7:58 am

    Yeah:) I’ve just tested that in jsfiddle in chrome..

    # April 12, 2013 at 8:02 am

    Hmmm….no apparently it doesn’t…there’s some weird stuff happening.

    I do know you can do this without the wrapping div

    http://codepen.io/anon/pen/siwkv

    # April 12, 2013 at 8:03 am

    >Yeah:) I’ve just tested that in jsfiddle in chrome..

    Do you have a link because Codepen was funky….perhaps I messed it up somehow.

    # April 12, 2013 at 8:05 am

    Thanks for the help so far guys.

    That change defnitely made the text show up – but now I’m getting
    a gray inside the button in all browsers:

    # April 12, 2013 at 8:10 am

    Try `background:none ` on `.image`.

    It got funky in Chrome when I did that in Codepen and left a box-shadow which I’m trying to figure out.

    # April 12, 2013 at 8:19 am

    That did it Paulie, thanks man.

    I’m glad they keep you around :)

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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