How to make
work in an already defined tag?

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

do you mean the titles (Upcoming Hikes/Active Hiking Groups)? — Jordan Foreman, Jul 19 '11 at 17:38
are saying that links for title in the center and right column is not working? — MAK Ripon, Jul 19 '11 at 17:40
@Jordan not the titles of the sections, but the links which are titles to the hikes and groups. — Genadinik, Jul 19 '11 at 17:41
@Genadinik what should happen? You've put h3 tags inside anchor tags. You REALLY shouldn't do this - it's not valid — Stuart Burrows, Jul 19 '11 at 17:42

score 8 · Accepted Answer · answered Jul 19 '11 at 17:42

<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>.

Thanks, now I understand my mistake. So is the right way to do this is just make the size of text bigger for the links? — Genadinik, Jul 19 '11 at 17:49

score 1 · Answer 2 · answered Jul 19 '11 at 17:38

1

Looks like you are going to have to do something like this:

.content .chapter_text li a h3 {
    color: #7e9940;
    text-decoration: none;
}

(Notice the h3 before the { )

Does this work?

answered Jul 19 '11 at 17:38

Jonah Katz

5,230
16
67
90

2

This...um... wouldn't work. According to valid HTML, you can't have that kind of structure - you cannot put block elements (like `
`) inside of an anchor, which is inline.
– Nightfirecat Jul 19 '11 at 17:42
@Jonah should I add the whole snippet? Or just sneak in the h3 to the declaration of the existing styling? Thanks! – Genadinik Jul 19 '11 at 17:44
@Genadinik You need to copy and paste the entire snippet. If you just add h3, youll lose the styling on the a tag – Jonah Katz Jul 19 '11 at 17:55

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

Block level and inline elements render differently. Normally block level elements begin on new line wheres inline element is not. so, if you put block level elements such as div,p,h1..h6 it will be invalid html markup.

Please check w3 specification. You may also have a look in this question

edited May 23 '17 at 12:15

Community

1
1

answered Jul 19 '11 at 17:54

MAK Ripon

1,065
4
14
27

How to make work in an already defined tag?

work in an already defined tag?

3 Answers3

`) inside of an anchor, which is inline.

How to make
work in an already defined tag?