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

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;
}
 
E

Eric

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;
}
 
B

bruce barker

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;
| }
|
|
|
 
M

Michel de Becdelièvre

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.

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top