Best way to fix validation issue

[timbo2k2]

Hi,

I get the following error whilst validating a page and would like know the best way around this:

"document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag"

my html:

<a href="/football-file/"><h2 class="fashion-file-h">my football file</h2></a>

my css:

#content .football-file h2.football-file-h {
	width:122px;
	height:97px;
	margin:-16px 0 0 0;
	padding:0;
	background:url(../images/myfile.gif) no-repeat;
	text-indent:-9999px;
	overflow:hidden;

Would the following below work instead?

<a href="/football-file/"><span class="football-file-h">my football file</span></a>

.football-file-h {
	width:122px;
	height:97px;
	margin:-16px 0 0 0;
	padding:0;
	background:url(../images/myfile.gif) no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}

Thanks

[Dan Grossman]

Probably. The <a> element is an inline type, so a block type element like <h2> shouldn't appear inside it.

[kohoutek]

You're having an H2 element in your link which is invalid.

Instead, place the link inside your H2.

<h2><a href="#">my link</a></h2>

[timbo2k2]

Ah of course, thanks for reminding me