title: CSS styling not displaying in Browser
body: <p>I am designing a custom table for a website. In dreamweaver, <code>Design</code> tab shows exactly what I want but in <code>Live</code> tab no border and stuff is visible. I have tried to find solution, I might have overlooked something but I couldn't find solution yet. I am posting code here:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#tableData{
      font-family:Verdana, Geneva, sans-serif;
      font-size:16px;
      color:#09F; 
  
      padding-bottom:25px;
      padding-top:10px;
  
      border-bottom:thin;
      border-bottom-color:#09F;
  
  
  }        
  
  
  table{
      width:600px;
      border: 1px solid #666;
  }
  
  
  li{
      list-style:none;
      height:22px;
      border-bottom:1px;
      border-bottom-color:#09F;
  }
  
  
  #tableHeading{
      font-family:Arial;
      font-size:32px;
      color:#666; 
      padding:10px;
      float:left;
      padding-right:500px;
      border-left:thick;
      border-right:thick;
      border-left-color:#09F;
      border-right-color:#09F;
  
  }  
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;tr&gt;
      &lt;td id="tableData"&gt;
           &lt;ul&gt;
               &lt;li&gt;Android&lt;/li&gt;
               &lt;li&gt;abced &lt;/li&gt;
               &lt;li&gt;xyz&lt;/li&gt;
           &lt;/ul&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>In Design View:</p>
  
  <p><img src="https://i.stack.imgur.com/RU0XF.png" alt="enter image description here"></p>
  
  <p>In Live View (Browser):</p>
  
  <p><img src="https://i.stack.imgur.com/ft7Ah.png" alt="enter image description here"></p>
  
  <p>What am I doing wrong? How can I solve it?</p>
  
  <p>Regards</p>