Develop Reference

razor page CSS is not working isolated, only with the style tag at the top

The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.
Board.razor with style tag at top:
<style>
.dropzone {
padding: 10px;
background: #e2eaf2;
list-style: none;
height: 100%;
min-width: 50%;
}
.no-drop {
border: 2px dashed red;
background-color: #e6d8d8;
}
.can-drop {
border: 2px dashed green;
background-color: #d8e6d8;
}
.draggable {
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
margin-bottom: -8px;
padding: 10px;
cursor: move;
background: #fff;
color: #000;
border-radius: 3px;
max-width: 500px;
}
.draggable:active {
cursor: move;
background: #f1f8ff;
}
.draggable:hover {
cursor: move;
background: #f1f8ff;
}
h6 {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.dragging {
cursor: move;
}
.description {
font-size: 14px;
}
.sum {
font-size: 17px;
word-wrap: break-word;
color: midnightblue;
font-weight: bold;
}
.last-updated {
margin-bottom: 0;
font-size: 11px;
color: #474747;
font-weight: bold;
}
.last-updated small {
text-transform: uppercase;
color: #474747;
font-size: 11px;
}
h6 {
width: 100%;
height: auto;
}
.scrollbar {
top: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
.status-details[open] {
transition: height 3s;
}
.status-details-summary {
padding: 1px 0px 1px 8px;
position: sticky;
top: 3rem;
bottom: 0;
z-index: 20;
font-size: 12px;
background-color: white;
}
.status-container {
display: flex;
}
.status-list {
display: flex;
flex-direction: column;
padding: 5px;
width: 100%;
}
.status-header {
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 21;
}
.status-header-item {
font-weight: bold;
margin: 5px;
margin-bottom: -5px;
padding: 10px;
background: #e2eaf2;
flex-direction: column;
display: flex;
width: 100%;
}
#bsettings {
text-decoration: none;
color: inherit;
cursor: default;
display: block;
}
<NavBar OnIssueCreated="LoadIssues"></NavBar>
<div class="bodyContainer">
#if (changeMenuShow)
{
<h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
}
#*<FilterBar AllIssues="issues"></FilterBar>*#
<div class="dropdown">
<button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="oi oi-cog"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item">Board Einstellungen(unfertig)</li>
#*<li class="dropdown-item" #onclick="ModalShow">Board erstellen</li>*#
#if (changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs ausblenden</li>
}
else if (!changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs einblenden</li>
}
#if (dialogType.Equals(EditDialogType.Sidebar))
{
<li class="dropdown-item" #onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
}
else if (dialogType.Equals(EditDialogType.Modal))
{
<li class="dropdown-item" #onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
}
</ul>
</div>
#if (activeSprint != null)
{
<div style="float: right; margin-left: 10px ">
<button style="height: 38px;" class="btn btn-blue" #onclick="Complete">Sprint abschließen</button>
</div>
}
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
<input type="checkbox" class="custom-control-input" id="addMorebox" #bind="ShowOpenForToday" />
<label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
</div>
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
<input type="checkbox" class="custom-control-input" id="addWaitReply" #bind="showWaitForReply" />
<label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
</div>
<br />
<br />
<br />
<IssueDialogOpener DialogType="dialogType">
<div class="scrollbar" style="height: 70vh; ">
<header class="status-header">
<div class="status-header-item">Zu Erledigen</div>
#if (ShowOpenForToday)
{
<div class="status-header-item">Heute zu Erledigen</div>
}
#if (showWaitForReply)
{
<div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
}
<div class="status-header-item">In Arbeit</div>
<div class="status-header-item">Fertig</div>
</header>
<div>
#if (parentIssues.Count > 0)
{
#foreach (var issue in parentIssues)
{
<SubtaskStatusContainer Issue="issue" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
}
#if (issues.Count != 0)
{
<StatusContainer Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
}
else if (issues.Count != 0)
{
<StatusContainer IsWithoutSubtasks=true Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
</div>
</div>
</IssueDialogOpener>
</div>
How it looks:
How it looks with styles isolated in the board.razor.css:

For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS

Push all styles back to Board.razor.css file
If your application is server-side then make sure if you have this line in your _Layout.cshtml
And if your application is Web Assembly then make sure this line is in your index.html file
<head>
<link href="yourprojectname.styles.css" rel="stylesheet" />
</head>

Drop-down menu between ul and li tags doesn't appear

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

.NET / CSS Foreach Checkboxes Individual Styling

I have a foreach loop creating CheckBoxes, causing them to all have the same ID. I've got some CSS but when you check any box it puts the css onto the first iteration, how do I add some dynamic ID sort of thing to only add the css to the selected box?
Loop:
#foreach (var item in Model.Where(p => p.UserTable.ID == ViewBag.UserTableID))
{
<tr>
<td>
<div class="select">
<input type="checkbox" id="select" name="" />
<label for="select"></label>
</div>
css:
.select {
width: 20px;
position: relative;
}
.select label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.select label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5.5px;
background: transparent;
top: 4.8px;
left: 5.4px;
border: 3px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.select label:hover::after {
opacity: 0.5;
}
.select input[type=checkbox]:checked + label:after {
opacity: 1;
}

Why not just assign each element their item's ID?
<div class="select">
<input type="checkbox" id="select_#item.ID" />
<label for="select"></label>
</div>
Unless you have duplicates in that list, they'll always be unique.
By the way: your View shouldn't be filtering out items, it should be given only the items it needs (that Where should be done at the database level)

CSS Textarea Not Filling Parent

I am having issues getting a text area to fill a parent div. I have found solutions involving setting the box-sizing to border-box, but this is not working for me. Any help would be much appreciated!
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
#Html.TextAreaFor(a => a.TimeLine, new { #class = "form-control textarea" })
</div>
</div>
css:
.flx-modal{
display: flex;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
flex: 1;
margin-left: 15px;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
-moz-box-sizing: border-box !important; /* FF1+ */
}

If you add flex-direction: column, change flex: 1 to width: 100% and remove the margin-left: 15px, you get this
.flx-modal{
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
width: 100%;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>
You can also add flex-wrap: wrap;, remove margin-left: 15px and add this rule
div.flx-label {
width: 100%;
}
.flx-modal{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 15px;
}
div.flx-label {
width: 100%;
}
div.flx-txtarea {
background-color: red;
flex: 1;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>

Why do my pictures in a asp image control look squashed?

I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!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" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}

Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.

Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.