Link to home
Start Free TrialLog in
Avatar of rsbgroup
rsbgroupFlag for United States of America

asked on

CSS and Java Script not working in Internet Explorer 8

I have prepared an internal web portal by using HTML, CSS, and  Script .It is working fine in chrome ,mozilla and safari but when I am running it in IE 8 it is not working.

1. The problem is that background images are not sliding and also we are not able to see a single image. For sliding of images we have used CSS animation function.The whole CSS file(style1.css) is attached with our question

2. Also the drop down list on header is not coming and also in footer the same problem is there. For drop down we have used Java Script  on mousehover.

The following code is used for drop down for the header part on mousehover.

function hide(node)
function show(node)


Open in new window

The following code is used for footer part on mousehover by using  jquery.min.js




Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ChrisStanyon is correct about animation and IE8. IE8 doesn't support CSS3 at all. However, you appear to be using jQuery's animate function instead of CSS3. Which version of jQuery are you using? If your jQuery version is 2.x, it is not supported in IE8. Earlier versions of jQuery are, though, according to the jQuery documentation.

Regarding your drop-down for the header, your javascript code appears to be OK if it is being supplied the correct argument. We'll need to see how it's implemented. Beware of using the "this" object. It isn't always what you expect "this" to be.

As ChrisStanyon said, we "can't really comment on all your problems without seeing your page in action." Please post a link to your page.
Avatar of rsbgroup


Thanks for your reply,
xmediaman, i am used following code for drop-down (hide & show function is in question):-

<li id="flip1" class="hovercolor" onMouseOut="hide(panel1)"onMouseOver="show(panel1)"><div style="padding-top:7px"><a class="hovertextcolor" style="text-decoration:none">Information Technology</a></div>
		<li id="panel1"style="margin-top:23px;width:970px;height:250px" onMouseOut="hide(this)" onMouseOver="show(this)">

Open in new window

And i am used jQuery v1.10.2 for footer. it's working in ie8 after allowing Script & activx. but we required it before allowing block contents.
according to your code block it could not work as
- depending on your HTML doctype HTML dom attributes could be CaSe sensitive (like Javascript) hence it is prefered that your code should more look like this
onMouseOut -> onmouseout
onMouseOver -> onmouseover
- you do not pass a dom element to the subfunction

<li id="flip1" class="hovercolor" onmouseout="hide(document.getElementById('panel1'))" onmouseover="show(document.getElementById('panel1'))"><div style="padding-top:7px"><a class="hovertextcolor" style="text-decoration:none">Information Technology</a></div>
		<li id="panel1"style="margin-top:23px;width:970px;height:250px" onmouseout="hide(this)" onmouseover="show(this)">

Open in new window

See the reference list here:

You're using jQuery so best-practice is to make your JS unobtrusive. Instead of setting the onmouseover() and onmouseout() event handlers 'inline', you bind the events when the page loads, keeping the HTML clean. jQuery has a hover() method that binds both events, so in your $(document).ready() code, something like this:

   function() { $('#panel1').show() },
   function() { $('#panel1').hide() }

Open in new window

This obviously only works for a specific element based on it's ID. If you need a more generic one, then you can use class names instead.

FYI - IE8 won't ask for permission to run jQuery. If your page is asking for permission to run an ActiveX control, then there's something else going on in your page.
I have tried various codes and at the last I have got a solution.Now our webpage is running properly in IE8.

But the problem is that at the time of running the webpage  in IE8 it gives a popup for allowing the script and the activex. Only after allowing that our webpage is running properly.
So there is any code for automatically running the webpage without that popup.

Any answer to this query of ours would be greatly welcomed.
IE will give you a security warning for unsigned or unverified ActiveX controls - and you can't do anything about from the server end - it has to be allowed at the client end.

Best bet is to remove ActiveX controls!

What are you using them for?
If I am not allowing scripts & activex then sliding background images & footer(hover) is not working.

I am using some .js file for sliding background images:

2) jquery.imagesloaded.min.js
3) cbpBGSlideshow.min.js
4) modernizr.custom.js

And for footer(hover):
The warnings you're getting have nothing to do with javascript or your jQuery scripts. They're because you are including ActiveX controls - they're 2 very different things. You will have no problems loading the javascript, so leave those in - just remove the ActiveX controls!
As I have given above , I have only used js for the header and footer part.
For the header part as well as footer part I havent used any Activex control. But still it is asking to allow  activex control. As far as my knowledge I am not using any activex control anywhere in the code.

Please help us in this regard.
If you're getting a warning about ActiveX controls then that's a fair indication that you are using ActiveX controls.

You're not showing us your page so it's up to you to find it.

Show us the exact error message and we may get more of an idea
I have resolved that activex issue. Now I want to ask that I want different lines of text to appear over the  sliding images that is  one line for one image and it should disappear with that image and then another line for another image etc.

I have tried several codes but it is not showing in IE8 whereas in chrome it is working fine.

One of the following code  I tried :

<span style="position: relative;">
<img src="img" alt="img"/>
<span style="position: absolute; top: 3px left: 3px;">Hello everybody</span>
But in IE8 it is not working.Please help.
This is really getting into a different question. The original question has been answered and your new problem is more about CSS layout than Javascript not working.

You should close this question off and ask a new one in the CSS zone.

When you do, you will really need to show as much info as you can, preferably with a link to a page that demonstrates the problem. If your main application is on an Intranet, then maybe create a demo page that we can see that highlights the problem.

And try to be as specific as you can about what the problem is - Just saying it's not working is not very helpful - be precise about what's not working.

Just as a starter, you have a missing semi-colon between the top and left CSS:

top: 3px; left: 3px;

And you should set you <img> position as well. Have a look here:
Here I am uploading the complete code of image sliding. It is working fine in other browsers but  in IE there is a problem.

I have used six images for sliding but in IE8 , when I run the page first time then directly sixth image is displayed and it  take delay time of all the six images together but after that the image sliding works properly like other browsers.

When this problem will be solved then I am looking for text sliding over the images.

Please find the attached code of image sliding and its css.