Home/ Questions/Q 3426002
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T06:39:42+00:00

Okay, I am stumped on this one and need some quick help. I have

  • 0

Okay, I am stumped on this one and need some quick help.

I have an ASP.NET application using Forms authentication. In my Login.aspx page, I use several images in the background for visual affect. The url’s are being set using CSS styles that are defined in the file (not in a theme et al). All of the images are located in an Images folder under the root level of the website. There is a separate web.config in the Images folder allowing all users access.

The issue I’m running into is getting the images to resolve consistently in the development environment and production environment. What I learned (and have no control over) is that the site is deployed to a sub-site in production while we are using the Cassini web server in Visual Studio for development. As a result, starting each path with a backslash (/) doesn’t work in production (although it works fine in development). Removing the backslash breaks the dev environment.

Currently, I have the CSS defined similar to:

#banner
{
    background: transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;
    height: 70px;
    top: 21px;
    left: 3px;
}

This doesn’t work in Development but it works in our QA and Production environments.

To make matters worse, this was apparently working fine and less knowledgable co-workers are blaming some recent additions to the application where we added several new pages in a sub-folder. I should mention that prior to this ALL pages were at the site root.

Not sure what else I can share so please ask whatever questions are needed to help come up with a solution.

UPDATE:
It turns out that one of the three images IS showing up properly in all environments. The one associated with the BODY element is working but the others, one using the ID as shown in the example above and the other through a CSS class, are not.

UPDATE:
Here is the code for my web page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Login</title>
  <style type="text/css">
    body { background:#fff url('Images/bodyBackBlue.png') repeat-x;font-size:11px;font-family:Sans-Serif; }

    #wrapper { width:990px;margin-top:30px;margin-left:auto;margin-right:auto;position:relative; }

    #bannerwrapper { width:990px;margin-left:auto;margin-right:auto;position:relative; }

    #banner { background:transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;height:70px;top:21px;left:3px; }

    .logo { float:left;text-decoration:none;margin-left:30px;margin-top:29px; }

    .user-greeting { background-image:none;margin:8px 100px;color:#fff;float:right;font-weight:bold; }

    .warningWrapper { float:none;font-family:Sans-Serif;font-size:small;margin-left:20px; }

    #infowrapper { margin:3px 3px 3px 3px;width:68%;border-left:solid 1px #00629b; }

    #rightColumnWrapper { margin:3px 13px 3px 3px;width:28%;float:right; }

    #loginwrapper { height:220px;border-left:solid 1px #00629b;margin-bottom:20px; }

    #noticewrapper { height:100px;border-top:1px solid #00629b;margin-bottom:20px; } 

    .contentTopper { overflow:hidden;position:static;background:transparent URL('Images/portlet_topper_back.png') left repeat-x;height:23px;min-height:23px; }

    .contentTitle { float:left;color:#fff;font-weight:bold;font-size:15px;padding-top:2px;padding-left:4px; }

    .contentleft { padding:20px 5px 5px 8px;float:left;width:400px; }

    .contentRight { float:right;padding:30px 20px 10px 10px; }

    .content { padding-left:5px; }
  </style>
</head>

<body>
  <div id="bannerwrapper">
    <div id="banner">
      <span class="logo"><img id="LogoImage" src="Images/LogoLarge.jpg" height="40px" width="105px"/></span>
      <span class="user-greeting">Welcome!</span>
    </div>
  </div>        
  <div id="wrapper">
    <div id="rightColumnWrapper">
      <div id="loginwrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Sign In </span>
        </div>
        <div class="content">        
          <form id="Login" runat="server">
            <asp:Panel ID="PanelLogin" runat="server">
              <table>
                <tr>
                  <td>
                    <asp:Label ID="LabelUserName" runat="server">User name:</asp:Label>
                  </td>
                </tr>
                <tr>
                  <td width="150">
                    <asp:TextBox ID="txtUsername" runat="server" Height="20px"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <td>
                    <asp:Label ID="LabelPassword" runat="server">Password:</asp:Label>
                  </td>
                </tr>
                <tr>                                
                  <td width="150">
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Height="20px" Width="100%" ></asp:TextBox><br />
                  </td>
                </tr>
                <tr>                                
                  <td width="80" style="padding: 5px">
                    <asp:Button ID="btnLogin" runat="server" EnableTheming="true" Text="Sign In" OnClick="btnLogin_Click"></asp:Button><br />
                  </td>
                </tr>
              </table>
              <asp:Label ID="errorLabel" runat="server" ForeColor="#ff3300"></asp:Label><br />
            </asp:Panel>
          </form>
        </div>                
      </div>
      <div id="noticewrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Special Notice </span>
        </div>
        <div class="content">
          <ul>
            <li>abc</li>
          </ul>               
        </div>
      </div>
    </div>
    <div id="infowrapper">
      <div class="contentTopper"> 
        <span class="contentTitle"> Welcome </span>
      </div>
      <div class="contentleft">
        <p><span style="font-size: small"><b>abc</b></span></p>
        <p>abc</p>
        <p><b>abc</b>abc</p>
        <p><b>abc</b>abc</p>
        <p>&nbsp;</p><p>&nbsp;</p>
      </div>
      <div class="contentRight">
        <img class="contentRight" id="LogoImage2" src="Images/LogoLarge.jpg" height="79px" width="199px"/> 
        <p style="text-align: center">abc</p>
      </div> 
    </div>
    <div class="warningWrapper">
      <asp:Label ID="Label1" runat="server" ForeColor="#FF0000" ></asp:Label>        
      <asp:Label ID="Label2" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label3" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label4" runat="server" ForeColor="#993300" Visible="false" Text="abc"></asp:Label>
    </div>
  </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After all the back-and-forth discussion, I found this post: ASP.NET theme not rendering correctly. I now realize that the problem was due to the authorization rules Cassini enforces on the App_Themes folder. Because I am using Forms authentication, the Login.aspx page is being displayed to unauthenticated users and Cassini wasn’t allowing the page to access anything in App_Themes. For some reason, this was blocking the rest of the CSS styles from getting applied, I guess.

    Nevertheless, the ultimate solution was to add the following into my web.config:

      <location path="App_Themes">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>

    I’d like to thank @matt_ashbury for the guidance – I couldn’t have found a solution without your help!

    • 0