0

Hello,

I'm a newer web developer and I was working on a small project for myself. I defined a class called "garnish" and made a div that class. Then I placed a table in the div that contains my text. When I place text in the div, it is properly styled, but any text inside the table does not inherit the styling (actually the firebug inspector tells me it does, but it is clearly not properly styled). If I set the table to class garnish, I do receive proper styling... My question is, why doesn't my table inherit from the div? According to what I've read, this should work.

I stripped down my page to create a quick example of what I did, just look below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>example</title>

    <STYLE type="text/css">
       body {
    font-family: Verdana, Geneva, Arial, san-serif;
    background-color: black;
    color: white;

}
   #allcontent {
    width: 800px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;

    font-size: medium;
    font-weight: normal;

}
    div   {
    border-color: white;
    border-width: 3px;
    border-style: solid
     }
    .garnish {
        color: green;
    }
    </STYLE>

  </head>
  <body>

<h2>
    My Inventory
</h2>
    <div id="allcontent">
        <!--Title Section-->
        <div id="header">
            <h1>Example</h1>
        </div>

        <div id="pagecontent">




<div id="inventoryalcohol" class="alcohol">
    <form action="" method="POST">
        <table>
            <tr>
                <th>
                    <input type="radio" name="bacardi151" value="instock" checked="checked" />
                    <input type="radio" name="bacardi151" value="outofstock" />
                    <input type="radio" name="bacardi151" value="delete" />
                </th>
                <td>
                    Bacardi 151
                </td>
            </tr>
            <tr>
                <th>
                    <input type="radio" name="absolutcitron" value="instock" checked="checked" />
                    <input type="radio" name="absolutcitron" value="outofstock" />
                    <input type="radio" name="absolutcitron" value="delete" />
                </th>
                <td>
                    Absolut Citron
                </td>
            </tr>
            <tr>

                <th>
                    <input type="radio" name="jimbeamrye" value="instock" checked="checked" />
                    <input type="radio" name="jimbeamrye" value="outofstock" />
                    <input type="radio" name="jimbeamrye" value="delete" />
                </th>
                <td>
                    Jim Beam Rye
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="inventorymixers" class="mixer">
<form action="" method="POST">
        <table>
            <tr>
                <th>
                    <input type="radio" name="orangejuice" value="instock" checked="checked" />
                    <input type="radio" name="orangejuice" value="outofstock" />
                    <input type="radio" name="orangejuice" value="delete" />
                </th>
                <td>
                    Orange Juice
                </td>
            </tr>
            <tr>
                <th>
                    <input type="radio" name="coke" value="instock" checked="checked" />
                    <input type="radio" name="coke" value="outofstock" />
                    <input type="radio" name="coke" value="delete" />
                </th>
                <td>
                    Coke
                </td>
            </tr>
            <tr>
                <th>
                    <input type="radio" name="7up" value="instock" checked="checked" />
                    <input type="radio" name="7up" value="outofstock" />
                    <input type="radio" name="7up" value="delete" />
                </th>
                <td>
                    7up
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="inventorygarnish" class="garnish">
<form action="" method="POST">
        <table>
            <tr>
                <th>
                    <input type="radio" name="lemon" value="instock" checked="checked" />
                    <input type="radio" name="lemon" value="outofstock" />
                    <input type="radio" name="lemon" value="delete" />
                </th>
                <td>
                    Lemon
                </td>
            </tr>
            <tr>
                <th>
                    <input type="radio" name="lime" value="instock" checked="checked" />
                    <input type="radio" name="lime" value="outofstock" />
                    <input type="radio" name="lime" value="delete" />
                </th>
                <td>
                    Lime
                </td>
            </tr>
            <tr>
                <th>
                    <input type="radio" name="orange" value="instock" checked="checked" />
                    <input type="radio" name="orange" value="outofstock" />
                    <input type="radio" name="orange" value="delete" />
                </th>
                <td>
                    Orange
                </td>
            </tr>
        </table>
    </form>
</div>

        </div>

                <!--Footer Section-->
        <div id="footer">
           
        </div>

    </div>


  </body>
</html>
2
Contributors
3
Replies
5
Views
7 Years
Discussion Span
Last Post by almostbob
2

if you waqnt it to work as expected you have to declare it as expected

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Edited by almostbob: n/a

Votes + Comments
Thank you very much for the help.
good spot AB - whether or not it solves his prob
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.