Ok this feels really basic...but its giving me a run for my money. I have put together a page with really basic tags. break tags, input tags, etc. I came across a problem when I used a "checked" on one of the radio buttons in my form. It wasn't "checking" properly. So I looked at the page source and noticed a lot of the forward slashes were in red. The "checked" was also in red. Comparing that to a normal page, I found that that is not the case there. Does anyone know whats going on? It seems to keep the page from functioning properly, and a google search on this turned nothing out...
You have bad markup. Validate your page to help isolate.
Related
Whenever I code, in almost all types of file extensions i.e js, jsx,html,ts. I get these weird inline suggestions to make it as HTML tag. I truly tried everything out, checked out extensions, JSON settings, unchecked all the suggestions/autocomplete settings. But, this never goes. I don't know what to do, I am truly fed up of this.
And it always suggest whenever I put : in front of anything. Like below.
Wierd Html tags suggestion
It's so annoying. VSCode experts please help.
I have been trying to remove this from long time, I also checked the vscode IntelliSense documentation, and did all the troubleshooting but it still didn't help.
I've found that we can use DIV as a TEXTAREA by setting contenteditable='true' and overflow='auto' (or 'scroll') (I don't care about the appearance, just the functionality), but I really can't find the solution with Google search to make it really like a TEXTAREA, the problem is related to line-spacing, when pressing enter key, the next line is too distant from the one before in DIV. When designing with DreamWeaver, if I try editing the DIV's content and pressing enter key and switch to the code window, I can see there are P tags automatically inserted. That's why the lines in DIV are too distant from each other and it can't look fine like in a TEXTAREA. I want to say that it is so ugly and awkward.
Could you please let me know how to suppress that nasty automatic insertion of P tag into DIV's content whenever pressing Enter key? Or could you give me any other solution to make the lines in DIV normal as in TEXTAREA?
Thank you very much!
Your help would be highly appreciated! (I'm just a newbie in Web programming, so please be patient!!! Thankssss!! :))
UPDATE!!!
You may all misunderstood me, when I say I press the Enter key, it is not in code editor like DreamWeaver, It is when I load the page in the browser and try typing as a normal user. That's when I test the page.
Something like this?
#myDiv p{
margin: 0px;
}
I'm not 100% sure that the margin is what is causing the line height issues, you may want to try changing height, padding, etc. until you figure it out.
I tried making a fiddle and I'm not having the same problem, line spacing looks normal to me: http://jsfiddle.net/dFzjT/
Upon closer inspection, Chrome is adding extra divs upon each newline.
Switch to edit in the code view instead of the WYSIWYG HTML editor. Then you will want to type in between the opening and closing div tags:
<div>your text here.</div>
I've found that the strange problem (which might make some of you think I'm noob?, vote down me?) was not the fault of mine, it was the fault of the browser I was using, it was Opera browser. I didn't think it renders the DIV's content that way.
After try using a different browser like Google Chrome, FireFox and it is normal now, like a TEXTAREA as I want.
Thanks!
Here's the thing.
A lot of the answers on here answer the question, but they all miss an important point.
We were all new to this at some point.
So let me give you some advice that I wish I got when I started down this road.
Learn to read the code, and your life will be easier.
It might seem daunting now, but trust in your own ability to learn, and just struggle for a few days. You'll come out on the other end with a headache and a smile.
Write the code, save, and refresh the page in your browser.
This way, you look at it in a browser.
You should also get yourself all the important browsers: Chrome, Firefox, Internet Explorer, Opera & Safari.
Learn to use a localhost server like MAMP / XAMPP / Visual Studio.
This way you can write server-side code; that way you can test, check and tweak - all without having to upload anything.
Most of all, though..
Stay away from the WYSIWYG.
They're all just bad news.
Just write your own code.
:{D
I'm kind of new to using HTML/CSS for real, so this maybe a stupid question.
My problem is a persistent whitespace on top of the page. At first I thought it was something about margin or padding, as suggested by Google and StackOverflow, but as far as I can tell it was nothing of that. I narrowed it down to a piece of text that is being added right after the opening body tag.
Here's what I mean:
If my code on the file is (simplified, but this is enough to cause the effect):
<html><body><p>text</p></body></html>
When I open it in Chrome and use the developer tools to see the elements, it's like this:
<html><body>""<p>text</p></body></html>
If I delete the "" it renders flawlessly. Right now I have a couple of lines of Javascript to remove the "" from every page, but that's obviously not ideal.
Also worth of note is that if put no tags in the body, like this:
<html><body>text</body></html>
Then no "" is inserted.
Besides Chrome, I've tested on Firefox and IE9, same thing happens. What am I missing here?
Thank you.
Thanks. Your comments were great. I had no script, just bare HTML, but as Jon pointed out, it's dynamically generated. Once I realized what was involved (I admit I should have realized it sooner ...) it was easy to find the answer:
Django template inheritance breaks site layout
It's solved. Thanks again.
Why is my site in progress on the "HTML5 Boilerplate" system resulting in non-interactive pages?
Example: http://www.maxilham.com/buttons
I am no expert at coding, but I have made several websites and have an increasingly better knowledge of html, css, js and so on. I do not have real training or a technical background, so I always like to try systems and templates that are probably more semantically correct and up to date than anything I would write out of thin air.
Thus I downloaded the http://html5boilerplate.com/ template and then went about coding as I normally do. Everything looked perfect (at least as I expected it to, not finished designing), but when I replicated index.html to start testing links and building the other pages, I realized no links on the page were clickable, and that in general the whole thing was acting more like a screen-cap or .pdf then the website I thought I had made.
When I stripped everything out of the BP .css file (except for what I had added), I broke the structure/styling, but all the links became active, hovering states showed, etc..
I cannot pinpoint what it is about the starter index.html/style.css combo or what I am doing wrong to them, that is breaking the site.
Does anyone know of an obvious mistake/coding conflict that would freeze/lock my pages?
Thanks in advance for any help and sorry if this is too specific/generic/not in right place.
AB
Check for a negative z-index. If you have a z-index that is lower than 0, it will place it 'behind' the body tag, aka make it completely non-interactive. Only reason I guess that is because I am unable to inspect anything and I've seen this before.
Alternatively, make sure you don't have some sort of page-wide element with a z-index that is higher than everything else, however Inspecting any element on the page only selects the body tag, leading me to believe that is the culprit.
I doubt the problem is in any way directly related to the HTML5BP.
An interesting issue which I've googled and can find absolutely no reference too, perhaps because I'm too vague on the cause myself.
I have a simple jsp page that is run from a struts 2 action. It' fairly javascript heavy, but its an internal app on my company's intranet so thats not a great problem.
All seems normal so far, right? but interestingly, the last few tags on this page fail to render. This is true for all browsers I've tried it in (IE, FF, Chrome).
What I mean by not rendering is that they simply don't exist when you view the source! whats worse, in IE, half a tag declaration is actually printed as text at the bottom of the page. All very odd.
But what makes it even stranger, if I put a few <br /> tags after the </html> tag, then all browsers render down past the </html> tag, but still cut off the last few <br />'s.
Has anyone ever heard of anything like this? I don't even know where to start troubleshooting! I know my description is vague but that's only because I'm a bit vague on it myself.
If 'View Source' does not show you the tags then it is not a rendering problem, but a server or network problem, as the content is not being delivered to the browser.
It sounds like a buffer flush problem to me. Have you got any filters that might be buffering the html before it gets to the browser?
Sounds like you have an unclosed quotation mark somewhere. Or something like that. Stuff like that can mess up even the source view as some browsers don't show the exact bytestream they received in the socket in source view (I know for a fact that IE used to do this). Try doing a GET with wget or a telnet client or something similar and see what happens.
We should see the code of your jsp to answer. I suspect there is an unclosed tag or a an unclosed quotation mark of an attribute - as DrJokepu said - in the jsp.
That is the first time I have heard that IE is behaving the same way as the other browsers; by accident...
But seriously, is the html error-free?
I recommend using the html validator extension for Firefox to show you if the html is producing any errors or warnings.
There has to be an error somewhere, but without the code it is impossible to say what it is.
I had a problem some time back with a web-site that was getting 'cut-off' and similarly, I solved the problem with a quick hack but never a proper solution. What it came down to for me was that the web server seemed to require the content-length of the page for it to render properly. When I buffered the output and added the content length, the page would load in full. Different technology though - this was an application built on Perl CGI running on Apache 2.2.
Thanks for the assistance all, but unfortunately none of these seemed to help. I've found a hacky way around it and since its not a critical app, It'll just have to do.
thanks again