How to use IE8.js for ie6? - javascript

My website looks great in IE8 but when i test it in IE6, it looks crappy. The alignment is off and the transparent png is not transparent. I tried to use the IE8.js by Dean Edwards but it is not working? What am i doing wrong here? Btw, the alignment problem is exactly as if i didn't have a DOCTYPE but i definitely do have. Any help please? I've validated my webpage and it is 0 error 0 warning.
My code summary:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=8">
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0
(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
<!--My other javascript files//-->
</head>
<body>
<!--html elements//-->
</body>
</html>
Any help is greatly appreciated. Thanks

I have found Dean Edwards IE scripts are not an instant relief from IE6 problems.
I would research each bug on positioniseverything.net/explorer.html, become familiar with what triggers it, and then apply the necessary fix.

Dexter, unfortunately you have stumbled into the world of IE6. You will need to employ quite a few hacks, tricks and duct tape in order to get it to behave properly.

Related

Jqmath producing strange behaviour, incorrect rendering

I am using jqmath for math rendering.Here is the complete code
<!DOCTYPE html>
<html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<meta charset="utf-8">
<script src="jquery-1.4.3.min.js"></script>
<script src="jqmath-etc-0.4.0.min.js"></script>
<title>Displaying maths</title>
</head>
<body>
<p>If $ax^2+bx+c=0$ with $a≠0$, then:
$$∰f'(x)=\lim↙{h→0}{f(x+h)-f(x)}/h$$
</p>
</body>
</html>
It is working perfectly in firefox but not in chrome 32 and IE 8.I checked the compatibility and it says jqMath is compatible with both the versions.So why it is not working?
The strange part is that the home page of jqmath is working perfectly and when I write math expressions in the text area available for practice on the homepage, that is also being rendered properly.So where is the problem?
EDIT
The symbols are appearing but are scattered.It seems the problem is only with divide-by e.g. 2/3.If I visit homepage of jqmath using same version of chrome and write the same expressions in the test area provided, they are rendered correctly.
Example1
firefox(correct)
chrome(wrong)
Example2
firefox(correct)
chrome(wrong)
jqMath uses built-in MathML in browsers that have it, namely Firefox and recent versions of Safari (webkit). Sadly I.E. and Chrome are not so advanced (though old versions of I.E. could use the MathPlayer plugin for MathML), so jqMath has to use its own .css file to help with formatting. This explains the solution you found.

Why does this HTML crash IE?

I have a page that causes IE 8 to crash. I've dumbed it all the way down to just the html/javascript that causes the crash.
I know I'm going to have to do something different for displaying the page how I want in IE without breaking it. Is anyone aware of a way that I can report this to the IE team to get it fixed?
The crash happens when you mouse over the span. Create a scratch .html file to test. Using jsfiddle doesn't crash it.
Update: Make sure IE isn't in compatibility mode to get it to crash.
Update2: It crashes in safe mode too, so it isn't an add-on causing the problem. I have tried it on multiple computers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.condPartHover
{
border-color: #000000;
background-color: #E5F0F9;
color: #1D5987;
}
</style>
</head>
<body>
<ul>
<li>
<div>Testing:
<div style="position:relative; display:inline-block; height:25px;">
<span style="position:absolute; top:0px; left:0px; border:1px solid #000000; background-color:White;" onmouseover="this.className = 'condPartHover';">test
</span>
</div>
</div>
</li>
</ul>
</body>
</html>
Is anyone aware of a way that I can report this to the IE team to get
it fixed?
Yes, go to http://connect.microsoft.com/ , enter "Internet Explorer Feedback Program" in the search box and it'll give you a link to report bugs like this to the IE team. They do read/act on them, though don't expect anything quick. Whether a bug in an old version of IE is deemed worthy of fixing I don't know though. It might be only security fixes that are still applied to IE8 nowadays, not any fix that will change the HTML rendering or Javascript behaviour.
Try with mouseOver or mouseEnter with jQuery.
$('span').mouseover(function() {
$('span').addClass("condPartHover");
});
In addition this method you are using is not HTML valid anymore.
Your doctype is incorrect and you are in quirks mode. If you must use the xhtml doctype, use this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Internet Explorer Javascript Slideshow

I have a very strange issue going on here. It's only occurring on Internet Explorer (what a surprise).
Basically I'm trying to fix a site that was given to me after some third-rate developers finished it and obviously did not test on IE.
They've setup a javascript slideshow, now on the pages with the slideshow active, the whole enclosing "body_section" div is being pushed all the way to the left. Have a look for yourselves:
http://sapaconstruction.com.au/sapa/
That's the homepage which floats everything to the left. Now on this page:
http://sapaconstruction.com.au/sapa/?page_id=4
Everything looks normal, so it must have something to do with the javascript slideshow. Here's what the javascript they've written looks like (it's embed on the page).
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/compressed.js"></script>
<script type="text/javascript">
$('homeslideshow').style.display='none';
$('wrapper').style.display='block';
var homeslideshow=new TINY.slideshow("homeslideshow");
window.onload=function(){
homeslideshow.auto=true;
homeslideshow.speed=5;
homeslideshow.init("homeslideshow","image","imgprev","imgnext","imglink");
}
</script>
Any help with this issue would be amazing, I've wracked my brain for hours trying hacks and margin fixes and things like that.
Well, I can tell you this. This site has way more problems than just that. In looking at the source, there is a div that comes before the html node. I would first of all fix that, as even in firefox, this is causing some strange things to happen. As a matter of fact, I think this "ieonly" div is what is causing the issue, as in IE this div becomes the wrapper in the body. Whoever built this site was not very familiar with cross browser design, and tried to bake in way too many IE hacks.
EDIT:
The problem was IE was in quirks mode due to the lack of a doctype. The following doctype should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript doesn't execute in Safari when placed in HEAD

I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.
I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.

Is there a way to hide the scrollbars in IE8?

do you know whether there is a way to not let the scrollbars in IE8 appear?
I've got a complete empty .html site and loaded it in IE8 and scrollbars are appearing.
I've been searching the net for a while, but couldn't find any hint. Is it solveable with CSS or do I need Javascript?
Every hint is much appreciated.
You can use the CSS overflow property to hide the scrollbars:
html, body {
overflow: hidden;
}
If your blank HTML page is standards-compliant (to some degree I suppose), IE8 will not display scrollbars. You shouldn't need any CSS. Here's a sample page that won't have scrollbars:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>
If IE8 renders the page in Quirks Mode, it will always have scroll bars. You can check exactly what rendering it's using (and test different renderings) in the Developer Tools window (press F12). The "Browser Mode" and "Document Mode" settings at the end of the menu bar will tell you.
You can try doing overflow:hidden; in your css file, in the body,html tags.

Categories