I created a drop-down menu for web-site. But apparently,this drop-down menu just works in Firefox not in IE.
So What's wrong? Can anyone tell me this? Or give me an idea. Thanks in advance.
IE doesn't support the :hover pseudo-class on anything other than anchor tags. You'll need to use Javascript to make this work in IE.
Edit: As corrected by Kolink, this is an untrue statement for IE7+. IE7+ will need to be rendering in standards compliant mode to support it though. That means you'll need a doctype header on your HTML. See Pseudo class :hover does not work in IE7
You have placed these <div>s and other tags inside a <tr>, without using a <td>. This is invalid HTML and non-IE browsers are covering your back.
Related
We have a site here and it displays a white background correctly in all modern browsers, Ie9-11,Chrome,FF,Safari, etc. However, OF COURSE, IE 8 messes it up and seems to make a transparent background and I have no idea why. This is also on the news page only so I'm wondering if it has to do with the horrible tables-based layout SharePoint is using (I'm not a fan). Here's the URL.
Thanks in advance for any help you can provide!
It's not about IE, it's about html. My guess is that IE is in the Quirks Mode (as are all the browsers) because you have a leftover closing comment close to your doctype. Correct it.
P.s. All the new browsers have to arrange the code by themselves too. If you inspect the site and look into the DOM you'll see that instead of the <head> all your links and metas are in the <body>.
I have created a simple CSS flip animation which works in other major browsers, seems to be not working in IE 9.0 or 1.0 for some reasons.
jsbin handler.
http://jsbin.com/IQUqUBe/1/
Below is the links which i have looked upon.
https://github.com/vinothbabu/3DFlipper
http://davidwalsh.name/demo/css-flip.php
I am not able to figure out where is the issue whether its z-index or any other property which is causing this issue and also can you guys suggest on how to debug CSS code if possible.
When it comes to debuging CSS code you can use developer tools.
For Firefox the best solution would be Firebug
for Chrome, developer tools are built-in. Simply press F12
for IE there is Internet Explorer Developer Toolbar
Its not that it does not work in IE 10. set a doctype at the top: <!DOCTYPE html> This will take IE out of quirks mode. Below is the fiddle for the same.
http://jsbin.com/IQUqUBe/3/edit
This should make the code to work in IE.
I don't know what the problem is specifically, but here is a link saying that transition does not work in IE9: http://caniuse.com/#search=transition
If you go in the "issues" tab, you'll see that it doesn't work on any pseudo-elements beside :before and :after for IE10 (and others).
EDIT: As pointed out in the comments, :hover is a pseudo class, and the link doesn't say that it doesn't work for IE10. I still don't know why it doesn't work.
Have you tried removing the -ms- prefix ? Apparently IE10 supports the transition without prefix.
I have a HTML page where i have div to show help as shown in image above at bottom.
I also have combo box (select input) which is comming on top of this help div in IE 6.
For other browser and and IE6+ versions, it is working fine.
Is there any CSS hack for this issue for IE 6?
This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.
I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.
There are well-documented CSS hacks for all the versions of IE.
For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.
This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
As i know, by default IE6 will put above the other elements.
You could hide them (display: none) when this div.help is shown
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.
I have this strange issue with css hover, on chrome and safari (on opera and firefox it works just fine).
Here you can find a demo of the problem
http://cgi.di.uoa.gr/~grad1054/bug/
In chrome when the mouse is over the html area tag, it somehow misses that is continues to hover over the general div, and so the css rule for the hover is not applied.
Do you have any ideas or solutions?
Thx
The map and area tags, although not officially deprecated, are not widely used anymore. It is possible that this is a bug in the Webkit rendering engine. As far as I can see, Firefox's behavior should be correct. The solution should be rather simple - to use some other element for this.
Solution: http://jsfiddle.net/NZEXY/1/
In my solution, I used the ul list and anchors inside list items to recreate this effect, using essentially sprite techniques to recreate the same thing with the same image, and still accessible (if you're using maps your areas are suppose to have alt attributes for that purpose).
If you have any questions, feel free to drop a comment.