Zurb Foundation top-bar dropdown doesn't work on hover - drop-down-menu

I built a site on Foundation framework with vanilla css and then got into Sass, so I converted site to Sass to take advantage of easy customization going forward. Unfortunately when I did, the top-bar stopped functioning properly. The dropdown no longer works on hover. I can click to get it to dropdown, but it won't automatically drop down, as expected, on hover. Anyone else having this issue?
site here: http://www.parker-gibson.com/testing/lifedesign
Thanks in advance for any insight into this problem!

Related

Bootstrap images not aligning properly in Explorer, Firefox

My Boostrap framework is working fine on Chrome and Safari. It also is mostly on Explorer and Firefox. However, in Explorer and Firefox, a couple of images on interior pages appear to have an offset applied. The issue will be apparent when viewing the pages:
notagamebook.com/the-author-2
notagamebook.com/excerpts
I have been unable to find anyone else who has encountered the same issue. And I realize a manual fix won't be all that difficult, but I would like to keep the images in the framework and figure out what is happening in case it occurs again in the future.
EDIT
After attempting to fix this issue manually, I have realized it is NOT a Bootstrap issue. Firefox and Explorer are pushing the first piece of content following the page label to the right. It did so even when coding outside of the Bootstrap framework. I tried putting a piece of text as the first item and got the same result.
I've found the solution to this problem: There was a difference in the bottom margin being applied to the title in Explorer and Firefox, pushing the content to the right of the title div.

kendo ui back button breaks my app navigation

I have tried to get the data-role="backbutton" kendo mobile ui feature to work but I am having issues. When testing the app on my iPhone 4 I get stuck in my app because the back button breaks the UX.
What happens is that when I am testing, I click heaps of back buttons (as they are used quite heavily in my app) and then randomly one decides to slide the previous view into the screen but only goes halfway and then snaps back (or some other type of visual glitch occurs). Then after that, all my navigation breaks down and I get stuck in the last view that I was in. Or better yet the links go to places that they are not supposed to. My tab bar does not work and either do links in the header. I have to exit the app completely, remove it from operating and try again. Seriously something wrong going on here.
I have tried to programatically add the back button by following the Kendo UI documentation but that does not work either. I am left with a button that does absolutely nothing when clicked - it may not even solve the issue anyway. I have looked using developer console in Google Chrome but I can't see any obvious issues.
Has anyone using Kendo Mobile UI experienced this issue before?
I downloaded the latest release of the Kendo UI build and the problem seems to have been resolved. Surprising! I assumed the Kendo framework was a bit more mature to be experiencing such a big issue. It was occurring when using slide transitions in navigation. Here is a link to the bug post on Github https://github.com/telerik/kendo-ui-core/issues/66

Simulate html listbox dropdown on trigger over other action

Please someone help me on the issue below.
I have a list dropdown box to be opened on trigger of a img div on top of it.
This works perfect in chrome, while it does not work in all other browsers like firefox, ie and others. I have a fiddle link ready which shows working example for chrome.
[link]http://jsfiddle.net/jNVwF/
Hope to hear from anyone of stack users.
Gone through Reference - Similar stacks
Firefox 5 dispatchEvent not working
(Not working, Implemented)
What am i doing wrong with fiddle link?
Thanks again.
Sajay.

Firefox pushes table content up one pixel

I'm pulling my hair out over this probably very simple problem..
I just built a website for an iphone repair company:
http://www.cellcity.co.nz/
When viewed on google chrome and safari the website shows up without any problems,
when viewed on internet explorer i just have the mobile optimised version showing while i get around to sorting out its problems.
but on firefox all my elements are pushed up one pixel. I have all the content within a table within divs, have a quick look at my source code or request some code to be shown. I don't understand what could be wrong, I am using the border-collapse css style, maybe that might be a contributing factor?
Thanks in advance,
Matt
Ok I figured out that for every css class and id, you can make a firefox independant one that is only seen by firefox. Just place #-moz-document url-prefix() {.....} around the second version of your css class and firefox will override the old version =D
hopefully this helps someone else!

IE8 Web Font Bug

I've got this weird problem happening with a site I'm currently working on. When you load the page, everything looks fine. It's only until you hover ANY part of the page that the some of the fonts shift, almost as if the letter-spacing contracts.
It's really hard to explain, but to see what I'm talking about have a look at this page in IE8, and keep an eye on the navigation and page title.
Site Link
The problem started occurring when I added the Selectivizr.js to the site, and when I take Selectivizr js away it works fine.
Any help with this would be hugely appreciated. Thanks in advance!

Resources