Question

I have a very peculiar problem concerning formatted input buttons.

On my first page, I created a css rule named “button” for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below

the css for this button is below

.button {
    width: 100%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}

In html, it looks like this:

<a href="dashboard.html">
  <input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>

The problem is, I’ve copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn’t format the buttons. strangely enough, it appears right in dreamweaver

but in any browser, it loses it’s formatting

Here is the css for the parallel buttons

.2buttons {
    width: 40%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}

and here is the html

<a href="report.html">
  <input class="2buttons" type="button" value="OK"/>
</a>

strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.

Answer 1

There two thing in your code.

first
Never start class &ID name with numerical number.

Write like this .buttons2 instead of this .2buttons.

& Second

Write like this

border:none !important; 

Instead of this:

border:none; !important