CSS Issue in Chrome / Safari - CSS-Tricks

This topic is empty.

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

1 2 →

Author

Posts
April 12, 2013 at 7:15 am #44061

KevinStrong
Member

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 #131520

Paulie_D
Member

You are missing an opening angle bracket

…..> [HERE] input type

April 12, 2013 at 7:23 am #131521

KevinStrong
Member

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 #131523

Paulie_D
Member

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 #131525

Paulie_D
Member

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

April 12, 2013 at 7:44 am #131528

Mag
Participant

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 #131530

Paulie_D
Member

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

April 12, 2013 at 7:50 am #131531

Mag
Participant

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 #131533

Paulie_D
Member

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?

April 12, 2013 at 7:58 am #131535

Mag
Participant

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

April 12, 2013 at 8:02 am #131536

Paulie_D
Member

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 #131538

Paulie_D
Member

>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 #131540

KevinStrong
Member

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 #131541

Paulie_D
Member

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 #131544

KevinStrong
Member

That did it Paulie, thanks man.

I’m glad they keep you around :)
Author

Posts

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

1 2 →

The forum ‘CSS’ is closed to new topics and replies.