Solved

CSS and Java Script  not working in Internet Explorer 8

Posted on 2013-12-06
15
856 Views
Last Modified: 2014-02-24
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)
{
node.style.display='none';
}
function show(node)
{

node.style.display='block';

}

Open in new window


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

$(document).ready(function(){
	

  $("#footerhover").hover(function(){
    $("#footerhover1").animate({
      bottom:'0px',
      height:'250px',
      width:'970px'

    });
  });
});

Open in new window

style1.css
0
Comment
Question by:rsbgroup
15 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39700760
Can't really comment on all your problems without seeing your page in action, but as for the CSS. IE8 is an old and out-of-date browser and won't support CSS3.

If you need to support IE8, then make your site simpler (drop animations and all CSS3 code).

If you want to keep the animations etc, then drop support for IE8
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39700962
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.
0
 

Author Comment

by:rsbgroup
ID: 39705496
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>
		<ul>
		<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.
0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39705631
Hi,
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>
		<ul>
		<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:
http://www.w3schools.com/jsref/dom_obj_event.asp

HTH
Rainer
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39706392
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:

$('#flip1').hover(
   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.
0
 

Author Comment

by:rsbgroup
ID: 39716279
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716293
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?
0
 

Author Comment

by:rsbgroup
ID: 39716399
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:

1) https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
2) jquery.imagesloaded.min.js
3) cbpBGSlideshow.min.js
4) modernizr.custom.js

And for footer(hover):
<script>
$(document).ready(function(){
  $("#footerhover").hover(function(){
    $("#footerhover1").animate({
      bottom:'0px',
      height:'250px',
      width:'970px'
    });
  });
});
</script>
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716440
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!
0
 

Author Comment

by:rsbgroup
ID: 39718344
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39718614
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
0
 

Author Comment

by:rsbgroup
ID: 39725831
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>
</span>
But in IE8 it is not working.Please help.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39726246
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:

http://jsfiddle.net/ChrisStanyon/r6uCE/
0
 

Author Comment

by:rsbgroup
ID: 39728422
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.
intextest.html
component.css
jquery.min.js
cbpBGSlideshow.min.js
jquery.imagesloaded.min.js
modernizr.custom.js
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question