Question

here is my CSS:

.body
{
     font-family : Segoe UI;
}

.table{
    width : 50%;
    font-size:medium;
    border-spacing:5px;       
}

.leftCol
{
    width:15%
}

.RightCol
{
    width:35%
}

.header
{
    width:35%;
    font-weight:900;
    text-align:left;
}

.dates
{
    color:GrayText;   
    font-size:small
}

.pictures
{
    width:10%;
}

.userName
{
    width:10%;
    text-align:left;

}

.smallTable
{
    width:20%;    
}

Here is the HTML markup:

 <table class=".table">
                                <tr>
                                    <td rowspan="3" class=".leftCol">
                                        <asp:Label ID="ImageLabel" runat="server" Text='<%# Eval("Image") %>' />
                                    </td>
                                    <td class=".header">
                                         <asp:Label ID="UserNameLabel" runat="server" Text='<%# Eval("UserName") %>' />
                                    </td>
                                </tr>
                                <tr>
                                    <td class=".rightCol">
                                        <asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
                                    </td>
                                </tr>
                                <tr>
                                    <td class=".dates">
                                       <asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
                                    </td>
                                </tr>
                            </table><hr />      

the other one:(this table width actually works)

<table class=".smallTable">
                                <tr >
                                    <td class=".pictures">
                                       <asp:Label ID="Label1" runat="server" Text='<%# Eval("Pictures") %>' /></td>
                                    <td class=".userName" align="left">
                                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>' /></td>
                                </tr>
                            </table><hr />  

so, instead of following the rules, VS uses 100% width for the table using .table class, and then it just arranges in justified. The dates does not appear in gray colour … and basically nothing follows. But i can assure you that the class names i wrote and everything is correct as i check. It just doesnt work . Do you know anyway i can force VS 2010 to do this ?

Answer 1

In all class that you declare on the tags you must place them with out the dot. Eg:

<table class="smallTable">

and change the class name .table to something else because the table is reserve for all tables and probably this type of variables lead to bugs. Do not mix up the tag names with the css declare.

The css table{ width : 50%; } change all the tables on the page.
The css body{ font-family : Segoe UI; } change all the body fonts.
The css .body{ font-family : Segoe UI; } is change only what you declare on class as body but eventually can lead to bugs and errors .