I've started playing around with transitions and have come up against quite a big problem. I have a set of divs that transition from 0 to 1 opacity when the user hovers over them, the problem is that when the fixed div that contains my site's navigation is on top of them they overlap it - meaning the user cant click on the navigation, as shown on the right of the image below:
When the transition finishes it goes back to its normal state (like on the left of that image) but as soon as the mouse moves the whole thing starts again so its impossible to click on the navigation. Is there any solution to this? Or would a jQuery alternative be the answer?
I can post the code Im using if it's of any use.
Set your header z-index. That should solve the problem.
header{
z-index:999;
}
Related
I have a CSS menu here
http://www.salvationarmyqc.org/
When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.
After that, it doesn't move.
I can't figure out why this is happening.
Are you able to post your css?
By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.
for example your css might look something like.
#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}
Im not sure why the entire navigation menu moves down in chrome without seeing your css.
your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.
Link to site in question: http://www.christopherwarrington.com/testing_ground
I have a start screen that is set to z-index 100 to make sure it is above all other DIVs. When you click the Enter button, the Start screen slides away.
The Main DIV is set to a z-index of 50.
The problem is that when the Start screen slides away, you can read everything within the Main DIV, but can not necessarily click the links. You can see this in effect at the end of the 3rd paragraph. If you scroll the mouse over the link, the left side will not allow you to click it, but the right side does.
Now, if I change the z-index of the Main DIV to be higher than that of the Start Screen, all links are accessible, but the Start screen slides up and down behind the Main DIV, which is not useful.
I am at a loss. I do not know why when the Start screen slides out of view, why it prevents the links from working. I am sure I am missing something obvious and I appreciate any advise from an extra pair of eyes. Thank you.
The start screen div is covering up the rest of the content so that clicks that appear to be over a link are actually over the start screen, and thus do nothing. Somehow the bottom area of the start div is transparent, so it is covering those links and making them unclickable even though you can't even see it. The easiest way to fix this would probably be getting rid of that transparent part. The easiest way to fix this would be to get rid of that transparent part, which is coming from the div with id="enter_btn_wrapper". The div is currently set to have a height of 500px and a width of 300px, which makes it come down right in the middle of the page over your content. It doesn't cover everything; notice how you can still click links that are farther down the page or far to one side with no problem.
Seeing as all this div does is provide a handle for you to position the actual div with the button as its background 75px about it, you can set its height to 0px and be good to go.
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
Ah, yet another CSS issue I'm having.
I'm attempting to use custom buttons, replacing a LinkButton with an image. I have the button working, but now the content below the button is not being pushed down. Have tried various things, but can't seem to find the answer.
Here's a jFiddle: http://jsfiddle.net/3hm5W/
Basically, the div id = sampleForm (the white form box) should start 5px after the div class = action-buttons. Currently the white box contains the red button.
All of the contents of your action-buttons are being absolutely positioned, which takes them out of the normal flow and makes the container have 0 height. Either get rid of the absolute positioning, or specify a height for your action-buttons div.
I'm encountering something I've never really come across before in IE7. I have a wrapper div with a background image applied to it. This image is supposed to repeat all the way until the end of the wrapper div. In IE7 there seems to be a scrolling issue where if I use the scroll bar to see parts of the page that aren't initially visible, the background image will 'cut off' and not repeat in the last 100px or so. This only happens if I have to scroll to see more content. It's like it doesn't fully load the background image for areas that aren't immediately visible.
What's strange is that if I use the mouse wheel to scroll up and down the page, the background image repeats just fine and as it should. If I use the scroll bar though, it will break randomly (never more than 100px but sometimes just the last 20px, 30, 40 etc).
I've tried the following to trouble shoot so far:
1) Added background color to the div as well. The background color breaks as well so it's not just a background image repeating issue.
2) Added a min-height of 1% to the wrapper div.
3) Added a position: relative to the div. I read somewhere that this fixes a weird IE7 background bug. This didn't help.
Thanks for any help. I'm unsure if there's some hiccup somewhere else in my code that is causing this (which I'll continue to look into) or if it's some well known IE7 issue. Again I just find it odd that using the scroll wheel on a mouse let's the background render as it should. Clicking, holding, and using the scroll bar causes it to break.
EDIT: Here is a link to a screenshot of the horrific problem in action. http://skitch.com/flight/dspeh/ie7bgerror
The top one is with the error. The bottom screen is how it should load.
Another additional thing I noticed: If I minimize the window while it has the broken background and then maximize it again the background image corrects itself.
My guess is that the 3 boxes at the bottom are floating div's. Try this:
#backgroundDiv { overflow:hidden; min-height:100%; height:auto!IMPORTANT; height:100%; }
IE6/7 sometimes bug with min-height. This piece of code will cause IE6/7 to default to 100%... IE sometimes likes to use the last declaration instead of following the !important call; whereas every other browser will use the !important call when displaying the page.