We Keep Coding

Trouble with CSS in ASP.NET 4.6

I have a project I've been working on for the past couple of months. Everything has been working fine up till today. When I came I noticed that all my button sizes were the same. I like to use the developer tools in Chrome to help debug my websites, and when I looked to see why the buttons weren't displaying properly; nothing seemed amiss. So will you please help me identify what is going on and how I should fix it?
Here is the .aspx code:
<div class="row section text-center">
<h2><%: Page.Title %> Page</h2><br />
<asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
<hr />
</div>
<div class="row col-xs-12 text-center">
<div class="col-xs-6 text-center">
<asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
</div>
<div class="col-xs-6 text-center">
<asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
</div>
Here is what the page looks like now:
This is the CSS for the buttons:
.stButton {
width: 190px;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align:center;
}
.stButton-lg {
width: 325px !important;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align: center;
}
As you can see I have CSS for a normal button and CSS for a larger button. The larger button being what I'm targeting in my .aspx code. I include the "!important" at the end of the width because the buttons aren't displaying correctly; just to see if that would help... obviously it didn't. I've also tried inline styling and that doesn't work either. One important note, I've viewed the page in the following browsers: IE, Chrome, and Edge.
Anyway, here are the links in the Master Page with a view of the files in the folder structure of the project:
I commented out the placeholder for the Script.Render since I'm declaring the links directly above the placeholder. Also, having it uncommented did nothing for me as well.
I think I've covered it all, so if I've missed something please let me know and I'll include it. I appreciate all and any help that is given.

Thank you for your help. I found the answer however and hopefully this helps someone else. The problem was that another less experienced team member had changed the width for the input controls to Max-Width: 150px in the CSS (not shown in the pictures above). That tiny thing through me for almost an entire day, but at least it was found and corrected.
Thank you to those who helped or commented.

How to remove overflow: hidden using with telerik

Below is code before convert to HTML.I want to change overflow hidden.I found many way of CSS file. But couldn't find it and try using id to change css always no responding.
Telerik Code
<telerik:ReportViewer ID="ReportViewer1" runat="server" Height="800px"
Width="100%"></telerik:ReportViewer>
HTML View Through Browser Developer tools
<td id="TD_2">
<div id="TD2" style="overflow-y: auto; padding-left: 100px; width: auto; overflow-x:
hidden; position: inherit; height: 355px;">
<telerik:ReportViewer ID="ReportViewer1" runat="server" Height="800px"
Width="100%"></telerik:ReportViewer>
</td>

How to Scroll start with bottom when page is loaded

Hi I am doing a social network service using asp.net/c#, I have little problems with message sending.
when i am starting to send message scroll display like this. when i press send message it shows old message first and scroll is top, but i want newer message it mean's when i page loaded page should be showed new messages first
my aspx codes
<div style=" overflow-y:auto; height:368px; margin-top: -50px; border-top-style: groove; border-right-style: groove; border-left-style: groove; width: 602px; margin-left: 0px;" >
<asp:Repeater runat="server" ID="Repeater1" >
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: -10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #fffff0; border-left-color: #BBCEB3; border-right-color: #BBCEB3; border-top-style: groove; border-bottom-style: groove;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl='<%#Eval("SProfilePic") %> ' Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderName") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 400px; background-color: #C0C0C0;">
<asp:Label ID="Label11" runat="server" Text="" Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>

Put server controller there for example this:
<asp:Button ID="BtnOutside" runat="server" Text="Random" style="margin-left:-999px;" />
And then use
Page.SetFocus(Me.BtnOutside.ClientID);
To get focus to that button which is not visible to the client because of the negative margin. This should push the scroll bar to the bottom.

Put this in your code wherever you want to Focus on -- You can use this
multilple times in the same code set just change the "ID"
<asp:Button ID="FocusBottom" runat="server" Text="Random" style="margin-left:-999px;"
In the event(button click whatever) put in this.
Page.SetFocus(FocusBottom);
Change the (#######) to "ID" you want to call

Converting from ASP.NET MVC 2 to ASP.NET MVC 4 - why does my form report error?

Im converting a large MVC 2 application to MVC 4. I dont necessarily want to use Razor right now, i just want to migrate it and deal with the Razor subsequently. I can change this a bit of the time.
However, i have a problem with the forms:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="padding-top: 50px">
<% using (Html.BeginForm())
{ %>
<div id="LoginContainer" style="margin: auto; width: 960px;">
<div style="margin: auto; width: 400px">
<img src="/Content/Images/logo.png" width="400" alt=""
style="margin-top: 50px; margin: auto" />
</div>
<table style="width: 310px; margin: auto;">
<tr>
<td>
<div style="font-family: Verdana; font-size: small; color: #333333">
Username</div>
<input type="text" name="username" style="border: 1px solid #333333; padding: 5px;
background-color: #ffffff; width: 300px;" />
</td>
</tr>
<tr>
<td>
<div style="font-family: Verdana; font-size: small; color: #333333">
Password</div>
<input type="password" name="password" style="border: 1px solid #333333; padding: 5px;
background-color: #ffffff; width: 300px;" />
</td>
</tr>
<tr>
<td>
<%= Html.CheckBox("rememberMe")%>
<label style="font-family: Verdana; font-size: small" for="rememberMe" class="logintext">
Remember me?</label><br />
<input class="loginbutton" type="submit" value="Log On" style="padding: 5px; width: 100px;
background-image: url('/content/images/button_bg.png'); border: 1px solid gray;
color: White" />
</td>
</tr>
</table>
</div>
<div id="LoginControl">
</div>
<div style="width:500px;margin:auto;color:#666;font-size:xx-small;text-align:center;font-family:verdana;margin-top:50px;">
</div>
<%if (ViewData["LoginError"] != null)
{ %>
<div id="LoginError" style="margin-top:50px;">
<%= Html.ValidationSummary("Login was unsuccessful. Please correct the errors and try again.")%>
</div>
<%}
} %>
</body>
</html>
The Html.BeginForm(), and in fact all the controls, reports the following errors:
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'ValidationSummary' and no extension method 'ValidationSummary' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'CheckBox' and no extension method 'CheckBox' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'BeginForm' and no extension method 'BeginForm' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
When i check out the "HTML" helper i dont see the methods i refer at all in the method list. What am I missing?

Image not displayed in chrome and firefox using "progid:DXImageTransform.Microsoft.AlphaImageLoader"

i am using "progid:DXImageTransform.Microsoft.AlphaImageLoader" to display iamge in div
My code is:
<body class="style_page" style="margin: 0px; background: white;" onload="onLoad()"
onunload="onUnload()" onresize="onResize()">
<div id="mediaPlayer" style="position: absolute; visibility: hidden;">
</div>
<div id="first" style="position: absolute; left: 50%; top: 0px; width: 800px; height: 600px;
font-size: 10pt; background: white;">
<div class="placeholder" style="left: 0%; top: 0%; width: 100%; height: 166%;">
<div class="outline" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='output6.jpg');">
</div>
</div>
</div>
It works fine in IE8 but doesn't work in Mozilla and google chrome
Plz help
Thanks

Mozilla, Opera, G.Chrome and other browsers doesn't support Microsoft filters for transform text and images(controls). I think that every brower producer use diferent method.
Try to find help on their sites, and you must write javascript functions to recognize browser whos load page you developed.