Solved

CSS and Java Script  not working in Internet Explorer 8

Posted on 2013-12-06
15
844 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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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 21

Expert Comment

by:Kim Walker
Comment Utility
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
Comment Utility
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
 
LVL 44

Expert Comment

by:Rainer Jeschor
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:rsbgroup
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now