Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Effect on button

Posted on 2016-09-14
11
Medium Priority
?
62 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 11

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
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 
LVL 11

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 11

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 1000 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 11

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 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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 59

Accepted Solution

by:
Julian Hansen earned 1000 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

688 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