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 do I add a button click event to my own button in Visual Studio C#

Is there a way to add a button click event to a button I create myself?
I am using Visual Studio Premium 2013. I was trying to customise the appearance of the standard button control from the toolbox but it wasnt doing what I wanted (there were issues with border-radius and other things). So I decided to make my own button. Its a div, styled with this css and wrapped with an anchor tag:
<div id="loginBtn">Login</div>
#loginBtn {
width: 60px;
height: 30px;
margin-left: auto;
margin-right: auto;
background: #3B647F;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
border-radius: 5px;
text-align: center;
line-height: 1.75;
}
But how do I add a click event to this button? I tried instead using a hyperlink control like this:
<asp:HyperLink ID="hyp1" runat="server"><div id="loginBtn">Login</div></asp:HyperLink>
But I couldnt find a way to add a click event to a hyperlink.
Anyone have any ideas?

Use asp:LinkButton, you can add OnClickEvent. You can read how to do it in this MSDN Article
ASPX:
<asp:LinkButton id="LinkButton1"
Text="Click Me"
OnClick="LinkButton_Click"
runat="server"/>
Code behind:
void LinkButton_Click(Object sender, EventArgs e)
{
Label1.Text="You clicked the link button";
}

asp:Literal strips out title attribute value

I am working on a asp.net website (web forms and mvc) where asp:Literal is used in a few pages.
I needed to change the content of one page to add a simple title attribute to the existing tag.
So i need the rendered result to be:
<a href="test.jpg"
title="title here"
id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
But after rendering, it looks like that:
<a href="test.jpg"
title id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
At first i thought it could be something to do with the controls Mode property, but even if i change the Mode to PassThrough it still does not render the value of the tittle attribute.
EDIT: The code for the literal is as folows:
LiteralControl.Text = "<a href='test.jpg' title='title here' id='testimage' rel='hint-text: CLICK TO ZOOM' style='position: relative; display: inline-block'>image goes here</a>"
Does any of you guys have this problem and happens to know the solution?

overflow : hidden hides content in placeholder object

I have an asp placeholder object, within a div.
<div id="contentMenu" class="contentMenu">
<asp:PlaceHolder ID="plhMenu" runat="server">
</asp:PlaceHolder>
<div id="divMenuImage" class="menuImage">
<asp:Image ID="imgMenu" runat="server" ImageUrl="images/menu.gif" />
</div>
</div>
the div uses the following css:
.contentMenu
{
color: #ffffff;
left: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: absolute;
top: 85px;
width: 500px;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Items in the menu are added to the placeholder using calls such as:
plhMenu.Controls.Add(btnArrow);
plhMenu.Controls.Add(btnCategory);
Using the text-overflow property in the css is supposed to crop the text and show ellipses.
However, when the property "overflow : hidden" is in the css, all the menu disappears. Remove that propery and the menu appears, but the text-overflow doesn't work (it seems that overflow : hidden is required).
Any help in sorting this out would be very much appreciated as I have spent hours trying to figure out what is going on.
Thanks in advance.

You don't have a height on your container div, if you are adding items to the placeholder dynamically after the page is first drawn, then they might not cause the div to grow vertically.
You could try using overflow-x: hidden;?

two validation buttons in different usercontrol.ascx

I need to validate two separate group one by click button1,and another one is click button2
Two buttons are in separate user controls implemented in same page ,the validation to the first user control also validates the second one,i give the validation group for both user controls separately it don't work.
please help me...
the below code contains two user controls,that having the one button is in < uc1:UCEditRegisterUser> and anothe one is in < uc1:UCEditDoctorProfile>
<div style="width: 950px; margin: 0px auto 0px auto;">
<div style="width: 425px; min-height: 800px; overflow: hidden; float: left; padding-left: 17px;
margin-top: 30px;">
<uc1:UCEditRegisterUser ID="UCEditRegisterUser1" runat="server" />
</div>
<div style="width: 485px; min-height: 800px; overflow: hidden; float: right; margin-top: 30px;
padding-right: 20px;">
<uc1:UCEditDoctorProfile ID="UCEditDoctorProfile1" runat="server" />
</div>
</div>

This seems obvious so apologies
Make sure that the validation group on the validators within both user groups is exactly the same
Make sure that the button (or whatever) the triggers the validation also has the same validation group
make sure that the triggering button doesn't have the CausesValidation attribute set to false
You could consider making the ValidationGroup a property that is set externally on both controls. Might make things clear to you all all who inherit your code

I got the solution,
it needs to call the validation from the page event Page_ClientValidate("pwd");
the pwd in bracket is the validation group.
<script type="text/javascript">
function ValidateUserContrlos()
{
var isValid=false;
isValid=Page_ClientValidate("pwd");
if(isValid)
{
return true;
}
else
return false;
}
</script>
call the function from the button click like this
<asp:Button ID="btnSave" runat="server" Text="Save" onClick="btnSave_Click"
OnClientClick="return ValidateUserContrlos()"/>.
it solved thank u all for the support..