ID Attribute Not Affected By External Stylesheet

jplahitko · Nov 29, 2005

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:

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]

ca8msm · Nov 29, 2005

Just for info the other thread was thread215-1157489.

Also, in that thread, I pointed out that the reason why the controls ID's were different (after Cory spotted that you weren't using the ID of the actual control).

Is there any reason why you can't just use a CSS class for each object rather than refer to it by ID?

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

jplahitko · Nov 30, 2005

If I have an asp.net web control named lblTest:

lblTest.ID returns lblTest

lblTest.ClientID returns _ctln_lblTest
where n = a number assigned by asp.net

lblTest.UniqueID returns _ctln:lblTest
where n = the same number assigned in ClientID

ClientID and UniqueID are read only properties.

If I set the ID property in code, both ClientID and Unique ID
return the new ID prefixed by _ctln_ or _ctln: respectively.

This seems a little short-sighted by Microsoft where CSS is concerned as it does seem to force the use of class names instead of ID's for style assignments. As a matter of fact, it seemed so ilogical to me I figured it had to be something I was doing wrong and so I solicited the help of my friends in these forums.

My work-around is to assign dual class names to each control for which I want to apply styles. For example:

CssClass="Unique Common"

Where "Unique" is basically an ID name unique to the control
and "Common" is a class name assigned to all controls of a particular type.

It works fine. The question has basically become this:

Is this functionality by design, or have I missed something?

Thank you all for your help. Unless anyone has a different solution, I am moving on.

ca8msm · Nov 30, 2005

This seems a little short-sighted by Microsoft where CSS is concerned as it does seem to force the use of class names instead of ID's for style assignments

Maybe, maybe not! When you create a control (in a repeater control for instance) you will assign that control an ID. As that ID would be used over and over again for each repeat, then microsoft decided to give it a unique id (which is what you have been seeing with "ctl" and a incrementing number). If they didn't do this then it would both fail validation (as you shouldn't have more than one tag with the same ID) and it would make it very difficult to actually get a handle on a certain instance of the control from withing the repeater.

As you can assign a cssClass to each object, then it doesn't really matter that you can't refer to it by ID in the CSS file as you can do so by class.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

jplahitko · Nov 30, 2005

This is my first attempt at utilizing external css throughout the majority of a project. I knew there had to be a logical reason. Thank you very much for the explanation. I am moving on.

jplahitko · Dec 2, 2005

I have an additional piece of information regarding this issue to share with anyone else that may need it. In my original question, I explained that the html was created dynamically by the basepage class using information stored in a database. Page content is loaded as a custom web user control at runtime and, since I am not placing the user control in the page designer, the ID property of the control is automatically generated in the form of _ctln_

To resolve the issue, I set the ID property in code in the user control's page behind. Now all child controls of the custom control carry an ID in the form of "CustomControlID_ChildControlID". A predictable naming convention that allows me to set style by ID rather than by class.

As long as I do not load the same user control onto the same page twice, there is not a concern with duplicate names.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

ID Attribute Not Affected By External Stylesheet

jplahitko

Technical User

ca8msm

Programmer

jplahitko

Technical User

ca8msm

Programmer

jplahitko

Technical User

jplahitko

Technical User

Similar threads

Part and Inventory Search

Sponsor