Ah, part of the problem is Visual Studio doesnt display it correctly in
design mode when using CSS. You have to use View in Browser to get what it
really looks like. Although I'm not sure how to remove the spacing between
labels, it looks closer now.
Is there any way to specify a percentage size? I tried Width=25% hoping
that would make the label 25% the width of the container but that didnt
work.
Here's my first attempt using solely CSS. It looks bad in VS design mode
but ok in a browser:
<asp:Panel id="Panel1" style="Z-INDEX: 101; LEFT: 40px; POSITION:
absolute; TOP: 40px" runat="server"
CssClass="ReportTypes">
<asp:Label id="lblStatic" runat="server"
CSSclass="QuarterLabel">Static</asp:Label>
<asp:Label id="lblCurrent" runat="server" CSSclass="QuarterLabel">Real
Time</asp:Label>
<asp:Label id="lblDaily" runat="server"
CSSclass="QuarterLabel">Daily</asp:Label>
<asp:Label id="lblMonthEnd" runat="server" CssClass="QuarterLabel">Month
End</asp:Label>
<asp:Label id="txtStatic" CssClass="QuarterLabel"
Runat="server">12/4/2004</asp:Label>
<asp:Label id="txtCurrent" CssClass="QuarterLabel"
Runat="server">12/5/2004</asp:Label>
<asp:DropDownList id="ddlDaily" CssClass="QuarterLabel"
Runat="server"></asp:DropDownList>
<asp:DropDownList id="ddlMonthEnd" CssClass="QuarterLabel"
Runat="server"></asp:DropDownList>
</asp:Panel>
..QuarterLabel
{
border: solid 1 black;
position: relative;
text-align: center;
width: 173px;
}
"Eric" <er**@nospam.com> wrote in message
news:OE**************@TK2MSFTNGP12.phx.gbl...
I'm trying to reproduce the following table layout using CSS only and am
having some trouble with it. I'd like them to look identical but I'm
having trouble sizing the labels properly as it doesnt seem to be working
correctly:
Here's the table:
<table class="Table1" cellSpacing="0" cellPadding="0"
borderColorLight="white" border="1">
<tr class="HeaderTr">
<td align="center">Static Reports</td>
<td align="center">Real Time Reports</td>
<td align="center">Daily Reports</td>
<td align="center">Month End Reports</td>
</tr>
<tr>
<td align="center"><asp:label id="lStaticUpdateTime"
RUNAT="server" WIDTH="173px"></asp:label></td>
<td align="center"><asp:label id="lCurrentReportsTime"
RUNAT="server" WIDTH="173px"></asp:label></td>
<td align="center"><asp:dropdownlist id="dDailyDate"
RUNAT="server" WIDTH="173px"></asp:dropdownlist></td>
<td align="center"><asp:dropdownlist id="dEomDate" RUNAT="server"
WIDTH="173px"></asp:dropdownlist></td>
</tr>
</table>
Here's the style sheet entry for the table.
.Table1
{
background-color: #6699cc;
font-family: Verdana, Arial;
font-size: 11px;
color: white;
border: 0px;
text-align: left;
font-weight: bold;
}
