Submit button sizing bug

I’ve got a “lost property website” which shows items from a database. The form for the website is formatted correctly, but when it is clicked on the button becomes extremely large.

body {
  /* apply styling to everything in body */
  margin: 0;
  /* use all of the page */
  font-family: Helvetica, Arial, sans-serif;
  /* set primary font to Helvetica, secondary to Arial, and if none are availible use a san-serif font */
  background-color: #fff;
  /* set background colour to white */
  font-size: 18px;
  /* set default font size is 18px */
}

.navigation {
  /* navigation bar styling */
  position: fixed;
  /* attach bar to static position */
  top: 0;
  /* spread to full */
  left: 0;
  right: 0;
  background-color: orange;
  /* make navigation bar div orange */
  z-index: 1/* place on top of all content */
}

.navigation a {
  float: left;
  /* move links to left */
  color: #fff;
  /* text colour white */
  text-align: center;
  /* align links centre of their boxes */
  padding: 14px 16px;
  /* add padding to boxes */
  text-decoration: underline;
  /* add underline to links for platform conventions */
  position: relative;
  /* move links one after the other */
}

.navigation a:hover {
  /* when link is hovered over, make background lighter */
  background-color: #ffc864;
}

.right a {
  /* ability move links to the right side of navaigation bar div */
  float: right;
}

.header {
  /* title and image */
  position: relative;
  top: 5%;
  /* add borders */
  left: 5%;
  right: 15%;
  width: 70%;
  /* define size */
  padding-top: 50px;
}

.header img {
  max-width: 225px;
  /* max size of image */
  float: left;
}

.header h1 {
  padding-left: 30px;
  padding-bottom: 30px;
}

.gallery {
  /* image gallery div styling */
  left: 5%;
  width: 90%;
  position: relative;
}

input {
  /* input field styling */
  border-radius: 5px;
  border: none;
  width: 100%;
  font-size: 18px;
  margin-bottom: 15px;
  height: 30px;
}

.submit {
  /* button styling */
  padding-left: 0;
  font-size: 18px;
  height: 30px;
  text-align: center;
  position: relative;
}

.form {
  /* form div styling */
  position: relative;
  width: 75%;
  height: 100%;
  left: 12.5%;
  background-color: #d3d3d3;
  padding: 25px;
  margin-bottom: 50px;
}

* {
  box-sizing: border-box;
}

input[type=text] {
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  padding-left: 12px;
}

input[type=file] {
  border: none;
  border-radius: 4px;
  height: 100%;
}

input[type=submit] {
  background-color: orange;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 100%;
}

input[type=submit]:hover {
  background-color: #ffa07a;
}


/* code to make gallery images scale well for all screens */

@media screen and (max-width:600px) {
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

div.image {
  margin: 10px;
  display: inline-block;
  vertical-align: middle;
}

div.image img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}

@media screen and (min-width:1224px) {
  div.image {
    width: 300px;
  }
}

@media screen and (min-width:1044px) and (max-width:1224px) {
  div.image {
    width: 250px;
  }
}

@media screen and (min-width:845px) and (max-width:1044px) {
  div.image {
    width: 200px;
  }
}

.image a {
  /* make image links follow platform conventions */
  color: inherit;
  text-decoration: underline;
}


/* full screen images */

.lightbox {
  /** Default lightbox to hidden */
  display: none;
  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

a {
  color: white;
  text-decoration: none;
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 5vh;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;
  /** Unhide lightbox **/
  display: block;
}

JavaScript
​x
 
body {  /* apply styling to everything in body */  margin: 0;  /* use all of the page */  font-family: Helvetica, Arial, sans-serif;  /* set primary font to Helvetica, secondary to Arial, and if none are availible use a san-serif font */  background-color: #fff;  /* set background colour to white */  font-size: 18px;  /* set default font size is 18px */}​.navigation {  /* navigation bar styling */  position: fixed;  /* attach bar to static position */  top: 0;  /* spread to full */  left: 0;  right: 0;  background-color: orange;  /* make navigation bar div orange */  z-index: 1/* place on top of all content */}​.navigation a {  float: left;  /* move links to left */  color: #fff;  /* text colour white */  text-align: center;  /* align links centre of their boxes */  padding: 14px 16px;  /* add padding to boxes */  text-decoration: underline;  /* add underline to links for platform conventions */  position: relative;  /* move links one after the other */}​.navigation a:hover {  /* when link is hovered over, make background lighter */  background-color: #ffc864;}​.right a {  /* ability move links to the right side of navaigation bar div */  float: right;}​.header {  /* title and image */  position: relative;  top: 5%;  /* add borders */  left: 5%;  right: 15%;  width: 70%;  /* define size */  padding-top: 50px;}​.header img {  max-width: 225px;  /* max size of image */  float: left;}​.header h1 {  padding-left: 30px;  padding-bottom: 30px;}​.gallery {  /* image gallery div styling */  left: 5%;  width: 90%;  position: relative;}​input {  /* input field styling */  border-radius: 5px;  border: none;  width: 100%;  font-size: 18px;  margin-bottom: 15px;  height: 30px;}​.submit {  /* button styling */  padding-left: 0;  font-size: 18px;  height: 30px;  text-align: center;  position: relative;}​.form {  /* form div styling */  position: relative;  width: 75%;  height: 100%;  left: 12.5%;  background-color: #d3d3d3;  padding: 25px;  margin-bottom: 50px;}​* {  box-sizing: border-box;}​input[type=text] {  border: 1px solid #ccc;  border-radius: 4px;  resize: vertical;  padding-left: 12px;}​input[type=file] {  border: none;  border-radius: 4px;  height: 100%;}​input[type=submit] {  background-color: orange;  color: #fff;  padding: 12px;  border: none;  border-radius: 4px;  cursor: pointer;  height: 100%;}​input[type=submit]:hover {  background-color: #ffa07a;}​​/* code to make gallery images scale well for all screens */​@media screen and (max-width:600px) {  input[type=submit] {    width: 100%;    margin-top: 0;  }}​div.image {  margin: 10px;  display: inline-block;  vertical-align: middle;}​div.image img {  width: 100%;  height: auto;  border: 1px solid #ccc;}​@media screen and (min-width:1224px) {  div.image {    width: 300px;  }}​@media screen and (min-width:1044px) and (max-width:1224px) {  div.image {    width: 250px;  }}​@media screen and (min-width:845px) and (max-width:1044px) {  div.image {    width: 200px;  }}​.image a {  /* make image links follow platform conventions */  color: inherit;  text-decoration: underline;}​​/* full screen images */​.lightbox {  /** Default lightbox to hidden */  display: none;  /** Position and style */  position: fixed;  z-index: 999;  width: 100%;  height: 100%;  text-align: center;  top: 0;  left: 0;  background: rgba(0, 0, 0, 0.8);}​a {  color: white;  text-decoration: none;}​.lightbox img {  /** Pad the lightbox image */  max-width: 90%;  max-height: 80%;  margin-top: 5vh;}​.lightbox:target {  /** Remove default browser outline */  outline: none;  /** Unhide lightbox **/  display: block;}

<!-- Declaration tags for the browser to know what to read, and what language -->
<!DOCTYPE html>
<html lang="en">

<!-- Back end code -->

<head>
  <title>Lost Property</title>
  <!-- title for website -->
  <link rel="stylesheet" type="text/css" href="assets/main.css">
  <!-- link to css -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- define size -->
  <?php
    session_start();
    include("config.php"); // include configuration to connect to database

    $dbconnect = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);  // connect to database

    // if can't connect display error
    if (mysqli_connect_errno()) {
        echo "Connection failed:" . mysqli_connect_error();
        exit;
    }

    // define variables from database to use later in PHP code
    $showall_sql = "SELECT * FROM `images` ORDER BY `images`.`ID` ASC";
    $showall_query = mysqli_query($dbconnect, $showall_sql);
    $showall_rs = mysqli_fetch_assoc($showall_query);
    $count = mysqli_num_rows($showall_query);
    ?>
</head>

<!-- main page content -->

<body>
  <!-- navigation bar -->
  <div class="navigation">
    <!-- links -->
    <a href="index.php">Home</a>
    <a href="search.php">Search</a>
    <a href="upload.php">Upload</a>
    <div class="right"><a href="about.php">About</a></div>
    <!-- has float:right property for to move to side -->
  </div>

  <!-- header -->
  <div class="header">
    <img src="assets/logo.jpg" alt="Logo">
    <!-- image of logo, alt tags for screen readers -->
    <h1>Lost Property</h1>
  </div>


  <?php

    $sql = "SELECT * FROM lost_property";
    if (!empty($_POST)) {
        $name = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['name']));
        $item = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['item']));
        $sql = "SELECT * FROM lost_property WHERE name LIKE '%$name%' AND item LIKE '%$item%' ORDER BY name ASC";
    }
    $result = $dbconnect->query($sql);
    ?>

    <body>
      <div class="form">
        <label>Search</label>
        <form action="" method="POST">
          <input type="text" placeholder="Type the name here" name="name">&nbsp;
          <select name="item" class="dropdown">
            <option value="" disabled selected>item:</option>
            <?php
                    $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
                    $item_query = mysqli_query($dbconnect, $item_sql);
                    $item_rs = mysqli_fetch_assoc($item_query);

                    do {

                    ?>

              <option value="<?php echo $item_rs['item']; ?>">
                <?php echo $item_rs['item']; ?>
              </option>

              <?php

                    } while ($item_rs = mysqli_fetch_assoc($item_query));

                    ?>
          </select>&nbsp;
          <input type="submit" value="Search" name="btn">
      </div>
      </form>
      <div class="gallery">
        <h2>Found property:</h2>
        <?php
            //check for results. If there are none display error
            if ($count < 1) {
            ?>

          <div class="error">
            <h1>No results were found.</h1>
          </div>

          <?php

            } //end if

            else {

                while ($search_rs = $result->fetch_assoc()) {


                ?>

            <!-- display image and information from database and show in gallery  -->
            <div class="image">
              <h3>
                <?php echo $search_rs['name']; ?>
              </h3>
              <h3>
                <?php echo $search_rs['item']; ?>
              </h3>
              <p>
                <?php echo $search_rs['location']; ?>
              </p>
            </div>

            <?php
                } // end of do

            } //end else

            //if there are any display

            ?>
      </div>
    </body>

</html>

JavaScript
 
<!-- Declaration tags for the browser to know what to read, and what language --><!DOCTYPE html><html lang="en">​<!-- Back end code -->​<head>  <title>Lost Property</title>  <!-- title for website -->  <link rel="stylesheet" type="text/css" href="assets/main.css">  <!-- link to css -->  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- define size -->  <?php    session_start();    include("config.php"); // include configuration to connect to database​    $dbconnect = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);  // connect to database​    // if can't connect display error    if (mysqli_connect_errno()) {        echo "Connection failed:" . mysqli_connect_error();        exit;    }​    // define variables from database to use later in PHP code    $showall_sql = "SELECT * FROM `images` ORDER BY `images`.`ID` ASC";    $showall_query = mysqli_query($dbconnect, $showall_sql);    $showall_rs = mysqli_fetch_assoc($showall_query);    $count = mysqli_num_rows($showall_query);    ?></head>​<!-- main page content -->​<body>  <!-- navigation bar -->  <div class="navigation">    <!-- links -->    <a href="index.php">Home</a>    <a href="search.php">Search</a>    <a href="upload.php">Upload</a>    <div class="right"><a href="about.php">About</a></div>    <!-- has float:right property for to move to side -->  </div>​  <!-- header -->  <div class="header">    <img src="assets/logo.jpg" alt="Logo">    <!-- image of logo, alt tags for screen readers -->    <h1>Lost Property</h1>  </div>​​  <?php​    $sql = "SELECT * FROM lost_property";    if (!empty($_POST)) {        $name = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['name']));        $item = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['item']));        $sql = "SELECT * FROM lost_property WHERE name LIKE '%$name%' AND item LIKE '%$item%' ORDER BY name ASC";    }    $result = $dbconnect->query($sql);    ?>​    <body>      <div class="form">        <label>Search</label>        <form action="" method="POST">          <input type="text" placeholder="Type the name here" name="name">&nbsp;          <select name="item" class="dropdown">            <option value="" disabled selected>item:</option>            <?php                    $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";                    $item_query = mysqli_query($dbconnect, $item_sql);                    $item_rs = mysqli_fetch_assoc($item_query);​                    do {​                    ?>​              <option value="<?php echo $item_rs['item']; ?>">                <?php echo $item_rs['item']; ?>              </option>​              <?php​                    } while ($item_rs = mysqli_fetch_assoc($item_query));​                    ?>          </select>&nbsp;          <input type="submit" value="Search" name="btn">      </div>      </form>      <div class="gallery">        <h2>Found property:</h2>        <?php            //check for results. If there are none display error            if ($count < 1) {            ?>​          <div class="error">            <h1>No results were found.</h1>          </div>​          <?php​            } //end if​            else {​                while ($search_rs = $result->fetch_assoc()) {​​                ?>​            <!-- display image and information from database and show in gallery  -->            <div class="image">              <h3>                <?php echo $search_rs['name']; ?>              </h3>              <h3>                <?php echo $search_rs['item']; ?>              </h3>              <p>                <?php echo $search_rs['location']; ?>              </p>            </div>​            <?php                } // end of do​            } //end else​            //if there are any display​            ?>      </div>    </body>​</html>

Obviously it’s a bit hard to tell without the attached database, but why does the search button become really big?

Is it the PHP that is changing the size, or is it adjusting to fit something in?

Answer

You should use an Editor that shows you opened and closed tags. In your code are several mistakes that should result in several problems, this part here especially:

 <body> <--- You open a second Body tag here! Only use one
  <div class="form"> <--- start of your div
    <label>Search</label>
    <form action="" method="POST"> <--- start of your form INSIDE the div
      <input type="text" placeholder="Type the name here" name="name">&nbsp;
      <select name="item" class="dropdown">
        <option value="" disabled selected>item:</option>
        <?php
                $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
                $item_query = mysqli_query($dbconnect, $item_sql);
                $item_rs = mysqli_fetch_assoc($item_query);

                do {

                ?>

          <option value="<?php echo $item_rs['item']; ?>">
            <?php echo $item_rs['item']; ?>
          </option>

          <?php

                } while ($item_rs = mysqli_fetch_assoc($item_query));

                ?>
      </select>&nbsp;
      <input type="submit" value="Search" name="btn">
  </div> <-- div closes before the form which is INSIDE the div
  </form> <-- form closes after div, wrong way around!

JavaScript
 
 <body> <--- You open a second Body tag here! Only use one  <div class="form"> <--- start of your div    <label>Search</label>    <form action="" method="POST"> <--- start of your form INSIDE the div      <input type="text" placeholder="Type the name here" name="name">&nbsp;      <select name="item" class="dropdown">        <option value="" disabled selected>item:</option>        <?php                $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";                $item_query = mysqli_query($dbconnect, $item_sql);                $item_rs = mysqli_fetch_assoc($item_query);​                do {​                ?>​          <option value="<?php echo $item_rs['item']; ?>">            <?php echo $item_rs['item']; ?>          </option>​          <?php​                } while ($item_rs = mysqli_fetch_assoc($item_query));​                ?>      </select>&nbsp;      <input type="submit" value="Search" name="btn">  </div> <-- div closes before the form which is INSIDE the div  </form> <-- form closes after div, wrong way around!​

So i highly recommend to practice a bit how to make code cleaner, so that you notice mistakes like this.

example:

<div class="main-container">
   <div class="form-container">
      <form>
        <input type="text" placeholder="Testinput">
        <input type="submit" value="search" id="submitbutton">
      </form>
   </div>
</div>

JavaScript
 
<div class="main-container">   <div class="form-container">      <form>        <input type="text" placeholder="Testinput">        <input type="submit" value="search" id="submitbutton">      </form>   </div></div>​

Basically: Avoid unecessary white-space, align opening and closing tags on the same level. With that information you should be able to rearrange your code and fix the Button-Bug yourself.

Advertisement

Answer