Css not displaying correctly in chrome

Question

I am trying to code a html webpage using css except when i try to visit the site on Google Chrome the page looks like screenshot 1, but if i open it on internet explorer it looks like screenshot 2... They are both suppose to display as screenshot 2 it works if i open it in chrome on my phone and safari on my phone but just chrome on my laptop messes it up..

https://i.stack.imgur.com/NVG4y.jpg

https://i.stack.imgur.com/SFEV9.jpg

Code:

@import url('https://fonts.googleapis.com/css?family=Lekton');

body{
 background-image: url('background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
 background-size: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Lekton', sans-serif;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
 font-family: 'Lekton', sans-serif;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #ecf0f1;
}

input[type=text], input[type=password] {
    width: 180px;
    padding: 12px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
 border: none;
 background: transparent;
    border-bottom: 2px solid black;
 width: 200px;
}

.login-title{
 font-size: 20px; 
}

.contact{
 height: 400px;
 width: 100%;
 background: white;
 position: absolute;
 top: 700px;
 text-align: center;
 font-family: 'Lekton', sans-serif;
}

.loginBox{
 height: 350px;
 width: 280px;
 background: transparent;
 position: relative;
 top: 50px;
 bottom: 0;
 padding: 1rem;
 text-align: center;
    border-radius: 8px;
 margin: auto;
}

.button5 {
    background-color: transparent;
    color: black;
    border: 2px solid black;
 width: 180px;
}

.button5:hover {
    background-color: black;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
 <title>Site</title>
</head>
<body>
 <ul>
  <li><a href="#home"></a></li>
  <li><a href="#">Login</a></li>
 </ul>
 <div class="loginBox">
  <p class="login-title"><strong>LOGIN</strong></p>
  <input type="text" placeholder="Username"></input>
  <br />
  <input type="password" placeholder="Password"></input> 
  <br />
  <a href="#login"><button class="button5">Login</button></a> 
  <br />
  <p> - OR - </p>
  <a href="#register"><button class="button5">Register</button></a> 
  <br />
 </div>
 <div class="contact">
  <h2>Contact</h2>
 </div>
</body>
</html>

Better still, add your HTML & CSS in a snippet (use the `<>` button). — Manngo, May 08 '17 at 05:00

score 0 · Accepted Answer · answered May 08 '17 at 05:27

position: absolute;
    top: 700px;

In "contacts" style and

position: relative;
    top: 50px;
    bottom: 0;

In "loginBox" style makes it to behave in this way. You DON"T NEED BOTH of them.

@import url('https://fonts.googleapis.com/css?family=Lekton');

body{
 background-image: url('background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
 background-size: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Lekton', sans-serif;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
 font-family: 'Lekton', sans-serif;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #ecf0f1;
}

input[type=text], input[type=password] {
    width: 180px;
    padding: 12px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
 border: none;
 background: transparent;
    border-bottom: 2px solid black;
 width: 200px;
}

.login-title{
 font-size: 20px; 
}

.contact{
 height: 400px;
 width: 100%;
 background: white;
 text-align: center;
 font-family: 'Lekton', sans-serif;
    margin:auto;
}

.loginBox{
 height: 350px;
 width: 280px;
 background: transparent;
 padding: 1rem;
 text-align: center;
    border-radius: 8px;
 margin: auto;
}

.button5 {
    background-color: transparent;
    color: black;
    border: 2px solid black;
 width: 180px;
}

.button5:hover {
    background-color: black;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
 <title>Site</title>
</head>
<body>
 <ul>
  <li><a href="#home"></a></li>
  <li><a href="#">Login</a></li>
 </ul>
 <div class="loginBox">
  <p class="login-title"><strong>LOGIN</strong></p>
  <input type="text" placeholder="Username"></input>
  <br />
  <input type="password" placeholder="Password"></input> 
  <br />
  <a href="#login"><button class="button5">Login</button></a> 
  <br />
  <p> - OR - </p>
  <a href="#register"><button class="button5">Register</button></a> 
  <br />
 </div>
 <div class="contact">
  <h2>Contact</h2>
 </div>
</body>
</html>

When i press "Run code snippet" it runs fine and if i display if off my brothers laptop it looks fine but when i open it in my chrome it displays as screenshot 1 — , May 08 '17 at 05:36
Maybe you just disabled the CSS of your browser? http://stackoverflow.com/questions/14046738/how-to-disable-css-in-browser-for-testing-purposes — , May 08 '17 at 05:39

Css not displaying correctly in chrome

1 Answers1