Solved

CSS and Java Script  not working in Internet Explorer 8

Posted on 2013-12-06
15
858 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Scroll To Top 5 38
html Uncheck Checkbox 2 25
Button function on table is in trouble 3 22
javascript - insert into js doc help 2 25
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

832 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