Shape 5

Really like this new template but do have a few issues with it that I hope you can solve. I am working on a site which I installed using the Site Shaper. Looks good in all browsers I tested until I tried IE8. Using IE8 there appeared to be a few modules appearing above the logo which don't appear using any other browser:

* Two custom html modules published to sidebar_top and sidebar_bottom (I unpublished these and they are now gone)
* A menu module which I can't figure out how to get rid of.
* A white rectangular box which seems to be a search input box (note this appears even if I unpublish the Search Module)

Also, one other issue that I noticed using Safari 5.1.10 which you can also see in IE8, the Search box doesn't function well. It takes up whatever space is left over to the right of the menu and it's difficult to get the search box to stay in focus when you hover over it, making it difficult to enter your search term.

Hoping you can take a look and advise on how I can resolve these few problems :)
Screenshot showing issues is attached.
I can provide a link to the site through a private message if needed.

Thank you :)

Update: Was able to get rid of the extra menu by changing Layout Type from Side Bar to Drop Down in Template Settings.

Still hoping there's a solution for the search issue with Safari.

Thanks

Hello,

It looks like Safari is ignoring the css width calls for the inputbox. I had to re-write the css for that area and apply the widths to the wrapper of that area instead. Simply re-download the template.css and over-write your existing one.

Or if you need to manually change find this in template.css:




#s5_search_wrap {
float:right;
height:59px;
padding-left:20px;
padding-right:20px;
}

#s5_search_wrap input {
padding:4px;
padding-left:8px;
border:none !important;
color:#FFFFFF !important;
background:transparent url(../images/s5_search.png) no-repeat center left;
width:0px;
padding-left:14px;
overflow:hidden;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
text-indent:10px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
margin:0px;
margin-top:17px;
font-size:0.9em;
}

#s5_search_wrap input:hover, #s5_search_wrap input:focus {
width:140px;
padding-left:20px;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
background:transparent url(../images/s5_search.png) no-repeat center left;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
}




And replace it with:





#s5_search_wrap {
float:right;
height:59px;
padding-left:20px;
padding-right:20px;
width:18px;
overflow:hidden;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

#s5_search_wrap:hover {
width:160px;
}

#s5_search_wrap:hover input {
padding-left:20px;
}

#s5_search_wrap input {
padding:4px;
padding-left:8px;
border:none !important;
color:#FFFFFF !important;
background:transparent url(../images/s5_search.png) no-repeat center left;
padding-left:14px;
overflow:hidden;
text-indent:10px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
margin:0px;
margin-top:18px;
font-size:0.9em;
padding-left:30px;
}

#s5_search_wrap input:hover, #s5_search_wrap input:focus {
background:transparent url(../images/s5_search.png) no-repeat center left;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
}

Awesome - thanks for the fix - now behaves as it does in other browsers :)

Let us know if you have any other questions :)

-Mike