Blogging Pro Search Box Display Error in Safari and Chrome

This article is specifically for those who use the Blogging Pro template on Blogger but may be of interest to others. Since initially writing this I have also found that the error also shows in Google’s Chrome browser. I have therefore amended the article.

There is a display problem with the header search box when the template is viewed in Apple’s Safari browser on a Windows PC or in Google’s Chrome browser. I do not have access to a Mac so I have been unable to check the Mac version of Safari.

The search form legend, in black, should not show as it should be hidden by a large negative text indent in the CSS. It is then replaced by the more attractive white heading in the background image. Both Safari and Chrome, however, ignore the text indent and display it as shown in the screen shot.

Fortunately the cure for this is quite easy. Go to Edit HTML and download the template then expand the widget templates. Next locate the following section of code by entering 'searchform' in your browser’s search/find box (CTRL+F).

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>

Delete the line highlighted in red. This will get rid of the black “Search”. If you preview the change you will see that the search box is now up too high. So look in the head of the template for this section of the CSS:

/*\ IE/Win min height hack */ * html .Search{height:100px}/* */

.Search{width:375px; background:url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro
/SearchBkg.png) no-repeat left top; min-height:100px; position:absolute; top:0px; right:0px}
.Search fieldset{border:none; padding:0px; margin:0px}
.Search legend{text-indent:-35000px; margin:0; padding:0}
.Search form{padding:33px 33px 0px 33px; margin:0px 0px 0px 0px}
.Search input{color:#6db6ff; font-size:14px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}

Find the line shown in green and change the first 33px to 47px so that it looks like this:

.Search form{padding:47px 33px 0px 33px; margin:0px 0px 0px 0px}

This will move the search box back to its correct position. You can save the template now and the black “Search” will be gone in Safari and Chrome browsers.

If you look at the line above the green highlighted line you will see the style definition which gives the search legend its negative text indent to hide it. This is now redundant so you can delete it if you wish or just comment it out like this:

/* .Search legend{text-indent:-35000px; margin:0; padding:0} */

If you just leave it it doesn’t matter as the browser will ignore it anyway.

Finally there is the matter of the search button which is slightly low in Safari 3. This also happens in Internet Explorer 7 because both of these browsers are not fully standards compliant. Using a hack to fix it in Safari is likely to cause problems in Opera and Google Chrome and will probably affect more of your readers, so it is best left alone. The good news is that the alignment is perfect in Google Chrome, Safari 4 (currently in beta) and Internet Explorer 8.

Update 18 June, 2009: Safari 4 has now been released and it is very different to the beta version. Unfortunately they have reintroduced the search button misalignment. One of these days they may get it right.