I originally posted this in the html, css ... forum, but suggestions there indicate this may be a better forum to pose this question:
When referencing asp.net server controls by ID in an external stylesheet, position and appearance are unaffected. If referenced through the class name, instead of ID, everything works fine. My preference is to affect visual attributes of asp:textbox controls through a common class name and to position each individual control by using a unique ID. This is not working. To work around the problem, I have abandoned the ID attribute and assigned unique class names to each control and position them using that reference. The problem is evident in both FF and IE.
For your review, I have attached server and client side code from an example that uses an <asp:label> control. ID="lblTestLabel" class="Labels". If the external css references #lblTestLabel, the styles are not applied. If it references the class .Labels instead, the styles are applied.
Background: I use VS-2003/VB.net. The eb project uses a single aspx file, for all pages, that inherits a common base class. This base class dynamically writes all html for a request after loading the appropriate custom user controls (.ascx) for content. The base class determines which controls to load based on a database query. The base class writes the link element in the head section of the html that points to a common stylesheet for the site. The individual custom controls, used to display content, may also specify a link element that points to an external stylesheet specifically for that control/page. References to server control ID's within the user control stylesheets are not working.
Any help with correcting this problem will be greatly appreciated.
This is the server side html from the ascx control:
This is the external css file:
This is the client side code without the viewstate
and javascript rendered by other custom controls.
[red]*** Please note that the label control lblTextLabel was renamed to _ctl7_lblTestLabel before rendering. The class Labels was not changed. This was sited as the root of the problem in the other forum, but an effective solution was not offered. Is this normal or am I doing something wrong?[/red]
When referencing asp.net server controls by ID in an external stylesheet, position and appearance are unaffected. If referenced through the class name, instead of ID, everything works fine. My preference is to affect visual attributes of asp:textbox controls through a common class name and to position each individual control by using a unique ID. This is not working. To work around the problem, I have abandoned the ID attribute and assigned unique class names to each control and position them using that reference. The problem is evident in both FF and IE.
For your review, I have attached server and client side code from an example that uses an <asp:label> control. ID="lblTestLabel" class="Labels". If the external css references #lblTestLabel, the styles are not applied. If it references the class .Labels instead, the styles are applied.
Background: I use VS-2003/VB.net. The eb project uses a single aspx file, for all pages, that inherits a common base class. This base class dynamically writes all html for a request after loading the appropriate custom user controls (.ascx) for content. The base class determines which controls to load based on a database query. The base class writes the link element in the head section of the html that points to a common stylesheet for the site. The individual custom controls, used to display content, may also specify a link element that points to an external stylesheet specifically for that control/page. References to server control ID's within the user control stylesheets are not working.
Any help with correcting this problem will be greatly appreciated.
This is the server side html from the ascx control:
Code:
[red]
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="ContactUs.ascx.vb" Inherits="Horner.Websites.ContactUs" TargetSchema="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] %>
<LINK href='<%=ResolveUrl("../../Content/Styles/ContactUs.css")%>' type="text/css" rel="stylesheet">
<DIV id="DIVMain">
<DIV id="DIVHeading">
<ASP:LABEL id="lblTestLabel" runat="server" cssclass="Labels">Test Label</ASP:LABEL>
</DIV>
</DIV>
[/red]This is the external css file:
Code:
[green]
/* ContactUs.css stylesheet */
[/green][red]
#DIVMain {
position: relative;
top: 0px;
left: 300px;
width: 554px;
}
#DIVHeading {
position: absolute;
top: 0px;
left: 0px;
}
.Labels {}
#lblTestLabel {
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
font-size: 14pt;
font-weight: bold;
color: Green;
}
[/red]This is the client side code without the viewstate
and javascript rendered by other custom controls.
[red]*** Please note that the label control lblTextLabel was renamed to _ctl7_lblTestLabel before rendering. The class Labels was not changed. This was sited as the root of the problem in the other forum, but an effective solution was not offered. Is this normal or am I doing something wrong?[/red]
Code:
[blue]
<html>
<head>
<title>Contact Page</title>
<LINK href="/HIS/styles/TextStyles.css" type="text/css" rel="stylesheet">
<META NAME="DESCRIPTION" CONTENT="Description">
<META NAME="KEYWORDS" CONTENT="Keywords">
</head>
<body>
<div id="BasePageDiv" align="center">
<form name="HtmlForm" method="post" action="contactus.aspx" id="HtmlForm">
<input type="hidden" name="__VIEWSTATE" value="**** I DELETED THIS DATA ****" />
<script language="javascript" type="text/javascript">
**** MENU JAVASCRIPT WAS HERE ****
</script>
<link rel="stylesheet" type="text/css" href="/HIS/Skins/HornerHIS/Styles/banner_home.css">
<style type="text/css">
.xtm_DefaultItemCssClass{
background-color:white;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:Gray;
padding:2px;
cursor:hand;
}
.xtm_DefaultItemCssClassOver{
background-color:white;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:#5B73A6;
padding:2px;
text-decoration:underline;
cursor:hand;
} .xtm_DefaultItemSpaceCssClass{
background-color:white;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:gray;
padding-left:3px;
padding-right:3px;
}
.xtm_DefaultItemDisabledCssClass{
background-color:white;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
color:Silver;
padding:2px;
}
</style>
<table id="BasePageTable" border="2" cellspacing="0" cellpadding="0" width="800px">
<tr>
<td id="BasePageBannerCell" colspan="1" valign="top">
<LINK href='/HIS/Skins/HornerHIS/Styles/banner_home.css' type=text/css rel=stylesheet>
<DIV style="LEFT: 0px; POSITION: relative; TOP: 0px">
<DIV id="divLogo">
<IMG alt="HIS Logo" src='/HIS/Skins/HornerHIS/Images/his_logo.jpg'>
</DIV>
<DIV id="divBanner">
<span id="_ctl5_lblBannerText" class="BannerText">Contact Us</span>
</DIV>
<DIV id="divMenu">
<script language="javascript" type="text/javascript">
**** MENU JAVASCRIPT WAS HERE ****
</script>
<input name="_ctl5:txtSearch" type="text" id="_ctl5_txtSearch" class="SearchTextBox" />
<input type="submit" name="_ctl5:btnSearch" value="Search" id="_ctl5_btnSearch" class="SearchButton" />
</DIV>
<DIV id="divBreadCrumbs">
<link rel="stylesheet" type="text/css" href="/HIS/Skins/HornerHIS/Styles/banner_home.css">
<script language="javascript" type="text/javascript">
**** THERE WAS NOTHING HERE ****
</script>
</DIV>
</DIV>
</td>
</tr>
<tr>
<td class="BasePageContentCells" id="BasePageContentPaneCell" valign="top" >
<table id="BasePageContentTable">
<tr>
<td>
<LINK href='/HIS/Content/Styles/ContactUs.css' type="text/css" rel="stylesheet">
<DIV id="DIVMain">
<DIV id="DIVHeading">
[red]<span id="_ctl7_lblTestLabel" class="Labels">Test Label</span>[/red]
</DIV>
</DIV>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="BasePageFooterCell" colspan="1" valign="top">
</td>
</tr>
</table>
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<script language="javascript" type="text/javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
theform = document.HtmlForm;
}
else {
theform = document.forms["HtmlForm"];
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
<script language="javascript" type="text/javascript">
xm_GetMenu('_ctl5:mnuHISBannerHome').xm_hp();
</script>
</form>
</div>
</body>
</html>[/blue]