Search form not styling correctly

Question

When I add the search form code it doesn't seem to be styled like it is in the video. I literally copied and pasted the example code as well, but it still doesn't work. It seems like the style.css file in the workspace hasn't updated? I also tried closing and deleting the workspace and then reopening a new one from this lesson.

<div class="search">
  <form method="get" action="catalog.php">
    <label for="s">Search:</label>
    <input type="text" name="s" id="s" />
    <input type="submit" value="go" />  
  </form>
</div>

Answer 1 · 2016-06-07T10:44:44Z

June 7, 2016 10:44am

You've no doubt moved on from this by now, but in case anyone else comes across this issue, you can fix the styling of the search form by inserting the following into /css/style.css

.search form
{
    margin: 10px 0 10px auto;
    width: 300px;
}
.search form input[type="submit"]
{
    padding: 6px;
    width: auto;    
}

Answer 2 · 2017-06-19T16:48:04Z

June 19, 2017 4:48pm

Here's mine, inspired by Nigel's solution:

.search{
  overflow:auto;
}
.search form {
   width:auto;
   margin:auto;
   float:right;
   padding: 6px;
}
.search form input[type="submit"] {
  width:auto;
  padding:6px;
}

Add the 'wrapper' class to the search div to have it line up with the rest of the page formatting:

<div class="wrapper search">
  <form method="get" action="catalog.php">
    <label for="s">Search:</label>
    <input type="text" name="s" id="s" />
    <input type="submit" value="go" />
  </form>
</div>

Answer 3 · 2018-08-03T13:53:24Z

August 3, 2018 1:53pm

I know this is an old issue, but I wanted to add something to this post for any future viewers. I added the above code proposed by Nigel Rodgers to my CSS file, but it was still pulling the style from further in the CSS file that is used to style the general form on our Suggest page (if you look at your dev tools/inspector the <input type="submit" value="go"> element is being styled starting on line 643 of style.css). I troubleshot by commenting out the form to make sure that I was not messing up with the form. I then commented out the <link> for the stylesheet in the <head> of header.php, and the page was no longer styled.

This was all confusing, as style.css appeared to be styling the page and the code above was more targeted than the code further down the page, because it was using the .search class, which should've been taking precedence - .search form input{} is more targeted than simply form input{} - still it wasn't using the correct styling. So, I moved the style.css file out of the css folder, and that's when I realized that my browser was caching and not updating the newly added styles. So I simply shut down all of my browsers and project files and dumped my cache and temp files.

When I started back up, the project was pulling the correct CSS. I am working on a local dev environment setup with XAMPP for Windows 10, and using Google Chrome and Dev Tools. For me, it was simply a browser cache issue and the code that Nigel proposed ended up working perfectly.

May not be the most concise or clear answer, but I hope it helps someone figure out the issue in the future.

Answer 4 · 2016-05-24T18:36:44Z

May 24, 2016 6:36pm

I am also having the same problem. The style is not displaying correctly. I am using Mozilla.

Answer 5 · 2016-07-21T12:59:04Z

July 21, 2016 12:59pm

having the same issue. the styling for the class search is missing in style.css and when i add the above fix, the styling still doesn't match what shows in the video.

here is the 'forms' section in the style.css associated with this project:

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

and here is the code I added at the end if this section:

/* styling for search box */
.search form {
  margin: 10px 0 10px auto;
  width: 300px;
}
.search form input[type="submit"] {
  padding: 6px;
  width: auto;
}

is there a better place to put the code fix?

Answer 6 · 2016-07-25T08:53:37Z

July 25, 2016 8:53am

My version was inspired by the above solutions:

.search{
  overflow:auto;
}
.search form{
   margin:auto;
   float:right;
   padding: 6px;
}
.search form input[type="submit"]{
  width:auto;
  padding:6px;
}

Answer 7 · 2018-10-24T15:14:49Z

October 24, 2018 3:14pm

This is really just simple CSS. Appearance is not important for understanding the scope of this lesson.

But I am glad I am not the only one who is anal when it comes to coding =)

Welcome to the Treehouse Community

Looking to learn something new?

Will Gorham

Will Gorham

Search form not styling correctly

Stefano Salazar

Stefano Salazar

Will Gorham

Will Gorham

7 Answers

hbarnett

hbarnett

Josh Foster

Josh Foster

robbertdekock

robbertdekock

Darrell Conklin

Darrell Conklin

Stephen Blank

Stephen Blank

Daniel LittleThunder

Daniel LittleThunder

melk

melk

janeporter

janeporter

hbarnett

hbarnett

Nigel Rodgers

Nigel Rodgers

jlampstack

jlampstack