ID Attribute Not Affected By External Stylesheet

[jplahitko]

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 FF and IE.

Background: I use VS-2003/VB.net. I use 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 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.

 

[cLFlaVA]

show your code.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jplahitko]

This is the code from a user control and the associated stylesheet. I have tested this by putting this link element into the dynamic html, intsead of waiting for this control to load, and it makes do difference.

code from contact.ascx

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="Contact.ascx.vb" Inherits="HIS.Contact" TargetSchema="

http://schemas.microsoft.com/intellisense/ie5"

%>
<LINK href='<%=ResolveUrl("../../Content/Styles/Contact.css")%>' type="text/css" rel="stylesheet">
<DIV id="DIVContactMain">
<DIV id="DIVHeading"><ASP:LABEL id="lblGreeting" runat="server" cssclass="LabelGreeting">We Appreciate Hearing From You</ASP:LABEL><ASP:LABEL id="lblRequest" runat="server" cssclass="LabelRequest">Please submit this form with your questions or comments.</ASP:LABEL><ASP:LABEL id="lblRequired" runat="server" cssclass="LabelRequired">Fields in red are required.</ASP:LABEL>
</DIV>
<DIV id="DIVInfo"><ASP:LABEL id="lblFname" runat="server" cssclass="ReqContactLabels">First Name</ASP:LABEL><ASP:LABEL id="lblLname" runat="server" cssclass="ReqContactLabels">Last Name</ASP:LABEL><ASP:LABEL id="lblCompany" runat="server" cssclass="ReqContactLabels">Company Name</ASP:LABEL><ASP:LABEL id="lblEmail" runat="server" cssclass="ReqContactLabels">Email</ASP:LABEL><ASP:LABEL id="lblPhone" runat="server" cssclass="ReqContactLabels">Phone</ASP:LABEL><ASP:LABEL id="lblTitle" runat="server" cssclass="OptContactLabels">Title</ASP:LABEL><ASP:LABEL id="lblAddress" runat="server" cssclass="OptContactLabels">Address</ASP:LABEL><ASP:LABEL id="lblCity" runat="server" cssclass="OptContactLabels">City</ASP:LABEL><ASP:LABEL id="lblState" runat="server" cssclass="OptContactLabels">State</ASP:LABEL><ASP:LABEL id="lblZip" runat="server" cssclass="OptContactLabels">Zip</ASP:LABEL><ASP:LABEL id="lblFax" runat="server" cssclass="OptContactLabels">Fax</ASP:LABEL>
<ASP:TEXTBOX id="txtFname" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtLname" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtCompany" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtEmail" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtPhone" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtTitle" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtAddress1" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtAddress2" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtCity" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtZip" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASP:TEXTBOX id="txtFax" runat="server" cssclass="ContactTextboxes"></ASP:TEXTBOX><ASPROPDOWNLIST id="cboState" runat="server" cssclass="ContactDropdowns"></ASPROPDOWNLIST><ASP:BUTTON id="btnSubmit" runat="server" cssclass="ContactButtons" text="Submit"></ASP:BUTTON><ASP:TEXTBOX id="txtComments" runat="server" cssclass="ContactTextboxes" textmode="MultiLine"></ASP:TEXTBOX>
</DIV>
</DIV>

/* Contact.css stylesheet */

#DIVContactMain {
position: relative;
top: 0px;
left: 300px;
width: 554px;
}

#DIVHeading {
position: absolute;
top: 0px;
left: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #003B6F; /* PMS 2955c */
}

#lblGreeting {}
.LabelGreeting {
position: absolute;
top: 0px;
left: 0px;
font-size: 14pt;
font-weight: bold;
}

#lblRequest {}
.LabelRequest {
position: absolute;
top: 22px;
left: 0px;
font-size: 12pt;
}

#lblRequired {}
.LabelRequired {
position: absolute;
top: 44px;
left: 0px;
font-size: 10pt;
}

#DIVInfo {
position: absolute;
top: 100px;
left: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #685C53; /* PMS Warm Gray 11c */
}


.ReqContactLabels {
color: Red;
}

#lblFname {}
#lblLname {}
#lblCompany {}
#lblEmail {}
#lblPhone {}

.OptContactLabels {}
#lblTitle {}
#lblAddress {}
#lblCity {}
#lblState {}
#lblZip {}
#lblFax {}

.ContactTextboxes {}
#txtFname {}
#txtLname {}
#txtCompany {}
#txtEmail {}
#txtPhone {}
#txtTitle {}
#txtAddress1 {}
#txtAddress2 {}
#txtCity {}
#txtZip {}
#txtFax {}
#txtComments {}

.ContactDropdowns {}
#cboState {}

.ContactButtons {}
#btnSubmit {
position: absolute;
top: 300px;
left: 320px;
}

 

[BillyRayPreachersSon]

You'd need to show your client-side code. Server-side code is no use to us at all.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[chrissie1]

looks great to me.

Christiaan Baes
Belgium

I just like this --> [Wiggle] [Wiggle]

 

[cLFlaVA]

you should consider it common practice to keep your code tidy and in a readable manner. obviously you have never once gone through the debugging process of viewing your source code to see where a problem might lie.

indenting and line breaks are a standard practice for debug-friendly coding.

so, i'd start with that, then re-post, re-ask, and we'll re-consider.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jplahitko]

You are correct. I typically code small projects and do not usually need to debug the client side code. Please bear with me as I am trying to give you what you asked for.

I am using a purchased dropdown menu control that produces a huge amount of javascript. To minimize clutter, should I leave that out of the code as well as all the viewstate information?

 

[ChrisHunt]

Server-side code is no use to us at all

Well, it might be some use to somebody who speaks ASP, but it's certainly not as helpful as it could be.

This is an HTML forum. You appear to be having an HTML problem. So view your page on a browser, do a "view source", and get us the HTML that is being generated by your ASP, and which the browser seems to be having trouble with. You might consider making a cut-down example with just one or two controls on it, to make it easier to see what's going on.

Oh, and use

 tags when posting source code on here (See the "Process TGML" link near the bottom of the page for more info on this).

-- Chris Hunt
[url=http://www.mcgonagall-online.org.uk][i]Webmaster &  Tragedian[/i][/url]
[url=http://www.extraconnections.co.uk]Extra Connections Ltd[/url]

 

[jplahitko]

This is my original 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 FF and IE.

Background: I use VS-2003/VB.net. I use 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 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.

This is the server side ascx code with one label:

[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 stylesheet code for the ascx:

[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]

[red]In this example, if I put the attribute:value pairs
under the class .Labels, instead of under the id
#lblTestLabel, all works fine.[/red]

This is the client side code with the menu javascript
and viewstate information removed:

[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">
                      <span id="_ctl7_lblTestLabel" class="Labels">Test Label</span>
                    </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]

 

[cLFlaVA]

all of your link tags should be in the <head> section.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

additionally, for whatever reason, your ids are being auto-generated as:

[tt]_ctl7_lblTestLabel[/tt]

and your class names remain consistent. make sure you don't have more than one id of lblTestLabel. i'm not sure, but that may be the reason those ugly prefixes are being added to the IDs. this is the reason you can't see a change. when i removed the prefixes, it worked as expected.

good luck.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ChrisHunt]

cLFlaVA's got to the root of your problem.

To generalise for the future - your web browser never sees your ASP source code, it only sees the HTML that it generates. So when you have rendering problems, a good first step is to do a "view source" on the page in question and examine the code the browser's being sent, rather than look at the ASP and make assumptions about what the browser should be sent.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ca8msm]

Just for info...

The naming convention is an ASP.NET "thing". Controls are not necessarily named with the id that you give them as the controls can be duplicated on the page (and each one needs to be given a unique id) and/or they can belong to other controls.


____________________________________________________________

Need help finding an answer?

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

 

[jplahitko]

To answer cLFlaVA's question, there is only one lblTestLabel control. I tried making the control Public rather than Protected. I also moved the link element to my basepage where the html is dynamically created so it is now in the head tag. Still, none of this works. The problem is only with asp.net controls and not with html controls.

This seems to be an asp.net issue. Should I post it there?

 

[BillyRayPreachersSon]

If you are having grief with .Net changing your IDs, then yes - as it's no longer an HTML / CSS issue.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jplahitko]

Thank you all for your help. I have posed this same question in the asp.net forum.

Thread 1158297