Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Can't get CSS to control form submit button.

Posted on 2012-08-14
5
Medium Priority
?
481 Views
Last Modified: 2012-08-14
Hi

I am having trouble getting my css to control the background color of the submit button on a form.

I created a separate stylesheet just for the button.  The stylesheet name is rowby-canfield.css

Here's the only css on that stylesheet:

input.button {
	background-color: #ff0000;
}
	

Open in new window


Also, once I get the background color working, I want to add an image for the button.

In my next comment I will provide the URL.

Thanks

Rowby
0
Comment
Question by:Rowby Goren
5 Comments
 
LVL 34

Accepted Solution

by:
Paul MacDonald earned 1200 total points
ID: 38292411
We (I) don't have permission to read "/templates/friendsofcanfield/css/rowby-canfield.css" so the CSS is never applied.  Check the permissions on your end or even that the path exists.
0
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 400 total points
ID: 38292459
See http://www.laprbass.com/RAY_temp_rowby.php

<?php // RAY_temp_rowby.php
error_reporting(E_ALL);

// CREATE A VARIABLE FOR OUR HTML
$xyz = 'Hello World';

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="iso-8859-1" />
<meta http-equiv="Expires" content="Mon, 01 Jan 1990 01:00:00 GMT" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css" media="all">
.foo {
    background-color: #ff0000;
    border:2px dotted green;
}
</style>
<title>HTML5 Page</title>
</head>
<body>
<p>$xyz</p>
</body>
<form>
<input class="foo" type="button" />
</form>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 400 total points
ID: 38292603
If you have to sylish a submit element you have to write:

input[type="submit"]{
      background-color: #ff0000;
        background: url('myImage.jpg');
        background-position: 4px 4px;
        background-repeat: no-repeat;        
}

or in onle line only
      
input[type="submit"]{
      background: #ff0000 url('myImage.jpg') 4px 4px no-repeat;        
}

Cheers
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 38292806
Hi,

The most interesting solution was paulmacd's permission issue.  Being used to another server I assumed my uploaded stylesheet was readable by the public.  I was wrong.  And fixed the permissions.

And the other solutions... : marqusG's specifics re image, and Ray's test page all contributed to the ultimate solution.

Seemed like a minor thing -- a submit button's image -- but it works now -- and the permissions was the big initial stumbling block.   I'll pay more attention to permissions when I am on servers I am not used to!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month21 days, 4 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question