• Status: Solved
  • Priority: Medium
  • Security: Private
  • Views: 39
  • Last Modified:

Google Search Box Not Displaying Correctly.

Google Search Box is not displaying correctly.  Please see attached image. There is a box inside a box, inside a box...why is it doing this?  I though it might be the divs, but that proved incorrect.  Any idea why it's displaying this way?  I had it in an include.  Think that was the issue I moved it, but got the same results.

http://insurance.illinois.gov/defaultNew.html
GoogleBox.jpg
0
smitty62
Asked:
smitty62
  • 3
  • 2
2 Solutions
 
Juana VillaFront-end DeveloperCommented:
Hi,
There is a style to a <td> that is adding the double border. You can add this style to remove it:
.gsc-control-searchbox-only td {
    border: 0;
}

Open in new window


Then you will notice that the search box is all the way to the top. You can add this style to align it with the rest of the nav:

.gsc-control-searchbox-only{
    margin-top: 24px;
}

Open in new window

0
 
smitty62Author Commented:
The first CSS worked, the second did not.  The box completely disappeared when I added the top margin.  Is there a way I could add vertical-align:middle so that it will adjust with the screen size change?
0
 
Juana VillaFront-end DeveloperCommented:
Hi,

Unfortunately, we cannot use vertical-align: middle because the main nav and the search are floating. You can add margin-top to the search in order to align it.

#navbar-main .pull-right {
    margin-top: 20px;
}

Open in new window

0
 
smitty62Author Commented:
It's working and looking good now.  Thank you for your help.
1
 
smitty62Author Commented:
Thank you for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now