I am having trouble getting my asp:button to style properly.
<asp:Button ID="btnSubmit" CssClass="button-large" Text=" Get free wi-fi " OnClick="btnSubmit_Click" runat="server" />
.button-large {
border-radius:10px;
color: #ffffff;
font-family: andes_condensedregular, Tahoma, Arial, sans-serif;
background-color: #94C95C;
padding-top:10px;
padding-bottom:10px;
text-decoration:none;
}
I have two aspx pages, the first page has a button to connect to wifi, then if it connects successfully, the second page loads. My stylesheet is working for the rest of the page. The button on the first page is a different colour and much more rounded than it should be. The second page has the same button (same class) and it is as it should be. The font colour for the button is meant to be white, however I tried changing it to black and this change happens on the first-page button as well, so it is clearly taking something from the css, but nothing happens when I try changing the background colour.
After reading various question/answers on here, I have tried inline styles, using the ID (btnSubmit), labelling the background colour as !importantin the css, and
input[type="submit"]
{
//css coding
}
but none of them have worked.
It works fine when I load it locally, but when I test on various devices (ipad, iphone and an android tablet), it goes wrong.
Does anyone have any more suggestions?
Are there any additional stylesheets on the first page that aren't on the second? It's possible that there is a style from somewhere else overriding your styles somewhere.
Are you using Chrome? If you bring up the Chrome dev tools and inspect the button, you should be able to see the styles that are being applied to the button and where they are coming from.