I've been checking several threads and questions that seemed similar to my current problem but actually wasn't able to find a solution that worked for my case.
I'm currently developing a mobile website which can be found under http://dev.sturbock.me.
The page does have a fixed header with some sub menus beneath it.
As long as the whole page is scrolled all the way up to the top, everything works fine just as expected. Now once you scroll down a bit, open the Menu and try to click one of the links, nothing will happen.
Has anyone of you guys had a similar problem of knows how to fix this? Probably a really easy one but this just got me stuck for a few hours.
Really appreciate your support! Thanks!
Marcel
Related
I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]
I have a website that has a moving background (code borrowed somewhere online) and I recently corrected an issue with the scroll bar not appearing but that actually caused another issue that wasn't very noticeable until I tried adding a new page.
If you go to http://theromdepot.com/ and move your cursor to the bottom of the page, you'll see a very thin white line start to appear. I just ignored it until I started adding a new page here: http://theromdepot.com/emulators.php. Now you can really see the issue. I'm sure the problem is in my CSS, but for some reason I cannot find it. I'd really appreciate any help, thanks.
CSS: http://pastebin.com/Up3WtmJ8
emulators.php: http://pastebin.com/UE78eMgT
It seems like your problem really lies in the CSS,but not just in it. I am not pretty sure what's the exact problem,but I ran the developer tools with Internet explorer and I have discovered this:
If you leave out the transform: matrix(1,0,0,1,0,0); property,the problem won't persist anymore.
Apologies as I'm a beginner with code, and maybe this gallery is a bit more advanced than I should have chosen, but I've managed to implement it as seen here codrops polaroid gallery
However, both in the example and my own, the back side of polaroids are only clickable in Firefox, in Chrome and Safari the entire back side of the polaroid isn't active, and I'd really like to be able to click the links I've added on the back.
I thought it might be something to do with z-index differences between browsers that I read about, but being a beginner I don't really understand what's happened or how to fix this so that it works in every browser, not just Firefox.
I suppose it's also possible that it's because I'm viewing it on a Mac? Tried adding outrageously big z-indexes and nothing moves so, not sure what's happening with that.
I'd have dismissed it as impossible but it's doing it just fine in Firefox so I'm hoping there's a fix.
I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.
The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.
Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..
Issue #1 -
I have read all about different solutions for getting rid of the "white space" in IE within tables, but nothing has worked so far! The page I am working on displays OK in Firefox and all other browsers. I have tried the height=100% command but that makes things so much worse and spaced out, and I have also tried deleting spaces between the different table and td tags but that doesn't change anything either. The images are exactly 115px square or twice that for a horizontal or vertical image.
Issue #2 -
I have an image gallery for each image that is SUPPOSED to appear when clicking on the image. It appears fine in Firefox and Chrome, but IE won't show the image gallery. Help on getting that javascript to work?
You can see our "live" site at www.tracystonearchitect.com (it is just the main home page - the rest of the site is in flash.. which we are working on converting) - it appears 100% correct in Chrome, the spacing issue and image gallery issue shows up in IE, and in Firefox the fonts I used aren't loading right.. which is another issue that I may have already figured out locally, but havent posted the updates yet.
I'm still pretty new at all this coding stuff, so may be a user-error. I've also been trying different techniques to fix these problems so things may be a bit awry based on my trying the different solutions. I'd appreciated any ideas or thoughts on how to fix the space-- or any other code technique comments!
Please help, I really need a solution for this.
As Per Issue #1
Do you have developer tools for your IE. This has become essential for me to troubleshoot and debug web pages. I took a look at your page. In the dev tools look for find in the menu and choose select element by click. Do this for several img. Look to the right of the dev screen and select layout. I noticed the offset varied between different pictures.
See this other SO topic How do I get rid of an element's offset using CSS?. Your on the right track with the css reset i saw in your code. Just keep going. The article mentions positioning as a possible cause.
As Per Issue #2
I wish i had more time to dig into this. I researched the error and found many hits most likely a syntax error. See this SO topic Possible cases for Javascript error: "Expected identifier, string or number"
I hope this points you in the right direction.