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.

Set contents of page according to browser resolution

Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>

Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!

The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.

Div Alignment inside a <td>

I have a <td> like this
<td valign="middle" class="table_td td top" style="width: 347px">
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right;">
</div>
<span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br />
<span class="feature_text_small">(Merchant Ad in Home Page,<br /> for valuable Site Exposure)</span>
Div id="Style" has image bigger than the <td>. AIm is to show the image in div when the moveover happens on the first span. The image shows up fine. But, i want the vertical center of div picture to be at the span with id= "feature_text" and has text "Featured Merchant Ad". I have tried but could not succeed. Where am i doing wrong?

I am not sure if i understod your question correctly, if you want to center the image in the div#style
You dont need this in img
style="background: middle right;"
Try
style="margin:auto;";
and adding this to div#style (div with id style)
style="vertical-align:middle; text-align:center;

Try with:
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right; position: relative; top: -20px;">
</div>
You are gonna have to play with the top value to get the vertical centering just right (the amount depends on the height of img).

InnerHTML including styles from stylesheets

Is there a way to get the innerHTML of a section of the page together with all style information that is used by the elements in that section(including styles that also come from corresponding stylesheets). So that when I insert the html somewhere else It will display with original styling.

It should display with styling anyway, unless I'm missing something in your question. If you have this style:
.item { color: red; background-color: #CCC; border: solid black 1px; }
.item a { color: #300; text-decoration: none; }
.item h2 { font-size: 1.5em; }
And this HTML:
<div id="test">
<div class="item">
<h2>Cat</h2>
Details
</div>
<div class="item">
<h2>Dog</h2>
Details
</div>
</div>
Moving that HTML to another section of the code (whether copy/pasting or moving it through DOM manipulation) shouldn't matter. The styles should be applied correctly. It's just a matter of constructing your CSS in a modular way. In this case, too much specificity could be an issue.

how to divide my asp.net web page into 2 webpages?

I am writing a webPage using asp.net and c#.
I want to divide my webpage into 2 columns such as in one I will have buttons that change the view in the other column, without "stepping on" the content of the first column.
example:
button 1 | :) a picture...
button 2 |
I tried to use divisions but I think I'm not using them properly.
any help would be great!
thanks!!!

Or code the divs like so:
<div class="wrapper">
<div class="left">
button 1
button 2
</div>
<div class="right">
a picture
</div>
</div>
Then the css is:
.wrapper {
width: 800px;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 600px;
}
You can change the widths to whatever you want, just make sure that .left width + .right width isn't greater than .wrapper width. Also make sure that the content of the columns doesn't make them wider (i.e. if your picture is wider than 600px, it'll also break the layout).

You might try posting a bit of code so that we can see what is going on. It sounds like a css problem which is more general than asp.net and c#.

if you divide your page to two web page then you use frame in javascript
for it's refrence go to www.w3schools.com

You want a table :)
<table>
<tr>
<td>button 1</td>
<td>a picture</td>
</tr>
<tr>
<td>button 2</td>
<td>...</td>
</tr>
</table>