Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP Integrating PHP with Databases Filtering Input for Queries Setting Up the Search Form

Will Gorham
Will Gorham
37,186 Points

Search form not styling correctly

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>

Have you tried to test the example in Dreamweaver, Sublime Text or Notepad?

Will Gorham
Will Gorham
37,186 Points

Yes, I opened the project downloads on my local environment (MAMP / Sublime) and it still isn't styled like the video. The CSS in the project downloads looks to be the same as the workspace css. It's not really a big deal, I can move forward with the lessons, I'm just noting that the styles seem to be missing.

7 Answers

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;    
}
Josh Foster
Josh Foster
8,896 Points

Thanks a lot - the styling issue occurred for me as well, and your code did the trick nicely.

Thanks, same problem here! :)

Also added

.search {
    border-bottom: 3px solid #dddddd;
}
Stephen Blank
Stephen Blank
16,286 Points

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>
Daniel LittleThunder
Daniel LittleThunder
6,975 Points

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.

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

janeporter
PLUS
janeporter
Courses Plus Student 23,471 Points

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?

Hi Jane,

Many thanks for your comment. I'm sorry the fix isn't working for you.

In theory it shouldn't matter where it goes in the stylesheet. If I recall correctly, I just added it right at the end of mine.

Does the input appear the same in other browsers?

Is the fix having any effect on the input at all?

For instance, if you were to add background:green; to .search form does it have the intended effect?

If you'd like, please feel free to post your output html source code somewhere, such as hastebin.com. I'd be more than happy to take a look and see if I can figure out what's going on.

Kind regards,

Jon

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;
}

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 =)