Search bar showing up in wrong place

[wanderer]

Hello! Happy New Year's Eve.

With much difficulty I managed to configure a google search bar to be on the side of the navigation menu instead of in a widget in the sidebar. I'm not sure it is even correctly configured but I've been using it for a while and it worked fine.

I just added subpages to the primary navigation menu and now the search bar is showing up floating under the last page on the primary navigation menu, instead of off to the right on the nav bar where it should be.

This is what the W3C validation error says:

173 Unknown pseudo-element or pseudo-class ::selection [selection]
401 .row Parse Error *zoom: 1;
402 .row Parse Error }
870 .search-form input[type="search"] Value Error : height attempt to find a semi-colon before the property name. add it
871 .search-form input[type="search"] Value Error : width attempt to find a semi-colon before the property name. add it
877 .search-form input[type="button"] Value Error : height attempt to find a semi-colon before the property name. add it

Here is my code from line 863-878

.search-form {
overflow: hidden;
width: 100%;
}

.search-form input [type="search"] {
height 100%
width: 100%
background: #fff url(images/search.png) no-repeat 15px 16px;
background-size: 15px 15px;
padding: 16px 16px 16px 44px;
}
.search-form input[type="button"] {
height: 100%
width:100%
}

I'm sure this is a simple fix. Can anyone help please? I'm desperate. Thank you!

http://wander-argentina.com

[Victor Font]

You are missing a colon after the height in the second block of CSS and you have no semi-colons after any of the height and width directives.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[wanderer]

Thank you Victor, you are my hero of the day!

Pretty obvious -- it's 40c here in Buenos Aires and no air-con. The heat makes me dumber than normal.

For some reason it didn't work though, even though my errors are down from 30 to 27 now!

There seems to be some other problem.

Here's what the validator says:

173 Unknown pseudo-element or pseudo-class ::selection [selection]
401 .row Parse Error *zoom: 1;
402 .row Parse Error }
1060 .widget p:last-child, .widget ol > li:last-child Parse Error last-child. .widget ul > li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
2022 Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .search-form input[type="search"] { background-image: url(images/[email protected]); } }

webkit seems to be causing problems -- the first error is in here somewhere:

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

::-moz-selection {
background-color: #333;
color: #fff;
}

::selection {
background-color: #333;
color: #fff;
}

a {
color: #ffa64f;

Second error here somewhere (for some reason the is in an area that /*test*/). I hired a guy online to make the site mobile. I have read the *zoom part is not standard:
the code that causes the second error:

/*test*/
.banner-wrap .banner-content-holder {
padding: 30px 35px;
background:#009933;
}
.banner-wrap.up {
margin-top: -166px;
}
.span4 {
width: 370px;
float:left;
}
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;

[Victor Font]

The W3c validator is a little behind the times and not 100% accurate. It will often show errors or warnings on perfectly valid code. The code you posted is missing some closing braces, but I don't know if that's due to the way you copied and pasted or if that's what's actually in your style sheet. You're going to have to learn over time what to ignore from the validator. Learn to use your browser inspect and debug tools. It provides a better picture for you.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts