I have a menu here:
http://www.gardensandhomesdirect.co.uk/menutest
It works as it should in Chrome, FF and IE9.
However if you try it in IE7/8, the first menu, Garden Furniture, when you try to hover over any other option than All Garden Furniture the menu closes. This doesnt happen on any of the other menu categories.
Im at a loss as to why this is the case, it is likey right in front of me!
Any help is appreciated.
Thanks!
That menu doesn't work in IE9, IE8, or IE7.
It would work in both IE8 and IE9, but you're forcing those browsers into IE7 mode with this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
If you remove that, only IE7 will remain broken.
IE7 is broken because it has known bugs concerning z-index, see:
div layering problems
Why is my CSS drop-down menu opening behind a DIV in IE7?
IE 6 & IE 7 Z-Index Problem
I will investigate and provide exact instructions on how to fix this in IE7 if:
You're sure you care about IE7.
You need the exact instructions.
The absolute position of all the sub-menus one of top of another is causing this confusion. The first sub menu of 'garden furniture' does not overlap any other submenu beneath it, which is why I think this is the only one that works.
Try setting increasingly higher z-index values for each submenu in .side_nav. If you can't add classes to do this, you can do it with jQuery.
Related
My Boostrap framework is working fine on Chrome and Safari. It also is mostly on Explorer and Firefox. However, in Explorer and Firefox, a couple of images on interior pages appear to have an offset applied. The issue will be apparent when viewing the pages:
notagamebook.com/the-author-2
notagamebook.com/excerpts
I have been unable to find anyone else who has encountered the same issue. And I realize a manual fix won't be all that difficult, but I would like to keep the images in the framework and figure out what is happening in case it occurs again in the future.
EDIT
After attempting to fix this issue manually, I have realized it is NOT a Bootstrap issue. Firefox and Explorer are pushing the first piece of content following the page label to the right. It did so even when coding outside of the Bootstrap framework. I tried putting a piece of text as the first item and got the same result.
I've found the solution to this problem: There was a difference in the bottom margin being applied to the title in Explorer and Firefox, pushing the content to the right of the title div.
I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
So I was testing out the 960gs when I encountered a problem with the Opera & IE8 browser.
Below is an image with the page rendered in Opera (But same error happens in IE8.)
I don't care about the buttons not being styled correctly, but it's the divs aligning horizontally that bugs me.
Below is the same page rendered with chrome (looks the same in firefox).
Anyone knows what the problem might be?
Your HTML has incorrect tags. buttons cannot have hrefs. Only links (a tags) can.
Your CSS does not have gradients for Opera, IE only for Safari/Chrome.You would do that using -o-linear-gradient(top, #ade2ff, #0588fa);
Well, either you use <button> or <a>. If you start your buttons with <button> you can't end them with <a>. Just choose one of them and your grid layout works.
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).
So basically been working on this issue for far too long now and nothing I do seems to fix the issue.
Basically if you go to http://www.completeenergy.co.uk and click on the "Get a Quote" button then try to enter details into the form nothing happens. You can not click on the inputs and or select anything within the form. This seems to happen in both IE7 and IE8.
Any ideas as to why this would happen when all other browsers seem to be working fine?
Okay, I seem to have accidentally come across the culprit. There was some strange conflicting issues arising from using the jquery pngfix. I made it so only versions lower than IE 7 can use it and boom, it starts working again.
Thanks for the help though.
not sure, but it worked fine for me in IE8. Do you have any toolbars installed?
This common issue is usually due to a z-index bug in IE. Try giving the input relative positioning and assigning a higher z-index.
I was clicking on a form on a company intranet web site and nothing was happening.
Intranet defaults IE into compatibility mode, so the form was broken.
You can force edge compatibility in your browser or with HTML and IE behave like modern browsers.