For the past 3 weeks, I've been working on a website for car dealers to manage load applications.
The project consists of a designer, a lead developer (me) and two other web developers. The designer provided us with mock-ups in pdf, and then later started providing html with css and javascript as externally-linked files. The html contained dummy data, and we happily started incorporating it into the ASP.NET pages which gather data on the server-side, and render on the client-side in something that should approximate the original html mock-ups. Nothing two complex so far.
I am using masterpages, since the design of the site has a clearly defined template structure, with a menubar, and a footer on every page.
I discovered once I started testing my content pages that some of the elements were not rendering correctly. The reason was that the designer had applied css styles by element ID, and when ASP.NET controls were rendered on the client-side, they assigned IDs were mangled.
Here's an example to illustrate the problem:
The Designer's Mock-up -- The stylesheet shown below changes the colour of the page background, and adjusts the font of the DIV with id="myelement".
<!-- Default.html -->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Designer Mockup - Default Page</title>
<link rel="Stylesheet" href="default.css" />
</head>
<body>
<div id="myelement">Hello metafedora!</div>
</body></html>
/* Default.css */
body
{
background-color:Maroon;
}
#myelement
{
color:White;
font-family:Verdana,Sans-Serif;
font-size:large;
}
The Developer's Implementation -- Default.master is the masterpage, Default.aspx contains the content, and Default.aspx.cs is the codebehind which sets the text on the div.
<%@ Master CodeBehind="Default.master.cs" Inherits="Site.DefaultMaster" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Developer Implementation - Default Page</title>
<link rel="Stylesheet" href="default.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server" />
</div>
</form>
</body>
</html>
<%@ Page MasterPageFile="~/Default.Master" CodeBehind="Default.aspx.cs" Inherits="Site.DefaultPage" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
<div id="myelement" runat="server">Hello {0}!</div>
</asp:Content>
namespace Site
{
public partial class DefaultPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = "metafedora";
this.myelement.InnerText = string.Format(myelement.InnerText, name);
}
}
}
Here's how the DIV gets rendered when Default.aspx is viewed:
<div id="ctl00_ContentPlaceHolderMain_myelement">Hello metafedora!</div>
The problem is obvious: ASP.NET has mangled the ID of the DIV, and thus the style specificed for #myelement will not apply, and the text in the DIV doesn't appear as it should.
The designer didn't want to drastically change his HTML, the solution we came up with was too change the CSS to use classes instead of ID's to specify the styles, and adjust all the server-side controls to reference these classes, by either the CLASS attribute, or the Control.CssClass property. The modified CSS for myelement and DIV from Default.aspx code are below:
.myelement
{
color:White;
font-family:Verdana,Sans-Serif;
font-size:large;
}
<div id="myelement" class="myelement" runat="server">Hello {0}!</div>
So when beginning on a web project using ASP.NET, the designer should avoid using styles that apply by element ID, and opt to style by class or element name.