Styling php button with CSS

[Jomathr]

Good day, I am quite new to web design with only 3 weeks experience and I ran into a problem that totally elude me.

I am currently working on my website and I am stuck with my "Send" button. I can't apply the style from my CSS to my php button, it is supposed to be on the right side and look like the clear button, instead I get a plain rectangle box on the left side.

[/left]

The first part of the following code is to make a clear button.

Here is the html part of the code:[/left]

[/size][/color][/font][/left]<div class="alignright"><a href="#" class="link4" onClick="document.getElementById('contacts-form').reset()"><span><span>Effacer</span></span></a><span><span><input type="submit" class="link2" value="Envoyer" id="submit-button"/></span></span>[font="Arial, Helvetica, sans-serif"][color="#555555"][size=3]

And here is the CSS code for both buttons, one in HTML and the other in php:

[/size][/font][/color][/left][/size][/font][/color][/left].link2 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(http://gatesinnovation.com/GATES/Images/link2-bgd.gif) left top repeat-x;letter-spacing:-1px;text-transform:uppercase}.link2:hover {color:#336633}.link2 span {display:block;background:url(http://gatesinnovation.com/GATES/Images/link2-left.gif) no-repeat left top}.link2 span span {background:url(http://gatesinnovation.com/GATES/Images/link2-right.gif) no-repeat right top;padding:10px 22px}] .link4 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(http://gatesinnovation.com/GATES/Images/link4-bgd.gif) left top repeat-x;letter-spacing:-1px;text-transform:uppercase}.link4:hover {color:#336633}.link4 span {display:block;background:url(http://gatesinnovation.com/GATES/Images/link4-left.gif) no-repeat left top}.link4 span span {background:url(http://gatesinnovation.com/GATES/Images/link4-right.gif) no-repeat right top;padding:10px 22px}

I am pretty sure that what is causing it is the missing in the php part, but I am unsure how to insert it in this code.If you need more info to be able to solve this I will gladly provide you with the information you request,here is the website dev link to see it in context: Contact pageThank you for your time.[/left]

Edited May 2, 2012 by Jomathr

[dsonesuk]

there is no span child elements for .link2, it is in fact the child element itself blue = parentred = children.link2 span {display:block;background:url(http://gatesinnovation.com/GATES/Images/link2-left.gif) no-repeat left top}.link2 span span {background:url(http://gatesinnovation.com/GATES/Images/link2-right.gif) no-repeat right top;padding:10px 22px} <span><span><input type="submit" id="submit-button" value="Envoyer" class="link2"></span></span> unlike .link4 .link4 span {display:block;background:url(http://gatesinnovation.com/GATES/Images/link4-left.gif) no-repeat left top}.link4 span span {background:url(http://gatesinnovation.com/GATES/Images/link4-right.gif) no-repeat right top;padding:10px 22px} <a onclick="document.getElementById('contacts-form').reset()" class="link4" href="#"><span><span><cufon class="cufon cufon-canvas" alt="Effacer" style="width: 48px; height: 15px;"><canvas width="56" height="18" style="width: 56px; height: 18px; top: -2px; left: -1px;"></canvas><cufontext>Effacer</cufontext></cufon></span></span></a> to get this to work you need to give the outer span a class name, then you can target both

span.link2_span {display:block;background:url(http://gatesinnovation.com/GATES/Images/link2-left.gif) no-repeat left top}span.link2_span span {background:url(http://gatesinnovation.com/GATES/Images/link2-right.gif) no-repeat right top;padding:10px 22px}

<span class="link2_span"><span><input type="submit" id="submit-button" value="Envoyer" class="link2"></span></span>

[Jomathr]

I tried exactly what you said and I still get that nasty blue rectangle instead of the button I intend to have, I added the class and the child on the CSS stylesheet and replaced the code for my button in my html, the only difference is that it's lower on the page. I have a hard time wrapping my head around CSS and the relation to html. you can go check http://www.gatesinnovation.com/GATES/contacts.php to see what it does, I doubt that the problem come from somewhere else in the code but if it is, I have no clue where. When I tried using html for both button (using post method) the button was correctly displayed but wasn't posting anything (with the same CSS). Maybe I just didn't understand what you meant in your post, I've been at this and a js problem for 20 hours straight again thanks for your time

[dsonesuk]

It would probably be easier to just use a fullsize image for the background of the input button instead, but because it is a input button you will have to remove default borders, and adjust padding, margins that are being applied by your stylesheet to all input buttons, and do it in such a way that it will override this current styling. A id ref to input as in #contacts-form input, will take higher precedence over .link2 that targets styling already defined by #contacts-form input, to override you add the id ref as well #contacts-form input.link2. IF you still what to use this method, try this! this is only tested using firefox firebug to adjust id, class ref, apply other css styling to get what i think you are looking for.

.link2_span {    background: url("http://gatesinnovation.com/GATES/Images/link2-left.gif") no-repeat scroll left top transparent;    display: block;    float: left;    width: 313px;    cursor: pointer;}.link2_span span {    background: url("http://gatesinnovation.com/GATES/Images/link2-right.gif") no-repeat scroll right top transparent;    display: block;    float: right;}#contacts-form input.link2 {    border: medium none;    display: inline-block;    font-size: 15px;    height: 37px;    letter-spacing: -1px;    line-height: 1.2em;    margin: 0 7px;    text-decoration: none;    text-transform: uppercase;    cursor: pointer;padding:0;}#contacts-form input.link2:hover, #contacts-form .link2_span:hover .link2 {    color: #336633;}