tbayasen / project-1

0 stars 3 forks source link

Zero Width Space, &#8203 #22

Open bksaechao opened 4 years ago

bksaechao commented 4 years ago

So I tried to fix that space between the top and the navbar. It's usually an easy fix where you would just use margin: 0 auto; and/or padding: 0 auto; but nothing I tried would work. Upon further research here's what I found:

ZWS

Notice on the console I highlighted the "&#8203", and on the left it refers to the #text (which is the space between the top and navbar).

I googled those numbers and I found that they refer to an invisible Zero Width Space(Essentially it's a hidden line break) which can't be seen on standard html editors.

There's actually a lot more of these hidden line breaks littered throughout the whole html page and not just above the navbar so I couldn't figure out which piece of code is adding in these line breaks

They're purposefully placed in by other developers to prevent people from just copying and pasting their work which I assume is what we did lol. I tried to look up the solution, but it involves adding new lines of code in the javascript file which seemed pretty complicated.

Possible Solutions -find the proper code to remove all the line breaks. -rewriting the code on our own should eliminate the breaks.

TL;DR There's annoying invisible lines placed throughout the web page by other developers to prevent copy pasting & it's not as simple to fix as you guys may think!!!!

tbayasen commented 4 years ago

What you're gonna wanna do is go into the navbar css and position: absolute; top: 0;

position absolute pulls it into it's own plane and you use left, right, top, bottom in order to set the margin based on the one you use. So if you use top: 0, it'll push it to the top