Custom Form Buttons

[TruePaige]

Hey guys, I've been digging myself out of Parse errors, so maybe I'm just missing something obvious, but I'm trying to make custom buttons for the inputs on some forms, and I just don't know whats wrong with my code?

First time trying to attach code so hope I don't mess it up...


Any help is greatly appreciated.

edit: Hmm the attach code thing kind of garbled it all together...

but it's still readable. The first bit is the stylesheet, and the 2nd bit is the snippet of code in my php page.

 

[TruePaige]

Hey I got it. =)

I ended up scrapping the input class = btn thing with CSS for styling it for..

echo '<br><button type="submit" name=bsubmit value="" > <img

src="images/button-notes.gif "> </button>';

I wonder why I couldn't apply the img as the button until I did that?

The only lil' hiccup I'm working on now is why the button is still behind the image...which isn't a big deal with larger ones, but is a bit annoying..hmm

 

[911paramedic]

Originally posted by: TruePaige

I ended up scrapping the input class = btn thing with CSS for styling it for..

A class is a CSS element.

BTW, add a color in case your image isn't available for some reason. Just add #333333 <-some color, in your background declaration, like:

background: #333333 url(button-notes.gif) no-repeat top center;

If its like that, you can also use #333 as shorthand. (Same for any repeating code, 009933 is the same as 093)

 

[TruePaige]

Originally posted by: 911paramedic

Originally posted by: TruePaige

I ended up scrapping the input class = btn thing with CSS for styling it for..

A class is a CSS element.

BTW, add a color in case your image isn't available for some reason. Just add #333333 <-some color, in your background declaration, like:

background: #333333 url(button-notes.gif) no-repeat top center;

If its like that, you can also use #333 as shorthand. (Same for any repeating code, 009933 is the same as 093)

Ah, you fixed my last problem.

I learned something today...

It's not the way you say it, it's the syntax you say it with.

I was trying to add a BG color and had, for example:

background: #333333; url(button-notes.gif) no-repeat top center;

So I came back and looked at this thread and you had posted a solution...

I think your brain fries looking at PHP then trying to add CSS to it.

..especially when your brain isn't situated right in the first place .=p

 

[911paramedic]

If you have FF I highly recommend the web dev tools and/or Firebug plugins. In addition, XRAY is the greatest thing since sliced bread for troubleshooting. (google "xray css" to find it.)

P.S. w3schools is great for learning CSS. (As well as other languages.)

 

[ahurtt]

<img src="images/button-notes.gif "> - works

vs.

background:url(button-notes.gif) - doesn't work

You left off the "images/" from url path in the css id definition. My fee will be $150 please. You can paypal it to me.

 

[911paramedic]

Originally posted by: ahurtt
<img src="images/button-notes.gif "> - works

vs.

background:url(button-notes.gif) - doesn't work

You left off the "images/" from url path in the css id definition. My fee will be $150 please. You can paypal it to me.

Perhaps his CSS sheet was in the /images folder, and since images are referenced from the CSS's location, it may have been correct.

^His fee plus $1 please.

 

[ahurtt]

Nevermind, after rereading his original source code again, more carefully this time, I see what he was trying to do incorrectly. He was assigning his ID to a div element and putting inside it a submit button with a class attribute value for which there was no corresponding css class definition. Obviously this would not apply the background image to the button object itself.