Reputation: 13

CSS search button style being overridden by User Agent Stylesheet

When the code below renders in ANY browser, the user agent stylesheet is overriding the form.example in my CSS for the search button. The button is appearing small and not the same size as the input box as it used to. I have confirmed this using the browser console. It's strange because the same CSS has been working fine for months and I haven't changed anything. It stopped working all of a sudden. Strangely, when I run the same code in https://www.codeply.com/p it seems to render correctly.

Here is code:

body {
  margin: 0;
  height: 100%;
  font-family: Courier New, monospace; color: white;
}

{
  box-sizing: border-box;
  font-family: Courier New, monospace; color: white;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the content */
.content {
  background-color: rgb(48, 10, 36);
  padding: 10px;
  height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
    border: 1px solid #333;

}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

/* Style the footer bar */
.footer {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the footer links */
.footer a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.footer a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the footer

 .footer {
  background-color: #333;
  padding: 10px;
  color: white;
}
*/
/* Style the search box */

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
body {
  font-family: Courier New, monospace;
}
* {
  box-sizing: border-box;
}
form.example
  width: 80%;
  background: #f1f1f1;
}

}
table.example
  width: 100%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 30%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}
form.example button:hover {
  background: #0b7dda;
}
form.example::after {
  content: "";
  clear: both;
  display: table;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Ramster</title>
    <link rel="stylesheet" href="/static/index.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
  </head>

  <body>
    <div class="topnav">
      <a href="home">Home</a>
      <a href="search">Leagues</a>
      <a href="teams">Teams</a>
      <a href="insert">Players</a>
    </div>

    <div class="content">
      <h2>Ramster</h2>
      <p>A place to play</p>
      <form class="example" method="post" action="" style="margin:left;max-width:600px">
        <input type="text" placeholder="Search by team or player" name="name">
        <button type="submit">Search</button>
      </form>
      <p></p>
    </div>
    <div class="content">
      <table class="example">
        <thead>
          <tr>
            <th colspan="1">Name</th>
            <th colspan="1">Position</th>
            <th colspan="1">Team</th>
            <th colspan="1">Buy</th>
          </tr>
        </thead>
        {% for item in data %}
        <tbody>
          <tr>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td>{{item[3]}}</td>
            <td><a href="getPlayer?playerid={{item[0]}}" style="color:#E95420">Buy</a></td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>
    <div class="topnav">
      <a href="showLogin">Login</a>
      <a href="showRegister">Register</a>
      <a href="logout">Logout</a>
    </div>

  </body>

</html>

Upvotes: 0

Answers (2)

Gandi87

Reputation: 106

You missed the { in form.example and got one closing } to much after it. Therefore its missing on input[type=text] {

Should work:

form.example {
  width: 80%;
  background: #f1f1f1;
}

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
 }

JSFiddle

body {
  margin: 0;
  height: 100%;
  font-family: Courier New, monospace; color: white;
}

{
  box-sizing: border-box;
  font-family: Courier New, monospace; color: white;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the content */
.content {
  background-color: rgb(48, 10, 36);
  padding: 10px;
  height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
    border: 1px solid #333;

}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

/* Style the footer bar */
.footer {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the footer links */
.footer a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.footer a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the footer

 .footer {
  background-color: #333;
  padding: 10px;
  color: white;
}
*/
/* Style the search box */

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
 }
  
body {
  font-family: Courier New, monospace;
}

* {
  box-sizing: border-box;
}

form.example {
  width: 80%;
  background: #f1f1f1;
}


table.example {
  width: 100%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 30%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}
form.example::after {
  content: "";
  clear: both;
  display: table;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Ramster</title>
    <link rel="stylesheet" href="/static/index.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>

<body>
    <div class="topnav">
        <a href="home">Home</a>
        <a href="search">Leagues</a>
        <a href="teams">Teams</a>
        <a href="insert">Players</a>
    </div>

    <div class="content">
        <h2>Ramster</h2>
        <p>A place to play</p>
        <form class="example" method="post" action="" style="display:inline;">
            <input type="text" placeholder="Search by team or player" name="name">
                    <button type="submit">Search</button>
                </form>
                <p></p>
    </div>
    <div class="content">
            <table class="example">
                    <thead>
                        <tr>
                            <th colspan="1">Name</th>
                            <th colspan="1">Position</th>
                            <th colspan="1">Team</th>
                            <th colspan="1">Buy</th>
                        </tr>
                    </thead>
                    {% for item in data %}
                    <tbody>
                        <tr>
                            <td>{{item[1]}}</td>
                            <td>{{item[2]}}</td>
                            <td>{{item[3]}}</td>
                            <td><a href="getPlayer?playerid={{item[0]}}" style="color:#E95420">Buy</a></td>
                    {% endfor %}
                        </tr>
                    </tbody>
                </table>
    </div>
    <div class="topnav">
        <a href="showLogin">Login</a>
        <a href="showRegister">Register</a>
        <a href="logout">Logout</a>
    </div>

</body>

</html>

Upvotes: 1

TsgabiXD

Reputation: 151

It seems there an update in the API or something.

I would suggest to set the overwritten styles an !important flag and/or try a browser style-reset:

td    /*!important flag*/
{
    border: 1px solid #333 !important;
}

*, html    /*set every element an initial style (style-reset)*/
{
   margin: 0;
   padding: 0;
}

Upvotes: 0

CSS search button style being overridden by User Agent Stylesheet

Answers (2)

Related Questions