I have created an html page with css that is working great. Here is a JSFiddle that shows some of the styling. I have converted the html to aspx. The only change is that my html is now in a repeater.
Do repeaters work with css?
Do I need to apply them dynamically (please tell me no!!) ?
Has anyone had experience working with css inside a repeater?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <link href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form" runat="server">
     <asp:Repeater id="repeater" runat="server">
         <ItemTemplate>
             <asp:Panel ID="header" runat="server">
                    <asp:Panel ID="reportName" runat="server">
                        <p class='text-bold-xlg'>
                            <asp:Label ID="CampaignNameData" Text="Campaign Name" runat="server"></asp:Label></p>
                        <p class="text-md">
                            <asp:Label ID="ReportRangeLabel" Text="Report Range: " runat="server"></asp:Label>
                            <asp:Label ID="ReportRangeData" Text="" runat="server"></asp:Label>
                        </p>
                    </asp:Panel>
                    <asp:Panel ID="logo" runat="server">
                        <img src="images/Picture1.jpg" runat="server" enableviewstate="true" />
                    </asp:Panel>
                </asp:Panel>
                <asp:Panel ID="info" runat="server">
                    <asp:Panel ID="drPersonal" runat="server">
                        <p class='text-bold-lg'>
                            <asp:Label ID="DoctorNameData" Text="<%# Eval("Name") %>"></asp:Label></p>
                        <asp:Table ID='drInfoTable' runat="server">
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text-bold-md'>
                                        <asp:Label ID="SpecialtyLabel" Text="Specialty:" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text-md'>
                                        <asp:Label ID="SpecialtyData" Text="" runat="server"></asp:Label></p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text-bold-md'>
                                        <asp:Label ID="AddressLabel" Text="Address:" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text-md'>
                                        <asp:Label ID="AddressLine1Data" Text="" runat="server"></asp:Label><br />
                                        <asp:Label ID="AddressLine2Data" Text="" runat="server"></asp:Label><br />
                                        <asp:Label ID="AddressLine3Data" Text="" runat="server"></asp:Label>
                                    </p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text-bold-md'>
                                        <asp:Label ID="DecileLabel" Text="Decile:" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text-md'>
                                        <asp:Label ID="DecileData" Text="" runat="server"></asp:Label></p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text-bold-md'>
                                        <asp:Label ID="RepLabel" Text="Rep:" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text-md'>
                                        <asp:Label ID="RepData" Text="" runat="server"></asp:Label></p>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:Panel>
                    <asp:Panel ID="Panel3" runat="server">
                        <img id='main-circle-1' src="images/circle-gray.png" alt="" />
                        <img id='main-circle' src="images/circle-orange.png" alt="" />
                        <asp:Table ID="GraphicCircleData" runat="server">
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text'>
                                        <asp:Label ID="TotalTouchpointsLabel" Text="Total <br /> Touchpoints" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text'>
                                        <asp:Label ID="TotalEngagementsLabel" Text="Total <br /> Engagements" runat="server"></asp:Label></p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>
                                    <p class='text-lg'>
                                        <asp:Label ID="TouchpointsData" Text="" runat="server"></asp:Label></p>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <p class='text-lg'>
                                        <asp:Label ID="EngagementsData" Text="" runat="server"></asp:Label></p>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:Panel>
                </asp:Panel>
                <asp:Panel ID="timeline" runat="server" EnableViewState="true"  >
                <p class='text-bold-lg' id='timeline-title'><asp:Label ID="LatestActivityLabel" Text="Latest Activity" runat="server" ></asp:Label></p>
                        <img id='timeline-img' src="images/timeline-sq-sm.png" alt=""/>
                        <asp:Table ID="timelineActivity" runat="server">
                            <asp:TableRow>
                                <asp:TableCell ID="tmImg1" runat="server"></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell ID="tmImg3" runat="server"></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell ID="tmImg5" runat="server"></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell><p class='text-xsm'><asp:Label ID="Timeline1ActivityA" Text="" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline1NameB" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline1DateC" runat="server"></asp:Label><br /></p></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-xsm'><asp:Label ID="Timeline3ActivityA" Text="" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline3NameB" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline3DateC" runat="server"></asp:Label><br /></p></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-xsm'><asp:Label ID="Timeline5ActivityA" Text="" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline5NameB" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline5DateC" runat="server"></asp:Label><br /></p></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-xsm'><asp:Label ID="Timeline2ActivityA" Text="" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline2NameB" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline2DateC"  runat="server"></asp:Label><br /></p></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-xsm'><asp:Label ID="Timeline4ActivityA" Text="" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline4NameB" runat="server"></asp:Label><br />
                                                            <asp:Label ID="Timeline4DateC" runat="server"></asp:Label><br /></p></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell ID="tmImg2" runat="server"></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell ID="tmImg4" runat="server"></asp:TableCell>
                                <asp:TableCell></asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
            </asp:Panel>
            <asp:Panel id="tableDiv" runat="server">
                <p class='text-bold-lg activity-title'><asp:Label ID='ProgramActivityLabelDm' Text='Program Activity - Direct Mail' runat="server" EnableViewState="true" ></asp:Label></p>
                        <asp:table id="activityTable" runat="server">
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="DMSentLabel" Text="Sent" runat="server" ></asp:Label></p></asp:TableCell>
                            </asp:TableRow>

                        </asp:table>
            </asp:Panel>
            <asp:Panel id="tableDiv1" runat="server">
                <p class='text-bold-lg activity-title'><asp:Label ID="ProgramActivityLabelEm" Text="Program Activity - Email" runat="server" EnableViewState="true"></asp:Label></p>
                        <asp:table id="activityTable1" runat="server">
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="EmSentLabel" Text="Sent" runat="server"></asp:Label></p></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="EmViewed" Text="Viewed" runat="server"></asp:Label></p></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="EmClicked" Text="Clicked" runat="server"></asp:Label></p></asp:TableCell>
                            </asp:TableRow>
                        </asp:table>
            </asp:Panel>
            <asp:Panel id="tableDiv2" runat="server">
                <p class='text-bold-lg activity-title'><asp:Label ID="ProgramActivityLabelCC" Text="Program Activity - ClinCard" runat="server" EnableViewState="true"></asp:Label></p>
                        <asp:table id="activityTable2" runat="server">
                            <asp:TableRow>
                                <asp:TableCell></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="Label2" Text="Sent" runat="server"></asp:Label></p></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="Label3" Text="Viewed" runat="server"></asp:Label></p></asp:TableCell>
                                <asp:TableCell><p class='text-lg'><asp:Label ID="Label4" Text="Clicked" runat="server"></asp:Label></p></asp:TableCell>
                            </asp:TableRow>
                        </asp:table>
            </asp:Panel>
         </ItemTemplate>

         </asp:Repeater>
</form>

</body>
</html>

I have not made any changes to the ids or classes in the aspx page during conversion and there have been no changes made to the css.

body {
    height: 792px;
    width: 1000px;
    margin-top: 50px;
    font-family: Arial;
}

/*Header Styles*/ 
#header {
    margin-top: 50px;
    width: 1000px;
}

/*Font Styles*/ 

.text {
    font-size: 18px;
}

.text-xsm {
    font-size: 16px;
}

.text-md {
    font-size: 18px;
}

.text-bold {
    font-size: 18px;
    font-weight: bold;
}

.text-bold-md {
    font-size: 22px;
    font-weight: bold;
}

.text-bold-lg {
    font-size: 26px;
    font-weight: bold;
}

.text-bold-xlg {
    font-size: 30px;
    font-weight: bold;
}

.text-lg {
    font-size: 22px;
}

.float-right {
    float: right;
}

/*Report Name Styles*/ 

/*not sure but when I remove this all the 2nd of this element styling gets reverted to old styling*/
#reportName > p {
    /*margin-left: 50px;
    //margin-bottom: 400px;
    //margin-top: 0px;
    //padding: 0px;*/
    padding-left: 25px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 2px;
}

#reportName {
    float: left;
    margin-left: 50px;
    margin-top: 45px;
    width: 400px;
}

/* Header logo styles*/
#logo {
    float: right;
    margin-right: 115px;

}

#logo > img {
    height: 100px;
    margin-top: 10px;
    margin-right: 0px;
    padding-right: 0px;
    margin-left: 0px;
}

/*Doctor personal info Styles*/ 
#drPersonal {
      margin: 10px;
      /*border: 2px solid grey;
      border-radius: 100%;*/
}

#info {
    margin-top: 10px;
}

#drPersonal {
    display:inline-block;
    margin-top: 20px;
    margin-left: 65px;

    height:210px;
    width:515px;

    border: 1px solid darkslategray;
    border-radius:0%;
}

#drPersonal > p {
    padding-left: 10px;
    width: 500px;
    margin-bottom: 5px;
    margin-top: 10px;
}

#drInfoTable {
    margin-left: 10px;
}

tr {
    height: 15px;
    padding: 0px;
}

td:first-child {
    width: 125px;
    vertical-align: top;
} 

td {
    vertical-align: middle;
    width: 225px;
}

td > p {
    margin: 0px;
}


#main-circle-1 {
    float: right;
    width: 140px;
    margin-right: 100px;
    margin-top: -175px;
}

#main-circle {
    float: right;
    width: 140px;
    margin-right: 250px;
    margin-top: -175px;
}

/*latest activity div style*/ 


#timeline-title {
    padding-left: 65px;
}

#timeline-img {
    padding-left: 50px;
    width: 850px;
}

#timeline {
    margin-top: 25px;
    margin-bottom: 35px;
}

.timeline-img {
    height: 15px;
}

.tableDiv > p {
    margin-left: 75px;
    margin-top: 15px;
}

.tableDiv1 > p {
    margin-left: 75px;
    margin-top: 15px;
}

.tableDiv2 > p {
    margin-left: 75px;
    margin-top: 15px;
}

.tableDiv3 > p {
    margin-left: 75px;
    margin-top: 15px;
}

.activity-title {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 65px;
}

#GraphicCircleData {
    position: absolute;
    margin-left: 605px;
    margin-top: -140px;
    text-align: center;
    color: white;
}

#GraphicCircleData  td {
    width: 145px;
}

#timelineActivity {
    border-collapse: separate;
    text-align: center;
    margin-top: -232px;
    margin-left: 40px;

}

#timelineActivity td {
    width: 170px;
}

#timelineActivity tr:first-child {
    height: 47px;
}

#timelineActivity tr:last-child {
    height: 47px;
}

#timelineActivity tr:nth-child(3) {
    height: 25px;
}

/* activity tables styles*/

#activityTable{
    margin-left: 60px;
    margin-bottom: 20px;
    border: 1px solid darkslategray;
    border-collapse: collapse;
}

#activityTable tr {
    height: 41px;
    padding: 10px;
}

#activityTable td:first-child {
    width: 275px;
    text-align: left;
    padding-left: 25px;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
} 

#activityTable td:not(:first-child) {
    width: 125px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
    padding-top: 10px;
} 

#activityTable1{
    margin-left: 60px;
    margin-bottom: 20px;
    border: 1px solid darkslategray;
    border-collapse: collapse;
}

#activityTable1 tr {
    height: 41px;
    padding: 10px;
}

#activityTable1 td:first-child {
    width: 275px;
    text-align: left;
    padding-left: 25px;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
} 

#activityTable1 td:not(:first-child) {
    width: 125px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
    padding-top: 10px;
} 

#activityTable2{
    margin-left: 60px;
    margin-bottom: 20px;
    border: 1px solid darkslategray;
    border-collapse: collapse;
}

#activityTable2 tr {
    height: 41px;
    padding: 10px;
}

#activityTable2 td:first-child {
    width: 275px;
    text-align: left;
    padding-left: 25px;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
} 

#activityTable2 td:not(:first-child) {
    width: 125px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid darkslategray;
    height: 20px;
    padding-top: 10px;
}  

Related posts

Recent Viewed