IE CSS Tweak in Custom Menu WordPress
- SOLVED
In [[LINK href="http://diyphotography.net"]]http://diyphotography.net[[/LINK]], on the same line at the logo are 2 menus and a widget: category menu, custom menu for social icons, and then a widget for the search (where the little search button icon is). This all lines up right in Chrome and Firefox, but the social icon custom menu doesn't stay on line with the search in Internet Explorer.
I need this to be on the same line in IE too.
Answers (3)
zebra webdesigns answers:
Hello Nile
The background for search button is serving from some other website.
Please upload the image to the website and set as background.
I have figured the problem and I have login details, If you want I can fix it
zebra webdesigns comments:
The actual problem is the social icons using -5px and the margin-top for widgets is in rem instead of pixels.
Ie calculates the rem different from other browsers.
zebra webdesigns comments:
Hello Nile I have fixed the CSS for IE.
Please check and confirm.
In the last reply I mentioned IE calculate the rem differently, actually here thats not the case. top:-5px was not recognized in IE.
So I removed the top:-5px and decreased the margin-top to 2 rem for the menu
Below is the original version of the css before the fix
http://pastebin.com/wBbris6t
Sachindra Narayan answers:
i guess, this should work fine..
<blockquote>li.facebook-icon a{
margin-top:25px;
}
section#nav_menu-4{
margin-top:0px;
}
.slh-search-toggle,.widget-wrap{
float:left;
}
section#nav_menu-4 .widget-wrap{
float:left;
}</blockquote>
Nile Flores comments:
How will this help in IE? I don't need the float issue... just a fix for Internet Explorer to get the social icon menu on the same line at the search icon. I will attach a screenshot shortly.
Bob answers:
.header-widget-area .widget_nav_menu ul li,
#toggle-search {
float: left;
}
Nile Flores comments:
This would not work and doesn't even address the issue.