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.
Related
I downloaded some HTML Newsletter template, adjusted it for my needs, and when i send it, it shows the whole CSS code at the top of the email.
This is mostly happening in Outlook, on Gmail i don't see this problem but some other discrepancies (like buttons size etc.)
Please look up the screenshot to see exactly how it looks like exactly when email received please look up the screenshot
In addition, i read somewhere that CSS code should be moved from <head> tags to just after beginning of <body> tag, but the problem still persists
How do i solve this problem?
Thanks
PS: I put the example of the code below, but i had to cut it because it exceeds 30000 characters... so i don't know if it is working now
OK guys i found the solution.
This was downloaded newsletter template which has inline code but for some reason it has some embedded code which was not necessary to be there.
The CSS coed which was showing in email disappeared just after i erased it from the file, and template without this code part was working just perfectly.
So i would say this was some kind of putting unnecessary code from developer in HTML file... the reasons i don't really know, but now it works.
In addition, i downloaded some newsletter files in the past they had the same problem. CSS showing in top was mostly seen on outlook.
I appreciate very much your assistance. I would say this problem is solved.
One of my clients has been encountering this issue when she goes onto the app. I was wondering if anyone had any idea how to get it to show normally? Im not sure if this is a code issue or her computer.
Everything is getting bunched together
Edit: I did not provide the code because it is very lengthy and I feel like there could be another answer that isn't linked to my code since it is only happening to that computer.
There really isn't a lot to go off of this. It could be as simple as changing the width of the input tag which would take almost no time to fix. If you're using bootstrap or some other framework maybe a class name is messed up somewhere in the html. It would be a lot easier to pinpoint what exactly the problem is if there were code to go along with it. Also there could be no problem with the code and could just simply be her machine, but there is still no way to figure that out without looking over it.
I have a problem that has me stumped and I'm hoping someone here can help me solve it. I designed a new site using Sublime and am having problems with one file(page) that looks great on Sublime, but is screwed up when I put it on the live server.
From Sublime it renders perfectly on all web browsers, so I don't think has anything to do with it. I suspect that maybe it has something to do with the Cascading part of CSS. But, I don't know how to determine that.
Anyhow, here's the the code involved: http://portabledogpotty.com/dog-potties.html
The first section is the HTML and the second section is the CSS file. Any help would be very greatly appreciated!
Sam
Seems you have a table only for the header **SAVE EXTRA MONEY WITH OUR VALUE PACKS! **, try to put it as a th in the table for packs.
I see that just using the chrome element inspector.
Grettings
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
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