DEV Community

Chantae P.
Chantae P.

Posted on

My web page looks different in Google Chrome and Safari

Here I have two images of the same Web page but in different browsers. Why is it that my web page is laid out correctly in Google Chrome, but when using Safari the error icon is in a different position? How can I fix my code so that my web page looks the same in all browsers? Here is my repository

  • Google Chrome
    Google Chrome

  • Safari
    Safari

Top comments (6)

Collapse
 
sakethkowtha profile image
sakethk

Use this css package. It will make css consistent across cross browsers.
npmjs.com/package/normalize.css?ac...

Collapse
 
taepal467 profile image
Chantae P.

Thank you.

Collapse
 
sjellen profile image
SJellen

For the error icon you could use css background-image or background on the input. That will keep it positioned in the input.

Collapse
 
taepal467 profile image
Chantae P.

Thank you! I'll make sure to try that next time.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Looks different between Firefox and Chrome too. As an experiment, I tried adding a CSS reset... and then Chrome and Firefox looked pretty much identical - although there is some stuff that needs fixing. Adding the CSS reset also to Safari makes every almost the same as the other two, but the position of the button is off.

I hope this is vaguely useful

Collapse
 
celsiusaraydev profile image
Celsius Emilio Aray

The problem is on css. You need or. Css grid or flex. The #btn style is position absolute the margin is on ‘em temporally change for a relative unit % o vw. Boot need refactor to ccs flex or grid for design responsive