Question

I have an tag that seems to be ignored by the browser because it is already also an tag that has styling defined like this:

.content .chapter_text {
    margin-bottom: 0em; 
    padding: 0.5em;
    line-height: 1.4em;
}

.content .chapter_text li{
    list-style-image: url("http://www.comehike.com/img/ui/circle.png");
    margin-left:20px;
}
.content .chapter_text li a{
    color: #7e9940;
    text-decoration: none;
}
.content .chapter_text a:hover{
    color: #3f6b30;
}

The page I am working on is here: http://www.comehike.com – see the middle section in center and right columns.

The links of titles are inside but it doesn’t render. How should I edit the styling to make it render?

Thanks,
Alex

Answer 1

<h3> isn’t valid within <a>, or even within <p> — <h3> is a block-level tag and <a> is inline. As such, you’re going to get inconsistent behavior in different browsers. For instance, Chrome internally rewrites this HTML to:

<p>
</p>
<p>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
  </a>
</p>
<h3>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
    Milpitas Social Group
  </a>
</h3>
<p>
  Where: 95035 [...]
</p>

You’re going to need to restructure your HTML so that this nesting doesn’t happen, or use an inline element in the place of <h3>.