Strange HTML and CSS behavior - html

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.

Related

How to remove Weird VS Code Suggestions as HTML Tags?

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.

DIVI text not showing on page because of Contact Form 7

I’ve been using cf7 for a while now and I must say, good job!
At the moment the problem I’m experiencing is that any text I insert using Divi builder just vanishes and although the I-beam cursor still shows when going over the text I cant seem to find out the reason why the text doesn’t show (the text is located in the middle of the screen on the background image).
I’ve inspected suspected elements and found no luck within the css of both cf7 and divi.
I’ve removed and inserted the shortcode and the problem definitely resides within cf7
Any idea what the cause of this could be?
More information would be helpful. There might be a conflict between CF7 and Divi but that's not likely the case. Elegant Themes recognizes that CF7 is a super popular plugin and even wrote a blog post about how to style it.
Are you using a child theme? Did you make any customizations to your CSS, functions file, etc? Without being able to see the code it's much tougher to troubleshoot, even a screenshot would be better.

Live Server Renders Page Different Than Local Server

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

Can't make line-spacing in DIV like as in TEXTAREA?

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

HTML form elements not properly aligned

After spending hours and hours I turned out to have this form and I just feel hopeless now...I can't figure out what to do or why the spaces are so messed-up and just lost...
http://jsfiddle.net/C7u9P/2/
I posted picture of what I am trying to make it look like and how it currently looks.... T_T
Any help on what to do or whats wrong is appreciated.
The Awesome Form:
My form:
If you want to recreate something it is better to start completely over at times. The generated code from java was certainly too complex to try and convert.
So heres a setup you could start out with:
http://jsfiddle.net/MwnSn/11/
I'll let you do the details yourself, the icons shouldn't be too hard and styling the inputs is possible too ofcourse. Be aware that I made use of the style normalization done by jsfiddle, I recommend using that stylesheet in your own work too. Only really tested in Chrome so you might want to check and debug IE, and it will probably break down when limited in width. Using the proper clearfix would also improve it a little. (overflow:auto to clear floats in that div.)
No tables.