Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS and Java Script  not working in Internet Explorer 8

Posted on 2013-12-06
15
Medium Priority
?
883 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
15 Comments
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1500 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 44

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 44

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 44

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 44

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 44

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

610 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