Creating a web page involves using a PHP-based CMS to dynamically generate the content by fetching information from a database. However, a strange issue has arisen where the browser seems to be extending a div beyond its closing tag.
Even though the closing tag is clearly visible, the browser does not recognize it, causing all styling within that div to affect the entire page. Here is a snippet of the HTML output, with the persistent header div:
<div id="header">
<table>
<tr>
<td style="width: 10%;">
<img style="height: 120px; width: 101px;" src="img" alt="some alt">
</td>
<td>
<h2>Heading</h2>
<h3>Subhead</h3>
</td>
</tr>
<table>
</div>
Styling the h2 and h3 tags within the div affects all similar tags on the page due to this issue. Here is the CSS being applied:
#header h2 {
font-size: 24pt;
font-weight: 900;
color: #776F65;
letter-spacing: 0;
line-height: 0;
}
#header h3 {
font-weight: 900;
color: #776F65;
letter-spacing: 0;
padding-left: 35px;
}
The PHP code used to generate the HTML output is as follows:
echo('<div id="header">'); // HEADER ELEMENT BEGINS HERE
while($row = mysql_fetch_array($getHeaderElements)) {
echo($row['content']);
}
echo('</div>'); // End Header Element.
This issue has been experienced on Google Chrome. Any insights on why this behavior is occurring would be greatly appreciated.
Best regards, Ben.