I think I'm going to tear my hair out if I don't figure this out.
http://www.keystoneelderlaw.com/
If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?
I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.
Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.
RESOLVED:
Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".
I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.
In your css add property to #slide
#slide
{
z-index:-999
}
it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I have a website that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.
The page has two elements, nav and main that each have overflow-y: scroll set. This is so they can be scrolled independently of one another. If I scroll the main element, and then hover over the pagination buttons at the bottom, the main element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.
The common thread here is that the pagination buttons and the GitHub symbol on the right both have svg elements. If I get rid of the svg element the bug doesn’t happen. Also if I remove overflow-y: scroll from the main element the bug does not occur.
I’ve also noticed that the issue might be somehow related to having height: 100% set on the <html> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.
Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!
You can fix this by adding the following to body where your grid rules are defined. Sadly, I have no idea why this solves the issue.
body {
…
grid-auto-rows: 1fr;
}
After spending hours and hours on this, the only way I could figure out how to fix it was to switch from CSS grid to flexbox. 🤷🏼♂️
This is the diff that fixed it, if you’re curious.
This is a bug related to safari version 12.1, which is fixed in Safari Technological Preview.
https://bugs.webkit.org/show_bug.cgi?id=197189
However as a workaround in the mean time.
Can you try
overflow-x:hidden, overflow-y: scroll,
height between 50 to 95vh for the specific container depending on your surrounding elements. This is going to have minimal safari jump on hover and probably empty space at the bottom.
Even after Safari bug is fixed, seems that the bug still occurs on some other scenario. I successfully reproduced a similar behavior on Fluent UI dropdown: https://github.com/microsoft/fluentui/issues/23668
The workaround in my case was to change dropdown item height from "auto" to "100%".
I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.
You can see the problem here: http://brandca.co/cterranum/
We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.
We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.
We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.
The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.
Element has "position: absolute;" and inside it there is .inner-header which has "position: fixed;".
Try moving ".inner-header" outside of ".header".
I'm making my personal website and encounter this problem.
On top left of the corner there's a button. It's supposed to be clickable but for some reason it is hidden behind an image (in a sense that you cannot interact with it but you can still see it). Using my debug skill, it leads me to a conclusion that the animated image (with -webkit-transform) (note you cannot test this on Firefox or other browser yet) is probably the reason that mess up the priority of elements.
I tried to fix it with z-index 100 or 10000 but still no work. Strangely, if I remove the elements .bg number 2,3,4, the button is clickable again.
If anyone can please tell me if it's a browser bug and if there's a workaround for it.
My website: http://iflyingangel.com/
position:fixed creates a new stacking context, so z-index isn't behaving as you would expect: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Try this simple fix, let me know if it works for you:
.bg { pointer-events: none; }
I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try:
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.