CSS Layout question - how to duplicate a table layout with CSS

  • Thread starter Thread starter Eric
  • Start date Start date
E

Eric

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;
}
 
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;
}
 
there is no css equalivent value for cellpadding and cellspacing, as this is
a table only attribute.

-- bruce (sqlwork.com)

| 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;
| }
|
|
|
 
Eric said:
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.
Click to expand...

Generally speaking, Visual Studio seems to behave somewhat like IE5, even if
you are using IE6 / DOCTYPE detection for your aspx.
 
Back
Top