why the Markup Validator says it has error in the html code below?
Line 287, Column 80: attributes construct error
…ion" value="set=1&page=2" /><ul><li><a href="http://campusfaithhub.org/vie…
http://validator.w3.org/check?uri=http%3A%2F%2Fcampusfaithhub.org%2Ffood%2Ffood-should&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.1
<div id="pagination">
<!-- add this to fix IE whitespace bug. IE sees a space inside an empty div, and applies line-height to it. The div will then be expanded in IE6 (and older) to accommodate this space. There's your gap. Simplest solution is to make sure IE6 understands that the empty div really _is_ empty, by putting a comment inside it and make sure there's no line-break. -->
<input type="hidden" class="last-pagination" value="set=1&page=2" />
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<!--pagination-->
I have a hidden input field to store some info. If I take it out, it still is validated with errors! I can't find anything else to fix - can u see what I have done incorrectly? thanks!
EDIT: after viewing the source of your actual page, I see this problem...
<input type="hidden" class="last-pagination" value="set=1&page=2" /><ul><li>1</li><li>2</li></ul></div>
Specifically: page=1"class="current
You need a space between the closing quote and opening attribute tag.
Related
This is a hard one to explain, but I have 3 phantom arrows (<<<) appearing in the browser, but no stray arrows in my HTML.
When I inspect the element, the arrows are a child of my 'bookshelf-wrapper' container.
Where are these arrows coming from and how can I get rid of them?
Screenshot attached as gives clearer indication than code.
Side note - I realise it's 'Picture' not 'Portrait'.
check html for multiple openings like '<<'. As far as I can see from the image 1 '<' is comming from with the input#delete.
in image I can see:
<<td class="cell"><input type="checkbox" id="delete"></td>
should be without extra '<':
<td class="cell"><input type="checkbox" id="delete"></td>
If it doesn't solves your problem, please provide more code and I'll update my answer
I tried this code in IE9, unexpectedly it got screwed because of a missing </p> after heading.
live demo
<style>
#MyForm div {
width: 200px;
height: 30px;
float: left;
}
</style>
<div>
<p><b>Login</b>
<form id="MyForm" action="test.html">
<div>
<label>My Email</label>
<input />
</div>
<div>
<label>My Password</label>
<input type="password">
</div>
</form>
</div>
It is a bug or just me?
Update
A block level element is invalid inside a "p" tag as per W3C
<P>
<DIV>...</DIV>
</P>
But it's optional to close <p> tag so,
<p>content block 1
<p>content block 2
<p>content block 3
<form> ..... </form>
This appears valid. A block element should automatically close <p> if it's not explicitly closed as in first example.
This does appear to be an IE9 bug.
After doing some more testing (and adding some <span>s into the form), in IE9 Standards Mode it looks like IE9 fails to recognise that a <form> is not allowed as a descendent of a <p> but does recognise that a <div> is also not allowed.
Consequently it inserts elements as descendants of the p element node until it encounters the first <div>, at which point it terminates the <form> and the <p> and then inserts the rest of the form body after the form.
When it encounters </form> it treats it as an end tag for a non-open element and ignores it.
After working with the sample Fiddle for a minute I can confirm that IE9 does have a problem with it. However other browsers may also have the same problem, though I have not confirmed. The problem is that IE9 thinks you are nesting a block level element (the div) inside of the p tag. This is not correct. That is what is causing layout errors. I even left the p unclosed and changed the div to a span and it worked just fine. Alternately you could also close the p tag.
Older versions of browsers didn't care so much if you were missing things like </p>; they'd try to fix it up. It's a bad practice that's starting to be stomped out, hence why it's not working in newer browsers/HTML versions.
While I appreciate the sarcasm in John's answer, to be clear, this is not actually a bug in the brower.
What is happening is the brower is written trying to conform to the standards. The standards define expected behavior when given valid HTML. When given broken HTML the standard is silent, and so if IE9 is trying to correct for the missing tag, it is assuming it belongs elsewhere, and IE9 displays it incorrectly.
You can force IE9 to try to correct for bad html by hitting F12 and changing the compatibility settings.
As you cannot expect your end user to go along with this, a better solution is to validate the HTML you are generating.
I periodically run into this bug. If you close your P's, or just delete them if possible, the FORM will behave normally. It can be hard to track down this problem because it can manifest itself in so many different ways. Most recently for me, there were no visual rendering cue, but I was getting nonsense javascript errors in IE9 only.
I'm usually able to just delete the P tag right before my form to fix the problem.
Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.
One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
<tr>
<td>
<a href="{$url}">
<font color="red">This is a test</font>
</a>
</td>
</tr>
</table>
{/strip}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>
You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)
White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.
Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
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>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>
I am trying to make a textarea content editable and I am failing. I am using this code:
<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>
I am expecting a result like http://html5demos.com/contenteditable
Does anyone have an idea why it's not working?
Edit:
I am doing this because I am trying to do a oneliner to add a control to a form in which (HTML) formatted content can be pasted and retain its formatting. I am trying to do this without fuss and without javascript code. It appears this is not possible. I will close this question in a day if no further input to the contrary is added.
Have you set the right doctype at the top of your page? For HTML5 you need the following doctype:
<!DOCTYPE html>
Also, why a textarea? textareas are already editable.
They are not using a textarea, textareas are already editable. This is what they are using
<section contenteditable="true" id="editable">
<h2>Go ahead, edit away!</h2>
<p>Here's a typical paragraph element</p>
<ol>
<li>and now a list</li>
<li>with only</li>
<li>three items</li>
</ol>
</section>
I don't mean to repeat anything, but I've put together a demo that shows what is happening.
http://gist.github.com/210327
Just run that, edit what you wish and click the 'Output Formatted Content' statement to receive an alert message with an output of the actual html-formatted content in the contenteditable element. As for adding formatting, etc, you'll need to make buttons that call a text-modifying function on whatever is highlighted. Yeah, that part will be fun.
Nonetheless, I hope this helps.
Given your comment responses, I would recommend any of the excellent WYSIWYG editors out there. No need to re-invent the wheel, and I don't think contenteditable wouldn't have met your needs anyway.
My personal favorite is CKEditor, but there are many, many others. TinyMCE is also very popular.