PDA

View Full Version : Validation error



AlCapwn
Apr 18th, 2010, 04:22 AM
Okay this is my 3rd time asking for help in a small amount of time, but I've re-read this over and over and still do not understand what is wrong when I validate my mark up.


# Error Line 21, Column 15: document type does not allow element "B" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>



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


I marked up the area that has an error red. But it also marks the other 3 of those tags as well.

Excavator
Apr 18th, 2010, 05:05 AM
Hello again ALCapwn,
By highlighting and underlining that closing bracket the validator is kind of misleading you but if you read further it does explain why the code is invalid.


The inline elements, your b tags, need to be contained in a block level element like a div.

You could change those elements that make up your corners to divs and not have to change anything in your CSS.
I think this works - <div class="b1h"></div><div class="b2h"></div><div class="b3h"></div><div class="b4h"></div>

=========================
The other way to fix it would be to match the bottom corners.
Scroll down to your bottom rounded corners that are valid and you'll see what I mean. You could probably change that #corner_holder to .corner_holder and use it on the top corners also.

Try this -
, .b3bh {height:1px; background:#964B00; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#964B00; margin:0 1px;}
.corner_holder {
clear: both;
background: #610606;
}
.b1bh, .b2bh, .b3bh, .b4bh {background: #C9B385;}
</style>
</HEAD>

href="contact.html">Contact Me</a> |
<a class="one" href="rss.html">RSS Feed</a>
<!--end navigaition--></div>
<div class="corner_holder">
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<!--end .corner_holder--></div>
<div id="header">Announcements</div>
<div id="

...

sidebar--></div>
<div id="clearer"></div>
<!--end container--></div>
<div class="corner_holder">
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1bh"></b>
<!--end .corner_holder--></div>


<div id="fo

AlCapwn
Apr 18th, 2010, 05:14 AM
Hello again ALCapwn,
By highlighting and underlining that closing bracket the validator is kind of misleading you but if you read further it does explain why the code is invalid.


The inline elements, your b tags, need to be contained in a block level element like a div.

You could change those elements that make up your corners to divs and not have to change anything in your CSS.
I think this works - <div class="b1h"></div><div class="b2h"></div><div class="b3h"></div><div class="b4h"></div>

=========================
The other way to fix it would be to match the bottom corners.
Scroll down to your bottom rounded corners that are valid and you'll see what I mean. You could probably change that #corner_holder to .corner_holder and use it on the top corners also.

Try this -
, .b3bh {height:1px; background:#964B00; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#964B00; margin:0 1px;}
.corner_holder {
clear: both;
background: #610606;
}
.b1bh, .b2bh, .b3bh, .b4bh {background: #C9B385;}
</style>
</HEAD>

href="contact.html">Contact Me</a> |
<a class="one" href="rss.html">RSS Feed</a>
<!--end navigaition--></div>
<div class="corner_holder">
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<!--end .corner_holder--></div>
<div id="header">Announcements</div>
<div id="

...

sidebar--></div>
<div id="clearer"></div>
<!--end container--></div>
<div class="corner_holder">
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1bh"></b>
<!--end .corner_holder--></div>


<div id="fo

And I think that's why I got confused, but thanks again as always lol.