Why does this HTML crash IE? - javascript

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">

Related

Floating DIV in quirks mode

Im working with a very badly coded CMS which only works in Quirks Mode and I want to place a floating div at the right bottom of the page. I've spent the last 2 hours searching for a possible way to do this. Normally I would just: Position:fixed; but this won't work in Quirks Mode.
Is it possible to do with javascript?
If, then how?
Have you tried to change the DOCTYPE? How to get "position:fixed" css to work in IE 7+ with TRANSITIONAL doctype?
And using HTML5 doctype?
<!DOCTYPE html>
Have you tried an absolute position instead? Having the div as a child of the body tag.
Quirks mode in IE 7 can also be triggered when coding HTML 4.01 documents. Inserting a comment before the DTD will trigger this backwards compatible mode in both IE 6 and IE 7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and It isn't always obvious which rendering mode a browser is in. In IE address line, type in
javascript:alert(document.compatMode)
Thanks,
Brendon

rounded corners with plugin to an image in IE 7?

Finally i convinced to my boss not to use rounded images anymore,
So i want to convert all of them into html with css border-radius. The problem is that we still need support with Internet Explorer 7, and the solution seems to be in this jquery plugin.
the thing is that in the oficial website works fine with IE even 6. but i can only get it work in Firefox or Chrome (wich is useless cause they already support border-radius)
this is how i'm trying,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.rounded5').corner();
});
</script>
</head>
<body>
<img src="http://images.wikia.com/logopedia/images/d/dc/TRYP_by_Wyndham_logo.png" style="width:50%;" alt="trip" class="rounded5" />
</body>
</html>
this is the proof http://jsfiddle.net/MKvHu/2/
Any idea what i'm missing?
thanks!!
why don't you try CSS3PIE ?
It's not made explicitly clear, but it doesn't look like the plugin can round the edges of img elements:
It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item.
This means that you can only have a rounded frame of a solid color around the image using this plugin.
The reason it appears to work in Chrome and Firefox is because they support border-radius natively, which does work on img elements. However, if you change the type of corner to something else like bevel, you can see that it is not supported in any browser:
http://jsfiddle.net/namuol/MKvHu/4/
Notice how it works for the div below, but not the img. So, unfortunately you may want to stick with statically-rounded images if IE7 users need images to be rounded.

How to use IE8.js for ie6?

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.

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