Forum Support

Shape 5
May 13, 2021, 06:23:41 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Main Menu appearing again above logo in IE8  (Read 396 times)
heatherz
Jr. Member
**
Offline Offline

Posts: 24



« on: June 26, 2014, 10:56:33 AM »

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 Smiley
Screenshot showing issues is attached.
I can provide a link to the site through a private message if needed.

Thank you Smiley


Logged
heatherz
Jr. Member
**
Offline Offline

Posts: 24



« Reply #1 on: June 26, 2014, 12:48:16 PM »

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
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #2 on: June 27, 2014, 07:43:17 AM »

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;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
heatherz
Jr. Member
**
Offline Offline

Posts: 24



« Reply #3 on: June 27, 2014, 11:34:22 AM »

Awesome - thanks for the fix - now behaves as it does in other browsers Smiley
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #4 on: June 27, 2014, 10:16:14 PM »

Let us know if you have any other questions Smiley

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.