The site in question: americandream.org.es/en
I have been working on this bug for two days now. My main navbar has several clickable buttons with dropdown content. On Chrome for desktop (where I designed it) this works fine regardless of how you resize the window (responsively adapts to desktop, iPad, and mobile display modes), and the same is true with Firefox and Internet Explorer for desktop. The mobile version also works perfectly in Safari, Chrome, and Firefox on iPhone 5.
However, the dropdown content does not appear on click on the actual iPad in any browser I have tested (Firefox, Chrome, or Safari) and it does not appear in Safari for desktop, either. While the dropdown content displays in the Chrome browser for desktop, the debugger for Chrome does not display the dropdown content, either, but shows a box where the dropdown content should be displayed.
I can see in the Chrome debugger that the class .dropdown-content.show does activate and change from display: none to display: block on click, but it is just buried behind other page content. When I delete all other page content, I can see that the dropdown content is indeed toggling and displaying properly.
So I am deducing that the problem has something to do with how Safari and some browsers on iOS for iPad understand z-index? The navigation bar has a z-index: 9999, which .dropdown-content should inherit, but I know that there is more to z-index than that the biggest number always shows up on top.
But what exactly is wrong and how do I fix it? I have tried manually specifying opacity: 1 and z-index: 9999 for .dropdown-content, and I have tried adding the -webkit-transform: translate3d(0,0,0) hack described here and here to override iPad and force hardware acceleration, but maybe I am not implementing that hack correctly? Do I have the display settings set wrong in the navbar css? I am also confused as to how the exact same javascript and display settings work fine in every browser on iPhone but no browser on iPad.
Any insight is appreciated. I just started teaching myself web design about a month ago, so I'm sure it's a simple mistake, but I am lost.
Removing the overflow:hidden from ul.topnav will allow the dropdown to show
Related
The link to the page in question is: https://rescueform.org
The overflow for the main content area is set to scroll, and is scrolling properly, however the vertical scroll bar is not visible in Google Chrome. The scroll bar does display properly in IE, Firefox, etc.
Also, I'm new to the site and I'm not sure if it's required to post the code in this post. I'm hoping that you will view the source code using your developer tools so that you can see the differences between the browsers. My main CSS file is named styles.css.
in "indexStyles.css" you have
::-webkit-scrollbar {
display: none;
}
remove it.
I have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.
This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.
I have a site, www.stprc.com, and I have used spry menu bar - it was working fine before, but now some menu items backgrounds are not displaying and on hover shows the text only. Sometimes they start blinking as well. It happens with the 3 menu items which are not showing currently, rest are appearing fine. This is happening on both Chrome and Firefox, whereas on IE everything works fine.
I have no clue as to why this is happening. Can any one help?
IE8 is ignoring the background-image you are setting (SpryMenuBarDown.gif), so it looks how you expect. The background image is screwing up the menu, so in browsers that are processing your background-image, it is screwing up the menu. Remove background-image(SpryMenuBarDown.gif) and it should work in modern browsers.
I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79
Once again I have written some Javascript using jQuery, and it works in every browser except Internet Explorer.
This time it's a sliding menu for the company website that stays at the top of the screen when you scroll down the page. In Internet Explorer the colored bar at the bottom of the menu appears to the right of where it's supposed to be, and when you scroll down the menu appears to the bottom right of where it's supposed to be. On top of that, the menu border is misaligned with the menu.
The affected page is at http://www.jacobsautomation.com/so_tooling.html, with the logic for the slide menu at http://www.jacobsautomation.com/so_slidemenu.js. Below are some pictures of the page, with Chrome left and Internet Explorer 8 right:
Still http://www.jacobsautomation.com/Problem_Still.jpg
Moving http://www.jacobsautomation.com/Problem_Moving.jpg
Does anyone have any idea how I can get this working in IE?
It may not be the complete answer, but it probably doesn't help that you're using a proprietary attribute background in your <tr?'s. You are probably looking for style="background: xxx". Ditto for height in your table tag. These are actually invalid for the DOCTYPE specified (XHTML 1.0)