Solved

Effect on button

Posted on 2016-09-14
11
52 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 22

Expert Comment

by:Kim Walker
ID: 41799067
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
ID: 41799125
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 22

Expert Comment

by:Kim Walker
ID: 41799127
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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 10

Author Comment

by:HuaMinChen
ID: 41799172
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
ID: 41799220
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41799233
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
ID: 41799270
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
ID: 41799280
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
ID: 41799285
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 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 41799345
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 55

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41799348
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
VB.NET Textbox input validation 4 37
What is the optimum percentage to save images for webs. 4 19
Set time on Session (ASP) 14 22
Google Maps with Webforms 1 12
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 …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

840 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