Solved

Effect on button

Posted on 2016-09-14
11
60 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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 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 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 58

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 58

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
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…
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…

631 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