bootstrap css not working in chrome - css

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.

Related

:hover behavior across mobile devices

While developing the mobile navigation menu for a site I am redesigning, I discovered that a number of mobile browsers trigger the CSS :hover event through a tap, including Chrome, FlashFox, and the default browser on Android 4.x, as well as Safari on iOS 7. Is this behavior wide spread enough to rely on? I'm assuming issues might arise with Android 2.x phones.
I'm wondering if anyone's had any experience with this and if this behavior is safe to rely on for my navigation menu. Also is there any kind of spec that defines this behavior, or did it just kind of appear? From what I've seen it appears to perform pretty uniformly across devices.
I've done mobile navigation menus before with JavaScript, but this would be a nice alternative.
I know there are a couple questions that deal with this topic on stackoverflow, but they are pretty old, and I couldn't find any question dealing specifically with what I wanted to know.
EDIT: To clarify, the site is being developed with responsive design, and I'm not simply trying to use the desktop style navigation bar with :hover. The menu is formatted for mobile, and the :hover would replace the need to write JavaScript to reveal sub-menus when a menu option is tapped.
Some say use :hover, others say use :active. I say use both (in one rule) and the device will use the one (or both) that works on that device.
I find it works, anyway.
Hope this helps.

Superfish Menu Wraps in IE9 and Mac Safari

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

Changing the scrollbars' style

Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.

Does opera mobile support scrollable divs?

I am trying to add a scrollable grid to a mobile web site I am currently working on. I've tried using the jQuery Scrollable Table Plugin written by farinspace, which works fine in IE8 but doesn't work at all in Opera Mobile for Windows. I've also tried using the Telerik MVC Grid extension, and that also will not give me a scrollable grid.
So, before I give up on the idea and switch to using a paging grid, has anyone ever got anything like this working on Opera Mobile?
I actually gave up on this, as I don't think it would have worked very well at all. Just not a very nice user experience.
What I've gone with is to display the table in it's entirety with no scrolling or paging enabled. So, I am relying purely on the scrolling capability of the browser.
It seems to work really nicely on my blackberry and I think will be nice to use on a touch smart phone too, as the user can just swipe their thumb/finger to scroll down and check the list. Then just swipe back to the top of the list to press the relevant button.
Actually, thinking about it, i might provide a "back to top" link under the grid :)

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