?
Solved

making css form buttons pretty

Posted on 2009-02-22
8
Medium Priority
?
636 Views
Last Modified: 2012-08-13
Hello,

I usually use the below css  (bottom page) on a page for my form buttons, it
works nicely in ff and IE, but with regards to the W3C CSS Validator I get
the following errors.

input.btn attempt to find a semi-colon before the property name. add it

input.btn Property progid doesn't exist : DXImageTransform

input.btn Parse Error DXImageTransform.Microsoft.Gradient (GradientType=0,
StartColorStr='#ffffffff', EndColorStr='#ffeeddaa');

input.btn Parse Error }

If any one knows how to make this errorless I would be grateful, it does
appear as a nice botton etc lol

any way if any one has input I am grateful

regards

k

-~-~-~-~-~-~ the page with botton is below -~-~-~-~-~-~




<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing css form button</title>
<style type="text/css">
<!--
input.btn {
 color:#050;
 font-family: Tahoma, Arial, Verdana, Monaco, sans-serif;
 font-size:10px;
 font-weight:bold;
 background-color:#fed;
 cursor:pointer;
 border:1px solid;
 border-top-color:#B2876A;
 border-left-color:#B2876A;
 border-right-color:#B2876A;
 border-bottom-color:#B2876A;
 filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,
StartColorStr='#ffffffff', EndColorStr='#ffeeddaa');
}
-->
</style>

</head>
<body><form action="" method="post">
  <p>
    <input name="ahithere" type="submit" class="btn" id="ahithere"
value="Submit">
</form>
</body>
</html>
0
Comment
Question by:thatelvis
  • 5
  • 3
8 Comments
 
LVL 9

Expert Comment

by:unassassinable
ID: 23704113
could you please post a link to the .css file so I can look at all lines?  Usualy parse errors have to do with the area AROUND the given line, sometimes not with the line itself
0
 
LVL 9

Expert Comment

by:unassassinable
ID: 23704117
nevermind, i just recreated it and am looking at it now
0
 
LVL 9

Expert Comment

by:unassassinable
ID: 23704126
ah, ok...its refering to the last style...

 filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,
StartColorStr='#ffffffff', EndColorStr='#ffeeddaa')

this is not universally accepted on all browsers.  Make the gradient part of an image file and put a background: url ('images/asdf.jpg');
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 9

Expert Comment

by:unassassinable
ID: 23704133
to further explain my answer, look at the button in firefox.  The gradient doesn't work.  There is a way to do this, mind you, ive used it before, but your CSS will not validate with it.
0
 
LVL 1

Author Comment

by:thatelvis
ID: 23704194
i tested it many times and saw it working in the firefox over the last 2 years. I am testing it again in the latest ff and all is working. are you using a mac or pc, i have only tested on a pc, and another persons mac.


regards

k
0
 
LVL 9

Accepted Solution

by:
unassassinable earned 2000 total points
ID: 23707323
Ive boon looking for a page that can better explain it. Take a look at the bottom of this page:

http://www.tankedup-imaging.com/css_dev/css-gradient.html

Here's another forum with same issue:

http://csscreator.com/node/2451

If it works for you, great.  It doesnt work for me an probably most people that use firefox. It doesnt matter what OS im running, its a browser rendering issue.  Either way, it doesnt work in windows firefox or linux, just incase you wanted to know.  Its proprietary Microsoft code, and will not validate as its not W3C compliant.  
0
 
LVL 1

Author Comment

by:thatelvis
ID: 23709130
wow i will give this a go and come back to you

Make the gradient part of an image file and put a background: url ('images/asdf.jpg');

thanks unassassinable

k
0
 
LVL 1

Author Closing Comment

by:thatelvis
ID: 31549739
Thanks I will just use an image

http://cssbutton.com/forms/

regards

k
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month14 days, 15 hours left to enroll

839 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