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.
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>
When I open an HTML file in Chrome, the page loads with some random h3 tag from the middle of the document (see last h3 tag in code below) at the top of the window, instead of the actual top of the page. All of the content above that point is loads, but I have to scroll up to get to the top.
Same thing happens when I use Firefox, although it loads with the first h3 tag in my example at the top of the window. Safari loads with the "Here is an example of bold text" paragraph at the top. Any idea why this might be happening?
<h3>Audio</h3>
<audio src="07 Wake Up.mp3" controls>Here is some audio</audio>
<p>
Back to top
</p>
<hr />
<h3 id="B">Bold text</h3>
<p>Here is an example of <b>bold text</b></p>
<h3>Bi-directional override</h3>
<p><bdo dir="rtl">This text will go from right to left.</bdo></p>
<p><bdo dir="rtl">.tfel ot thgir morf og lliw txet sihT</bdo></p>
<h3>Blockquotes</h3>
<p>Blockquotes specify a section that is quoted from another source, like in the passage below:</p>
<blockquote cite="http://www.archives.gov/exhibits/charters/declaration_transcript.html">We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</blockquote>
<h3 id="button">Buttons</h3>
I think I know what's going on now. The issue isn't with the tags that are loading at the top of the page, but with an autofocus button that appears a few lines down:
<h4>Autofocus button</h4>
<button type="button" autofocus>Autofocus button</button>
For anyone playing around with autofocus buttons, it seems like they cause the browser to "autofocus" (duh) on that point upon loading. In my original case, my page loaded with the autofocus button on the bottom of the window, some headings from a few lines up at the top, and the actual top of the page nowhere in sight.
Without being able to see you code, I would guess that you have an anchor tag somewhere that it is trying to navigate to. If you have a hash (#) in your URL, is in 99% likely. Otherwise, check your JS for a random scroll function that is attached to the wrong thing or perhaps running too early.
Without being able to see the code, this would be my best guess.
I have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.
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.
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.