Link to home
Create AccountLog in
Avatar of dyarosh
dyarosh

asked on

Style not working as expected in ASP.NET

I applied a style sheet definition to a data element in a template definition.  Everything works except the text is not centering and I don't know why.    The line of code with the problem is  <asp:Label ID="EventTitleLabel" runat="server"
                    Text='<%# Eval("EventTitle") %>' CssClass="EventTitle" />
Here is the code in the ASPX page:

    <div id="upcomingevents">
        <h1 class="center">NEWS AND EVENTS</h1>
        <asp:DataList ID="UpcomingEventsDataList" runat="server" 
            DataSourceID="ABVM_UpcomingEvents" CssClass="center" 
            HorizontalAlign="Center" RepeatLayout="Flow">
            <ItemTemplate>
              <asp:Label ID="EventTitleLabel" runat="server" 
                    Text='<%# Eval("EventTitle") %>' CssClass="EventTitle" />
                <br />
                <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
                <br />
                <br />
            </ItemTemplate>
            <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
        </asp:DataList>
        <asp:AccessDataSource ID="ABVM_UpcomingEvents" runat="server" 
            DataFile="App_Data/ABVM.mdb" 
            SelectCommand="SELECT [EventTitle], [Description] FROM [Events] WHERE ([Events.StartDate] &lt;= DATE () AND [EndDate] &gt;= DATE ()) ORDER BY [EndDate],[StartDate]">
        </asp:AccessDataSource>
    	<p>&nbsp;</p>
    </div>  <!-- end div upcomingevents -->

Open in new window


Here is the CSS in the style sheet:

#upcomingevents {
	background-color: #fff2d5;
}

.EventTitle 
{
	font-size: 20px;
	color: #006699;
	text-align: center;
}

Open in new window


I know part of the style is working because the font-size increases and the color changes when the style is applied.  However the text is not centered.  Any help would be greatly appreciated!
Avatar of ericathome
ericathome
Flag of United States of America image

Try adding a width to the .EventTitle definition - I suspect the title is centered within the element that collapses to the size of the text.

For example:

.EventTitle
{
      font-size: 20px;
      color: #006699;
      text-align: center;
      width: 100%;
}
Avatar of dyarosh
dyarosh

ASKER

I tried your suggestion and it didn't work.  I still can't get it to center.
ASKER CERTIFIED SOLUTION
Avatar of dyarosh
dyarosh

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of dyarosh

ASKER

I found the solution myself.