Superfish Menu Wraps in IE9 and Mac Safari - wordpress

I have implemented Superfish in a pretty basic custom Wordpress theme. The padding and / or spacing of the top level menu items is off in IE9 and also Mac Safari. I can't figure out what is causing the problem or how to fix it without affecting the browsers where it already renders properly.

I'd forget about using a menu plugin and use the WP3 menu system. There are no IE issues and no extra JS needed. And it's probably easier to implement than the plugin you're using. Grab the code from twentyten or twentyeleven.
See http://codex.wordpress.org/Function_Reference/wp_nav_menu and http://codex.wordpress.org/WordPress_Menu_User_Guide

Related

bootstrap css not working in chrome

In joomla i create a page.
I create a responsive fixed position categories menus below banner.
Desktop-view
I create a sticky button for.
Mobile view
On drop-down menu category display.
In chrome i check mobile view layout on monitor,
this work, but in my mobile check in chrome,
menus not work.
I update a version of chrome in mobile they work.
I want this work on old version of chrome...how to solve this.
Please help
Basically, to do the backward compatibility is difficult.
One option is to use common components that can be compatible with both older and new versions.
Otherwise, you may need to accept the difference between different browsers as a condition.
The following reference provides necessary information to create Cross-Browser apps. This may help you.
https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/
Regards.

Scrollbars for css menus still hidden behind PDFs in IE when using bgiframe

So Bgiframe is a huge lifesaver - we have used it to tackle the IE PDF issue where is would hide our css dropdown menus. However, we have run into an issue - our css menus have a max height, and once that height is filled, they begin to use a scrollbar within the menu (think the Facebook notifications). bgiframe does an excellent job making sure that the menus themselves appear in front of the PDFs in IE, but the scrollbars in the menus do not - they and they alone are still hidden. We have inspected the elements to make sure that the menus and the bgiframe are the same, correct width, and they are - but the scrollbar is still hidden. This might be a bgiframe issue or an IE rendering issue, not sure. Nowhere - and I mean nowhere - have we been able to find anyone else with this kind of problem. Anyone have any ideas?
Use jscrollpane instead of the browser default scrollbar. Also, make sure bgiframe covers the scrollbar area explicitly.

Joomla template not showing properly on IE8

I have installed Black&White free template from http://templatesforjoomla.eu/free-joomla-1.5-templates/blackandwhite-free-joomla-1.5-template.html
I really like this template and want to use it but I found a problem. It is not properly displayed on IE8 (it is said to work on IE7+). These are my problems that you also can see on the demo site
The slider works ok on everything except IE - only the picture is displayed without the text next to it
When the submenus on the top reach the picture in the slider - they hide behind it
I have some experience with joomla but IE has always be my nightmare. Thanks in advance for your help!
You can try to set up conditional css just for IE8, that way you could fix all css issues .. note that IE8 still holds some restrictions like not rendering CSS3 or media queries ..
you can read more about IE conditional comments here http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

Why are image borders and extra padding showing up in IE9?

I built and tested my site in Firefox but now when wanting to launch I realized that there is extra padding showing up between the menu and posts as well as borders on some of the images when viewed in IE9.
I have looked through all of the CSS and can't figure out what might be causing either of these problems. Any ideas would be great.
Here is the site: http://beautyintheweeds.com
Thanks!
Every browser has different default css rules. Use a css reset to bring everything to the same defaults.

CSS Dropdown menu help

Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.

Resources