This is a very strange problem I've been struggling with for a few days. At first I thought it was related to something in our application, but I've stripped it down to the simplest html page and it's still happening. Basically anytime I add a tag to a page the html after it gets rendered as it's value. <textarea></textarea> fixes the issue, but I don't understand why. I'm at a loss here, it has to be something really simple that I just don't know.
In the following example the paragraph tags show up as the value of the textarea.
I'm using IE8.
<html>
<head>
<title>About</title>
</head>
<body>
<textarea/>
<p align="center">
test
</p>
<p align="left">
test
</p>
</body>
<textarea> is not a self-closing tag. It should be re-written as <textarea></textarea>
I am assuming you trying to have the paragraphs appear after the textarea. Try not using the textarea tag as an empty tag.
<textarea></textarea>
<p align="center">
test
</p>
<p align="left">
test
</p>
I believe Textarea requires an opening and closing tag - at least that's how it's presented here:
textarea at w3schools
I had this problem too. I realized I had forgotten to give a name attribute to my textarea like I did all my other inputs so that the PHP script could collect it all and send it to an SQL table.
Once I gave it a name, it magically stopped chopping off the closing tag and making it a self closing tag which got ignored by the browser until it bumped into the closing tag of a textarea with a name attribute, swallowing up everything in between. Hopefully this sheds more light on the issue too, as putting text in between the closing tags wasn't an ideal option for me.
Related
How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
<p> </p>
Check this snippet :
<p> </p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>
I have a WordPress shortcode function that for debug proposes i reduce it to only these 2 lines
$detail='<div class="property_design_intext_details"><p style="text-align: right;"><div id="add_favorites" class="isnotfavorite" data-postid="132">add to favorites</div></p></div>';
return $detail;
The problem appears on front end where wordpress is displaying other code. More exactly (taken from view source)
<div class="property_design_intext_details"><p style="text-align: right;"><div id="add_favorites" class="isnotfavorite" data-postid="132">add to favorites</div></div>
The closing </p> tag is missing.
Any idea about why this is happening and how i can prevent it.
Browser fixes your broken HTML.
Do not put <div> inside <p>.
It is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.
I have come over a very strange issue and I really have no clue what's going on. Is this a bug, or am I missing something in my code?
Basically what I have is a page with text and a textarea and it works fine in FireFox, Chrome and on my iPhone. But in IE on Windows Phone 8 the textarea seems to eat up the whole rest of the page. Below you can see what it looks like on the iPhone and how it should look like.
Text, followed by an empty text area, followed by more text. Below you can see what I get on the WP8.
Here the textarea is no longer empty, but instead it seems to contain the closing tag of the element that is wrapping the textarea and all HTML following it. The rest of the page is blank. Everything seems to be inside that text area.
Seriously, what's going on here? I'm using XHTML 5, so if there was a missing or unmatched end tag the whole page would have crashed. I have tried to remove all styling from the textarea element as well, but same issue. Any ideas?
Some of the HTML around the element:
<body>
<article class="day">
<h1>Romersk lov</h1>
<div class="exercise">
<p><span class="action">Les</span> <a class="ref" href="http://www.bibel.no/Nettbibelen?parse=Luk+2%2C1%E2%80%935">Luk 2:1–5</a>. Hva kan vi lære av den måten folket forholdt seg til det politiske miljøet?</p>
<textarea/>
</div>
<p>Siden republikkens første ...
</article>
</body>
Update: Seems to only happen when the textarea is empty on load... *confused*
I'd suggest this might be caused by your use a self-closing tag for the <textarea> it isn't a void element, it can, and is intended to, have contents. Instead of self-closing, try using the more appropriate:
<textarea></textarea>
This is, however, purely a guess.
so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/
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.