The problem: the red text bar (h3) appears OVER the png file.
HTML:
<div class="box2">
<h6><img alt="" src="../Images/SR-Colter.png" /></h6>
<h3><a id="MaryColter"></a>Architect of Grand Canyon</h3>
<p>IN THE EARLY 1900s, a time when few women practiced architecture, Mary Colter was hard at work designing some of the most spectacular buildings in Arizona. Her creations, several of which are found in Grand Canyon, helped define an architectural style that complemented the grand natural landscapes of the American Southwest.</p>
</div>
CSS:
.box2 {
font-family: "Georgia";
border: .15em solid black;
padding: 1em;
margin: 2em 0;
display: inline-block;
}
.box2 h3 {
font-family: "Georgia", Serif;
font-weight: bold;
font-style: normal;
font-size: 1.8em;
line-height: 1.1em;
text-decoration: none;
font-variant: small-caps;
text-indent: 0em;
text-align: center;
color: #FFFFFF;
background-color: #990000;
margin: 0 0 0.5em 0;
padding: .3em 0;
clear: none;
}
.box2 h6 {
float: left;
margin: -2em 0 0 -0.9em !important;
padding: 0 1em 0 0;
z-index: 2;
}