I have the following css code:
#Layer3 { position:absolute; width: 89%; height: 40%; left: 10%; top: 56%; background-color: #f1ffff; } #Layer3 h1 { font-size: medium; color: #000033; text-decoration: none; text-align: center; } .tableheader { border-width:10px; border-style:solid; } .tablecontent { height: 95%; overflow:auto; }
However, when I use this PHP to generate the html
echo '<div id='tableheader' class='tableheader'>'; echo '<h1>{$query} Auctions</h1>' . '\n'; echo '</div>'; echo '<div id='tablecontent' class='tablecontent'>'; echo '<table border='0' width='100%'><tr>' . '\n'; echo '<td width='15%'>Seller ID</td>' . '\n'; echo '<td width='10%'>Start Date</td>' . '\n'; echo '<td width='75%'>Description</td>' . '\n'; echo '</tr>\n'; // printing table rows foreach ($rows as $row) { $pk = $row['ARTICLE_NO']; echo '<tr>' . '\n'; table contens generated in here echo '</tr>' . '\n'; } echo '</table>'; } echo '</div>';
which generates this html:
<div id='tableheader' class='tableheader'> <h1>hardy Auctions</h1> </div> <div id='tablecontent' class='tablecontent'> <table border='0' width='100%'> <tr> <td width='15%'>Seller ID</td> <td width='10%'>Start Date</td> <td width='75%'>Description</td> the rest of table stuff </div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.