JS and CSS Chrome and Firefox issues

Im having Chrome and Firefox issues when it comes to displaying my page correctly???

https://tuscannycodes.github.io/log-in-page/

Why does this happen, and how can I fix it? Ive read that there can be compatibility issues between browsers but I didn’t think that it would be this bad :sweat_smile: my login app worst even work in chrome and Firefox but works perfectly in Safari. What gives :triumph: I took special care designing it to be responsive and using simple clean code so that it would work on all size devices. But I didn’t expect different browsers to be a problem.

I would try writing media quieries but the screen size does not change and the screen size is not the issue. its the browser… How do I fix this?

My javascript wont run in Chrome and my main header collapses onto my inputs. To me, this is bizarre.

Please help.

Please remember that no one but you knows what “correct” is unless you tell them. I mean, I can see that the h1 “Sign Up Today” text is covering the input elements, but I don’t know what the design is supposed to look like. So please provide an image or explanation of what you expect to be seeing.


It looks like you have an onclick handler on the button that calls signUoToday(), looking in your script file there is no function called signUoToday. I guess this takes precedence over the event listener defined in your script.

1 Like

Thanks @colinthornton . This is what the layout should look like, along with the working JavaScript. I added an onclick to the html in hopes that that would help the javascript work… but it looks like I have a typo, lol ive fixed it. not sure if that will help though I was kinda going out on a limb by adding that. the original javascript code is running from my script tag and not an onclick.

So, the #container element is the big white box. In your design, the “Sign Up Today” text is inside the white box. But in your HTML, the corresponding h1 element is outside the #container element. I think you should move it inside in order to work towards the design you expect.

Hmm thats strange… :thinking: Im seeing that it IS inside the container.

the design that I showed is the same code by the way. its just working a different way in the Safari web browser.

No, it’s inside #bigContainer, but a sibling to #container.

Right now it’s this.

<h1 id="signUpHeader">Sign Up Today!</h1>
// ...
<div id="container">

I’m saying, it should likely be this.

<div id="container">
  <h1 id="signUpHeader">Sign Up Today!</h1>
1 Like

OHH I see :+1:. hmm let me try that out and see if it works.

What I don’t understand is why would it work inside Safari and not in Chrome?

Ha! Don’t we all.
What I mean is, get used to it!
Browser compatibility is probably highest on the list of the worst parts of web development.

1 Like

Ok. im really glad im not the only one. I was 1000% perplexed. :sweat_smile:

caniuse.com is your friend.

The “Browser compatibility” section on MDN articles is your friend.

1 Like

*AM I am 1000% perplexed :roll_eyes:

changed the h1 location but its still not displaying properly.

Sorry, I left all the CSS work for you to figure out! Hint, you probably don’t want to position the heading absolutely, since you want it to affect the layout of the input elements. Right now with position: absolute; it’s sort of floating there in space, so the inputs are free to move in underneath.

1 Like

Ah I see… That makes sense.

I think you set me in the right direction as far as the layout goes :+1:
Thanks.

Good stuff.

Yeah, I reloaded your page and then removed the position and margin styles from the h1 and hr, and added flex-direction: column; to the #container element. Is this more of what you were going for?

1 Like

Yep thats it. I just made the adjustments. Im committing it now to see if the changes I made work.

Excellent! :laughing:

it worked. man what a pain in the you-know-what. Ive never experienced that before. How tedious. :sweat_smile:

I still gotta get the JS working.

Check out the position of #errorContainer. It’s also positioned absolutely and completely covers the button. Hence, you can’t click the button.

1 Like

No.Way :open_mouth:

If thats what’s the problem im gonna flip.

Well the error container has to be absolute because thats a floating error message box that pops in when there’s an error in the input fields :face_with_monocle:

I could probably MOVE it down though.

or add a zindex to the button or something.

Or set its display value to none when it’s not needed.

The JavaScript is working fine, by the way. You can type mainButton.click() into your console and it’ll run the function.

1 Like