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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ID Attribute Not Affected By External Stylesheet

Status
Not open for further replies.
jplahitko

jplahitko

Technical User
Joined
Aug 16, 2002
Messages
27
Location
US
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.
 
Sort by date Sort by votes
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=" %>
<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><ASP:DROPDOWNLIST id="cboState" runat="server" cssclass="ContactDropdowns"></ASP:DROPDOWNLIST><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;
}
 
Upvote 0 Downvote
looks great to me.

Christiaan Baes
Belgium

I just like this --> [Wiggle] [Wiggle]
 
Upvote 0 Downvote
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]
[banghead]
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Server-side code is no use to us at all
Click to expand...
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
Code: 
 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]
 
Upvote 0 Downvote
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:
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 stylesheet code for the ascx:

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]

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

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">
                      <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]
 
Upvote 0 Downvote
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]
[banghead]
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
pendle666
  • Locked
  • Question Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
398
pendle666
pendle666
PeDa
  • Locked
  • Question Question
Table not formatted correctly in all browsers
Replies
2
Views
487
PeDa
PeDa
LyndonOHRC
  • Locked
  • Question Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
892
vacunita
vacunita
ggriffit
  • Locked
  • Question Question
Adding a CSS attribute overlay using ::after
Replies
8
Views
587
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top