CODEWITHSUNDEEP
htmlcss
gython
gython

Reputation: 875

Div Style from css file not recognized

I have the following html, where I center the div container on the page with style:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="design.css">
    <!-- Load d3.js -->
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <script type="text/javascript" defer src=WorldMap.js></script>
</head>
<body>

<div name="input" class="dateContainer" style="margin: 0 auto; width: 656px; text-align: center;">
    <select id="dropdown"></select>
    From: <input type="date" min= "2018-01-01" max="2018-12-30" value="2018-07-22" id="dateFrom">
    To: <input type="date" min= "01-01-2018" max="30-12-2018" value="22-07-2018" id="dateTo">
    <button id="submit">Load</button>
</div>
</body>
</html>

This works. However If I try to center the div with an external css file nothing happens:

*,*:after,*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-appearance: none;
  box-sizing: border-box;
}

body{
  font-family: arial;
  font-size: 16px;
  margin: 0;
  background: lightblue;
  min-height: 100vh;
}


.dateContainer {
  margin: 0 auto;
  text-align:center;
  width: 656px;
}

Whats the reason for this?

Upvotes: 0

Views: 36

Answers (1)

Ant
Ant

Reputation: 1163

When having issues like this you should start by checking two things:

First whether the css file that is being loaded actually includes your rules, because your browser may have a cached version stored and simply avoids loading it again.

If that is ok, then you should check whether or not your rules are being overwritten by any other rule included, that may be more specific or flagged as!important

The web inspector can help in both cases!

Upvotes: 1

Related Questions