My Code below is generated from a StaticItemTemplate in an ASP:Menu.
The code and the link does as it pleases, however it fails validation.
Output code is as follows
<li>
<a class="level1 StaticMenuItemStyle" href="/Services.aspx">
<div class="StaticMenuItemStyle"
onmouseover="style.backgroundColor='#0088CB';style.color=white;"
onmouseout="style.backgroundColor='';"
style="color:Color [Blue];width:180px;">
Services
<br />
<div style="background-color: Blue; width: 180px;height: 5px;"></div>
</div>
</a>
</li>
however this errors on W3Validator
Line 84, Column 63: document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag
style="color:Color [Blue];width:180px;">
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>").
However if i replace the DIV with a span it validates. but doesnt look right. Anyone got any ideas how to get round this ?
Inside a "a" tag, div is not validate, because div is a basically block section and default style is section block. http://webdesign.about.com/od/htmltags/a/aa011000a.htm. But for anchor tag, it is same like as span. You can use onclick attribute on the div attribute or use .click function by jquery.
You can use it like below:
<li>
<a class="level1 StaticMenuItemStyle" href="/Services.aspx">
<span class="StaticMenuItemStyle" style="display:block;"
onmouseover="style.backgroundColor='#0088CB';style.color=white;"
onmouseout="style.backgroundColor='';"
style="color:Color [Blue];width:180px;">
Services
<br />
<div style="background-color: Blue; width: 180px;height: 5px;"></div>
</span>
</a> </li>
Mention the jquery is initialize before the script
Related
I have discover a way to have an input and label elements as an accordion viewer.
To center vertically my elements I use the label as if it was a div, that is, giving it display:table and create a div inside it.
So I have :
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<div style='display:table-cell'>
<img ....... >
thetextforthelabel
</div>
</label>
</div>
Ok, this works fine.
My question is: am I doing something 'forbiden' ?
Can I use the label tag as a container ?
I know that it can be not orthodox .. but It works for me...
Your code is invalid.
The problem is that div elements can only be used
Where flow content is expected.
However, the content model of label elements is
Phrasing content, but with no descendant labelable elements
unless it is the element's labeled control, and no descendant
label elements.
Anyways, it will probably work, because (unlike e.g. p elements) the end tag of label elements can't be omitted:
Neither tag is omissable
However, I'm not sure of the advantage of having a table element with a single cell. Consider using the following instead:
<div>
<input id='myid'>
<label for='myid' style='display:block'>
<img ....... >
thetextforthelabel
</label>
</div>
Yes, it is forbidden by the formal rules of HTML. And yes, it works, and the parsing rules of HTML mean that it must work. So this is different from, say, the rule that says that a p element must not contain a div element; that rule is enforced by the parsing process (the p element is implicitly closed when <div> is encountered).
On the other hand, if the content is just an image and text, you don’t need a div element but can use span. In rendering, it does not matter (with the usual CSS caveats) which one you select, since their only difference in rendering is with the default display value, and you are assigning a display value anyway.
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<span style='display:table-cell'>
<img src="http://lorempixel.com/100/50" alt="(an image)">
thetextforthelabel
</span>
</label>
</div>
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
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>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
i'm having an issue in chrome (and firefox, too, i think)
i have a bit of html that looks like this:
<a id="outside">
<span id="middle>
:contents
</span>
</a>
if :contents evaluates to a string or a tag other than an anchor, it renders as intended;
<a id="outside">
<span id="middle">
inside
</span>
</a>
or
<a id="outside">
<span id="middle">
<div id="inside"></div>
</span>
</a>
however, if it evaluates to an anchor, it renders as follows:
<a id="outside">
<span id="middle>
</span>
</a>
<a id="inside"></a>
the anchor is jumping outside the span. why? what can i do to fix this?
To fix it, you have to make sure that you never embed an anchor tag insider another anchor tag - results are unpredictable as it is not standards compliant.
If you have control over the generated code, make sure you tidy up that HTML by substituting that top level anchor with something that can contain both a div and a a tag - perhaps another div element?
References:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
This is likely happening because your browser is trying to 'fix' your illegal HTML. According to the W3 documentation:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
Here is the link to the documentation: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2
I tried to validate my HTML code but I got this error:
Line 157, Column 22: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <div class="details">
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>").
but I cant see any mistake in my code, so I am asking for help...
<!--Bar 3-->
<div class="mosaic-block bar3">
<a href="http://www.desktopped.com/featured/2010/09/multi-d isplay-setup-with-four-systems-and-a-whole-lot-of- screen-space/" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h4>
<p>via Desktopped</p>
</div>
</a>
<img src="http://buildinternet.s3.amazonaws.com/projects/mos aic/64tb.jpg" alt="fotka1"/>
</div>
Blocks can't be placed in inline elements. In this case a is inline, and div is block, so <a><div></div></a> is invalid HTML.
this is the page - http://www.class-a-studio.co.il/contact.php
Column 23: document type does not allow element "LINK" here
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
i dont no what to do...?
As per the HTML 4 spec, the <link> element is only allowed inside the <head> element in your document. Perhaps you mean to use <a> element here?
<div class="buttons">
<a href="#" class="link1"
onclick="document.getElementById('form').submit()">
<em><img src="images/formB.jpg" alt="שליחה"></em>
</a>
<link href="tenks.php">
</div>
Perhaps needs to be
<div class="buttons">
<a href="#" class="link1"
onclick="document.getElementById('form').submit()">
<em><img src="images/formB.jpg" alt="שליחה"></em>
</a>
tenks
</div>