Solved

Effect on button

Posted on 2016-09-14
11
44 Views
1 Endorsement
Last Modified: 2016-09-15
Hi,
I have
          input[type="button"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

but I do not see the effect to the buttons on the page. Why?
1
Comment
Question by:HuaMinChen
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
The most likely reason would be that there is another style that's overriding this one. This one works for me. Can you post a link to the problem page?

Another possibility is that you are using a <button> tag instead of an <input type="button"> tag.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Can you please refer to this?
http://my-friend.co/Own_rec3/Default.aspx?userid=NEW

as I want to have round corner on both Save and Cancel buttons.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
This is from your source code. You can see the type is submit instead of button.
    <input type="submit" name="bt_save" value="Save" id="bt_save" accesskey="S" style="width:130px;" />
    <input type="submit" name="bt_cancel" value="Cancel" id="bt_cancel" accesskey="C" disabled="disabled" class="aspNetDisabled" style="width:130px;" />

Open in new window

Adjust your CSS accordingly. (See line 1)
          input[type="submit"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I am not sure if the details you see is really having some difference from the codes I'm talking about. What to adjust to these?

    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" />
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" />

Open in new window

0
 
LVL 3

Expert Comment

by:pradeep kumar
Comment Utility
Hi,

you can do this like also:

input#bt_save
{
-moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
}

thanks
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
I put this
           input[type="button"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

but I still do not see the effect after I've re-published the project.
0
 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 250 total points
Comment Utility
Hi,

please see attached screenshot in your code submit button showing type="submit" not button than how above css will apply on that.

You have to 2 things for that.

1) change the input[type="submit"] or
2) work with input type id="bt_save"

just change the 1st line of your css it will work.

thanks
submit.PNG
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I do not know where

type="submit"

is, as I only see these codes
    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" />
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" />

Open in new window

0
 
LVL 3

Expert Comment

by:pradeep kumar
Comment Utility
If you don't have access to change in your code than please change in your css. Or you can do it by #id to apply the effects.

thx
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
Comment Utility
You have this style in your CSS
         input[type="bt_save"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

Which does nothing - you can remove it
As suggested in the posts above replace it with
         input[type="submit"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
Alternatively - just give the buttons you want to have rounded corners a class
    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" class="rounded"/>
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" class="rounded"/>

Open in new window


.rounded {
  border-radius: 7px;
  border: 1px solid gray;
  padding: 7px;
}

Open in new window

1

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now