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>