what's wrong in this markup?

[Jeff]

hi

asp.net 3.5

Here is some markup from my webproject. The problem is that this div:
<td style="color:Red; font-family:Verdana; font-size:10px; width:80px;
background-color:Lime;">
<asp:Literal ID="litDate1" runat="server" ></asp:Literal>
</td>
is larger than 80px. This div is meant to just display a date
([28.05.2009]), but it's space is like:
"[28.05.2009] " (notice the empty space after
the date) which causes the litTitle1 to not be aligned near the date field.
(looks like the 80px css style have little effect)

any ideas what I do wrong here?


markup:
<table style="width:546px;">
<tr>
<td style="width:177px; height:130px; ">
<a id="link" runat="server">
<asp:Image ID="thumbnail1" runat="server" Width="177" Height="130" />
</a>
</td>

<td valign="top" style =" background-color:Yellow;">
<table>
<tr>
<td style="color:Red; font-family:Verdana; font-size:10px; width:10px;
background-color:Lime;">
<asp:Literal ID="litDate1" runat="server" ></asp:Literal>
</td>
<td style="font-family:Verdana; font-size:13px; font-weight:bolder;">
<asp:Literal ID="litTitle1" runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Literal ID="litContent1" runat="server"></asp:Literal>
</td>
</tr>
</table>

</td>
</tr>
</table>

 

[Mark Fitzpatrick]

Try setting a width on the table cell that contains the litTitle1 control.
What you're probably seeing is, you have a table that's 546 pixels, the
first cell is 177 leaving 369 for the next cell. The cell that's 369 pixels
wide has a table with two columns in it. It sounds like, since you have the
width defined on one cell it's just dividing it in two. Keep in mind, these
aren't divs, these are table cells so they behave differently. What is
really throwing it off is probably the next row contains a table cell that
spans two columns and that's when it's really important to ensure that you
define widths for the two column row.

Hope this helps,
Mark Fitzpatrick

 

[JM]

Here is some markup from my webproject. The problem is that this div:

<td style="color:Red; font-family:Verdana; font-size:10px; width:80px;
background-color:Lime;">
<asp:Literal ID="litDate1" runat="server" ></asp:Literal>
</td>
is larger than 80px. This div is meant to just display a date
([28.05.2009]), but it's space is like:
"[28.05.2009] " (notice the empty space
after the date) which causes the litTitle1 to not be aligned near the date
field.
(looks like the 80px css style have little effect)

any ideas what I do wrong here?

If you're going to use tables, do yourself a favor and use inline styles to
format the content and not the columns/rows widths and heights unless
absolutely necessary. Basically, exclude widths and heights from your CSS
for table cells/rows.

<table width="560px" cellpadding="0" cellspacing="0">
<tr>
<td width="80px" style="yourstyle">stuff here</td>
<td width="480px" style="yourstyle">stuff here</td>
</tr>
</table>

If you absolutely must style tables widths/heights I'd suggest reading:

http://www.w3schools.com/css/css_table.asp

But, be ready to wrestle some browser rendering issues because they all do
tables a little bit differently and I've seen some really nasty font
overlapping and other weirdness when using pure CSS..

John