Can't Align Search Bar

[slocyclist]

First off, please forgive my tremendous stupidity when it comes to coding. I am pretty bad at it. In fact, I don't even know for sure I'm posting this in the right category.

Anyway, I'm trying to get my custom google search bar to fit on one line, but it's showing with the search button much higher and off to the left of the text box. Here's the code I've pasted from Google:



<div id='cse-search-form' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var imageSearchOptions = {};
imageSearchOptions['layout'] = 'google.search.ImageSearch.LAYOUT_COLUMN';
customSearchOptions['enableImageSearch'] = true;
var customSearchControl = new google.search.CustomSearchControl('partner-pub-8870927593772580:6899994551', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly('www.slocyclist.com/search-results', 'q');
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<style type='text/css'>
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #3C4154;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
vertical-align: bottom;
border-color: #3C4154;
background-color: #3C4154;
background-image: none;
filter: none;
}
</style>



Can anyone help me out with this? I would be eternally grateful! My blog is at:

www.slocyclist.com

Incidentally, if you're feeling really helpful, you could tell me how to fit my stupid ads in the sidebar . . . LOL

[Nile]

It looks like the input is inheriting some unneeded margin from somewhere. Just set it to 0:


input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
margin: 0;
/* other styles ... */
}

As for the ads, it looks like you need to select a different size (from Google)... or you could really just make the whole sidebar a tad bigger.

[jscheuer1]

That will get them in line with each other vertically. but there will still be a gap between them horizontally, and it will shift the layout of the page slightly.

You could skip that and instead add this to the stylesheet:


input.gsc-search-button {
position: relative;
top: 9px;
left: -25px;
}

That will get them lined up and right next to each other without shifting the layout of the page. If you want a horizontal gap between them, use -20px instead of -25px for the left coordinate, or whatever number makes them look the way you want them to.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[slocyclist]

You could skip that and instead add this to the stylesheet:


input.gsc-search-button {
position: relative;
top: 9px;
left: -25px;
}

That will get them lined up and right next to each other without shifting the layout of the page. If you want a horizontal gap between them, use -20px instead of -25px for the left coordinate, or whatever number makes them look the way you want them to.

The browser cache may need to be cleared and/or the page refreshed to see changes.


Thanks both of you so much! It worked! I really appreciate the help. :)