I've disabled the superfish js for now so it's pure CSS. The URL is http://pittsculture.studiotwo.com/category/outdoors-recreation/. It looks fine in FF and Chrome. But, believe it or not, IE has a problem with the dropdowns (e.g., under Outdoors and Recreation). Can anyone tell why?
On #main-nav, you need to remove the filter rule. The filter is causing Internet Explorer to behave as though you have applied overflow: hidden to the element.
Now your dropdown menu works, but it's lost the gradient.
You can add the gradient back in a way that won't cause the same problem by adding the same filter you just removed to #menu-category-navigation. As far as I can tell, it looks identical.
Related
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.
Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?
The only draggable elements in IE are the <a> and <img> elements.
Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.
So the "correct" way to handle IE is to use those elements.
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
site in question: http://ecogroovellc.com
When looking at the 2nd child menu drop-down (Portfolio>Music), it appears properly in FF and Safari, but not in IE8, where it is hidden within the 1st child drop-down. Any solution ?
Thanks!
I know it's because of the filter (providing opacity) in IE - it causes an overflow: hidden-esque effect.
I attempted to precisely locate it, but there's a lot of CSS/JavaScript to look through and I became disheartened.
What you need to do is remove the relevant filter rule when the fade transition is complete in your JavaScript.
If you set the UL in question (the one with audio and videos) to position:relative, it seems to fix it in ie8, but it screws it up in FF.
I had the same issue. I tried multiple variations, in the end I added filter:none !important; to my css rule on the containing element and that is what worked for me.
if you're trying to compensate for issues on IE8 you should always target it conditionally (add conditional class to HTML then write css targeting .ie8 specifically)
there literally isn't any way to write code that works for everything all at once...
Has anyone got any idea why the menu is rendering below the rotating images on this site in IE7: http://new.coffeelatino.co.uk/.
The z-index is much higher for the menu that it is for the rotating images.
Just another reason why IE is so dreadful.
z-index is ignored for elements that are not positioned. Add "position:relative" to the style of whatever you're trying to apply a z-index to, and that should fix it.
Hint for remaining sane as a web developer: Write against IE, then test with other browsers. Most things that work in IE will render correctly in FF and Chrome. The reverse, as you've noticed, is not true.