css div not being recognized

Question

Hello,

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.

Answer 1

#tableheader {
  border: 10px solid #000;
}

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.

Answer 2

Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.

That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.

One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.

Answer 3

Hi,

I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.

So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.