CSS drop-down menu links require TWO clicks in Chrome - html

I have a typical CSS site menu/sub-menu system on a site I built. When viewed in Chrome (latest version, on Windows), each link in each sub-menu requires TWO clicks for the link to work. The first click appears to do nothing at all. It's fine in all other browsers.
I have pared the code down to the minimum that demonstrates the behaviour. You can see the result here: https://www.harmonysite.com/chrome-issue.htm Clicking on the "Sub-menu item" link does nothing in Chrome - the FIRST time. Click it a second time and it works as expected. In other browsers it works the first time.
Any advice would be appreciated.

Related

Can't open new tabs or windows beyond the first on IE, Edge, Safari

I'm currently having an issue where I have three major links on this landing / splash page (http://dairyberries.com/) where it's supposed to link out to a new browser tab or window when you click on any of the three main links under the logo. I've used target="_blank" and target="_new" and in both cases on Internet Explorer, Microsoft Edge and Safari, they open the first window but any additional clicks only loads the new site in the same browser window instead of opening yet another new window or tab.
What should happen, and seems to in both Chrome and Firefox, is that if I clicked on all three links, I should see three new browser windows. Not one.
Is there a way around this? Or just a FOL because of browser behavior?
target="_new" is not an actual keyword for the target attribute in HTML5. All you are doing is telling the browser to open a new window. If you did target="_qwerty" you would get the same result.
When you click on one of these links the browser opens a window that it names "new". Therefore when you click on the next link with target="new" it opens it on the same "new" tab.
Applying target="_blank" to the link will provide the behavior you are looking for. I just tested it on your site in Microsoft Edge and it seems to be working fine.
Here is a good answer explaining the issue with target="_new" and why it isn't consistent between browsers:
target="_blank" vs. target="_new"

Website does not render correctly on mobile browser(s) after upload to server

I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.

Chrome Vs Firefox Back Caching

I have a drupal site with a view that links to detail pages. The view has paging. Here is the issue:
In FireFox, when you go from page 8 of the view to a detail page,
then click the back button, you end up at page 8 of the view. (good)
In Chrome, when you go from page 8 of the view to a detail page, then
click the back button, you end up at page 1 of the view. (bad)
I was under the impression that chrome and firefox handled back caching in the same way. Is this not true? Is there anything I can do to fix it, i.e., so that in either case you end up at page 8 of the view after clicking the back button?
You can see what I'm talking about at http://www.instepp.umn.edu/publications
Thanks!
Laurie
Digging around a bit more, I found the same question at: Firefox back button VS IE and Chrome back buttons
It was answered by the blog post at: http://madhatted.com/2013/6/16/you-do-not-understand-browser-history
In short, the back button on Chrome & Firefox behave differently; nothing I can do about it if my desired behavior is for the back button to return the DOM from cache. If I want the back button to return a refreshed version of the prior page, I have options as detailed in the blog post.

IFrames and Chrome

I have a menu iframe and a body iframe setup. In IE when I click the "back" button in the menu it goes back just fine. In chrome it works fine for the most part but there is one instance of that link that will open it in a new page even though it is a replica of other working instances of that back button.
Any ideas of what would prevent a link from working in chrome, a link that works just fine in firefox and IE?
I have a body iframe and a menu iframe.
the menu has links...some of them are targeted at the menu...the new page will redirect the body on load.
sometimes the menu link just updates the body as it doesn't need a menu.
in IE it works great. Firefox and Chrome do not like it. It will work fine the first time. But when you go back and click the link that JUST worked...it will open up in a new tab instead.
New Info:
I did a bunch of research on the issue and apparently
it's a chrome and ff update that is trying to disable iframes. I have yet to find a solution...if you have one let me know!

header navigation positioning bug in chrome

So, I'm having a strange issue in chrome (Version 33.0.1750.154) where, when the site is first opened, the navigation in my header gets pushed down and outside of the header for some reason. Upon refreshing the site, the navigation returns to where it should be and doesn't cause any issues. I've noticed that the positioning is messed up ONLY when you first open the site (for example, if I close the tab and reopen it a few times, it'll randomly happen but it won't ever happen if I refresh the site). It works exactly like it should in Firefox.
The site is live here: http://ayushman.us/
Similar problem in this question (navbar positioning bug in chrome) but the solution doesn't seem to be working for me. Any ideas?
Note: If you open the link and the header is aligned, close the tab and reopen at least three times (closing each time it works fine). For some reason, the third time is when it messes up for me.