CSS not working

Question

Sometimes the dang thing works and at other times it doesn't. I have many tables in my app and the CSS for all of them is working. There's nothing different for this one, except for it, the CSS isn't being applied, God knows why. Help.

table.catalogContainer
{
    border: none;
    padding: 50px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
}

td.catalogCell
{
    border: none;
    padding: 30px, 20px, 50px, 20px;
}

<div id = "catalog">
        <table class = "catalogContainer">
            <% while ((category = Helper.GetNextCategory(categoryIndex++)) != null)
               { %>
                <tr>
                    <td class = "catalogCell">
                        <img src = "../../Content/Category.gif" 
                        width = "25px" height = "25px" alt = "Category" />

                        <b>
                            <%= Html.ActionLink(category.Name,
                                   "DisplayCategory",
                                   "Catalog", 
                                   new { id = category.Id }, 
                                   null) %>
                        </b>
                    </td>

                    <td>

                    </td>
                </tr>
            <% } %>
        </table>

Update

Ok, I found the problem. The border that was showing in the table still was due to the second on which I did not apply the class yet.

Answer 1

It may be that the CSS isn't being pulled in time while your script is running. Try the following pattern in your style sheet:

#catalog table
{
    ...
}
#catalog table td
{
    ...
}

Edit

I see you've found the problem. Still, you can clean up your implementation a bit by using the cascade a bit more effectively as shown above.

Answer 2

What browser are you testing with? When you view the page source does everything look as it should? Maybe try posting the generated source html for that section of the page. It's possible your template code is outputting some bad stuff that is breaking your html for this particular table (which could affect page rendering).

I find firebug invaluable when troubleshooting css. You can easily see which styles are being applied to particular elements. You can use it to select an element and view all sorts of css information, and even try different values on the fly.

Additionally, the commas in your shorthand padding td.cataglogCellare are unnecessary and may cause some issues in different browsers/versions.

Additionally Additionally, you really shouldn't be using the <b> tag to markup your content. <em> or <strong> are much better semantically and you can style to create whatever presentation is needed.