css div не распознается

Question

У меня есть следующий код CSS:

#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;    
}

Однако, когда я использую этот PHP для генерации 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>";

, который генерирует этот 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>

Правильно ссылаются на таблицу стилей, поэтому я не уверен, что является причиной ошибки. Но вокруг заголовка таблицы нет границ. Оба эти слоя находятся в Layer3, который больше не отображается должным образом на странице.

Answer 1

Начните с просмотра HTML DOM на отображаемой странице, используя Firebug в Firefox или панель инструментов разработчика IE в IE.

Таким образом, вы можете видеть, какие стили на самом деле связаны с элементом на отображаемой странице. Оттуда намного проще отладить проблему.

Одна из возможностей заключается в том, что где-то в файле CSS есть синтаксическая ошибка, приводящая к неправильному применению стилей.

Answer 2

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

Попробуйте дать ему цвет.

РЕДАКТИРОВАТЬ: поскольку его идентификатор является заголовком таблицы, попробуйте изменить селектор стиля на идентификатор. Вы также можете попробовать использовать! Важное, чтобы увидеть, что-нибудь переопределяет ваш селектор классов.

Значения специфичности:

встроенный: 1000; id: 100, класс: 10, элемент: 1

! Важный превосходит все другие не важные декларации.

Answer 3

Я только что быстро взглянул на это, и он выглядит хорошо, я также создал их локальную копию, и стили тоже работают хорошо, я получаю красивую толстую черную рамку вокруг текста h1.

Так что из того, что вы объясняете, либо перезаписывают стили, либо стили не применяются к странице.