Forum Moderators: not2easy
"The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")."
Anyone know a solution to this? I'd still like to use the <hr /> since it has special characteristics in the CSS.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<title>Hr Test</title>
</head>
<body>
<table border="1" bgcolor="#00ffff" cellspacing="0" cellpadding="0">
<tr>
<td><span>Some Text</span><hr /></td>
</tr>
</table>
</body>
</html>
<hr /><span>As bumpaw suggests, you could move the
<hr /><span><span><div>
the <span> is built into the CMS scripting so I'd have to hack that
You could avoid the potential nesting problems by setting the hardwired <span> to display:block in the CSS (just use the context it's in to ensure that other <span>s remain unaffected). The result is a block level span holding a block level horizontal rule.
The problem with this is that the HTML still won't validate (the html validator does not read your CSS, but rather bases it's error findings on the defaults for the code you use). However, if you're stuck with it, I'd say better to have an invalid, but working, page than a valid one that doesn't do what you want.
If the CMS won't allow you to insert the HR there, then that's another problem entirely.
cEM
<td><span class="main-menu" ><hr /></span></td>
Would your suggestion about a display : block work in this situation?
I don't believe the actual specs state that you CANNOT nest blocks elements inside of inline elements (which makes the fact that the validator gives an error sort of odd), it merely runs the risk of doing weird things to your layout. I remember reading somewhere in the specs that the block level element splits the inline box in half, and results in some unpredictable alignments, etc. Again, I'm not 100% positive about this. I'll dig around and try to find that page.
[ADDED]Couldn't find a reference to what I hinted at above, but did locate the following quote:Generally, inline elements may contain only data and other inline elements."
from this page [w3.org]Note that they used the wording "Generally" as opposed to stating that you cannot nest them. Given the way spec documents are written, it's pretty clear that the wording is intentional, and I suspect the word choice stems from the fact that it is not a "page-breaker" sort of error. I'm not saying that we should go around flouting the specs, and it really makes no sense to intentionally nest a block element inside of an inline element, but in a case like this where the limits of your technology are up against a pretty vague HTML spec, I don't think its the end of the word if you do it.[/ADDED]
Regardless, I think your difficulty with doing this is likely to limit itself to validation. I don't suspect that putting that <hr> in that <span> is going to make the page behave wrongly, especially if it's the only thing in the table cell. So you may need to just make a decision: is it more important to use valid code, or to put that <hr> where I want it. Obviously, only you can make that decision.
cEM
Thanks for a great answer. Right now I see no problems with how it is rendered. Seems to work well in IE, Mozilla and Firefox. I have not tried beyond those two but my guess is that it looks okay.
I am wondering, however, beyond the obvious potential problems with browsers handling something like this, are there any other ramifications? For instance, would any important spiders have a bad reaction to this?
Paul
For instance, would any important spiders have a bad reaction to this?
Obviously, I can't answer that with any certainty, but nothing I've read, heard, or experienced would lead me to believe they would.
Spiders are generally after your content. The markup plays into that only insofar as it feeds the spider your content in an efficient, fast, and semantically relevant manner (or not). An <hr> tag has nothing to do with any of those things (and neither, incidentally, do the specific style properties in your CSS, with a few important exceptions), so I would say this combination is entirely a concern for your human visitors.
cEM
