CSS, HTML - Site displays very wrong in Internet Explorer - html

Please look at this link - http://sklepylaserowe.test.dih.pl/.
It displays well in Firefox, Chrome and Opera - but it's messed up in Internet Explorer (8 and 9). What could be a reason of it? (From list "Wybierz województwo", please select "śląskie", click "Dalej >>", and click on link that appears, to hide that overlay window)
Many basic CSS commands don't work, like:
margin:0 auto;

You are failing to start the document with a Doctype, this triggers Quirks mode in which browsers emulate the bugs of their ancient ancestors.
Not supporting auto margins for centring is one of these bugs in IE (it was fixed in IE 6).
Validate your HTML. You cannot put any tags before the Doctype.

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Change above code to
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
...

Related

using jqGrid ruins jquery-ui dialog overlay in IE8 ruins?

I know there is similar problem in the website but I can't find a proper solution for this.
I am using a jquery-ui dialog to display modal form in IE10.
But things are not working when I switched to Browswer Mode: IE8 + Document Mode: IE8 Standard and added the jquery.jqGrid.src.js to the html file (Even though i do not add a jqgrid to the html).
The problem : The dialog is behind its overlay. And that makes user unable to click anything on the dialog.
Below is my simplified code..
<!doctype html>
<html>
<head>
<script language='javascript' src='jquery-1.9.1.js'></script>
<script language='javascript' src='jquery-ui.js'></script>
<script language='javascript' src='jquery.jqGrid.src.js'></script>
<link rel='stylesheet' type='text/css' media='screen' href='themes/base/jquery.ui.all.css' />
<link rel='stylesheet' type='text/css' media='screen' href='ui.jqgrid.css' />
<script>
$(document).ready(function () {
$("#dialog-message").dialog({
modal: true
});
});
</script>
</head>
<body>
<div id='dialog-message'>
Dummy Message
</div>
Dummy Message
</body>
</html>
If I remove this line <script language='javascript' src='jquery.jqGrid.src.js'></script> the dialog shows perfectly. But in my project i need to use both jqGrid and jquery-ui dialog in the same page in IE-8.
I have tried to view the DOM elements using IE10 developer tools (F12) and find that if I include jqGrid js , the overlay div somehow has been moved to the end (the order of dialog div and overlay is swapped) maybe that gives some hints.
There is no problem with IE9, IE10, IE7 settings though.
Please help. Thank you!
Alex

html 5 tag not supporting on below ie9?

i just visited apple.com and they use some html5 tag like nav. it is working in all broswer but i i try to test html5 code it is not working in ie8 and ie7. i am not getting what is the problem how apple site working in all browser.
<!DOCTYPE html >
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html 5</title>
<style>
#header { margin:0 auto; width:980px; overflow:hidden; border:solid 1px #F00}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header id="header">adfadf</header>
</body>
</html>
older versions of IE don't treat the new HTML5 elements like header, nav, article, footer, address as "unknown" elements.
You can simply introduce the new elements to the old IE family members by using a simple JavaScript approach:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
Check out the article HTML5 Shiv and e.g. the modernizr framewoerk
HTH,
--hennson
Try to use this script to get html5 work: http://www.modernizr.com/download/
IE8 and IE7 aren't HTML5 compliant, so your code won't execute. I'm guessing the Apple site has caveats to test which browser you are using . Any control in particular you're looking to use?
It depends what you mean by “not working in ie8 and ie7”. I see you’ve got HTML5shiv in there — that should make IE recognise your <header> element at least. Is the red border showing up at least?
Bear in mind that IE (just like older versions of Firefox) won’t apply any default styles to these elements, so you’ll need to add those too, e.g.
header {
display: block;
}
Reset stylesheets like Eric Meyer’s add this CSS for you:
http://meyerweb.com/eric/tools/css/reset/

Why DHTML behavior not work in IE8 if document.write is executed in <head>?

We have a 3rd party web application which works on in IE6, but not works in IE8.
The sample code is like below, the "message from .htc" message will popup in IE6, but not popup in IE8.
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript'>
//if comment the following line, or move this script in <body>,
//then HTC will work in IE8
document.write ("<h1>document.write() in <head></h1> some calendar codes");
</script>
</head>
<body style='behavior:url(test.htc)'>
HTML Components test
</body>
</html>
test.htc
<script type='text/javascript'>
alert ("message from .htc");
</script>
Why this happened? Any compatible documents to explain this?
Solution
As #Quentin said or another expert from http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/c1f546f6-d7e1-4b46-a1c9-8f02eaf1286b said, IE8 probably make rules strictly compared to IE6, and IE8 may treat it as an corrupt HTML document.
So, I decide to to use document.createElement to create elements dynamically instead of document.write, and insert these elements to DOM after some seconds delay. After some tests, it finally worked both in this test.html and real application.
test-ie8-compatible.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript'>
function Delay_CreateCalendar()
{
var oContainer = document.createElement ("div");
var oCalendarIFrame = document.createElement ("iframe");
oContainer.appendChild (oCalendarIFrame);
document.body.insertBefore (oContainer);
}
setTimeout (Delay_CreateCalendar, 2000);
</script>
</head>
<body style='behavior:url(test.htc)'>
dhtml HTC 测试
</body>
</html>
Presumably, despite the namespace, you are serving the document as text/html. In HTML the start and end tags for the head and body element are optional. H1 elements are not allowed inside the head.
Thus, when you document.write and H1 inside the end, you trigger the end of the head and the start of the body.
I assume that IE then ignores the start tag for the body element as it would create a second body (which also isn't allowed).

webshim polyfill localStorage undefined in IE6

When I run the following code in an IETester IE6 window:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$.webshims.polyfill('json-storage');
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
//]>
</script>
</body>
</html>
I get the following error in a popup dialog:
Line: 15
Char: 7
Error: 'localStorage' is undefined
Code: 0
URL: http://localhost/problem2.html
The code works fine in IE9 running in IE7 mode.
When I change to use Douglas Crockford's JSON2.js and Remy Sharp's storage polyfill --upon which this is supposedly based-- I do not have the problem.
Please help?
I received an email from the author (Alexander Farkas) explaining that the code using the polyfill must be inside a domready event handler, such as the following:
$.webshims.polyfill('json-storage');
$(function(){
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
});
For more information:
http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
IE6 doesn't support HTML5 features at all. This is not very surprising for an ancient browser that should already be dead and buried (IE6 was released in the year 2001, and the foundations for HTML5 were only laid in 2004). See this answer for more details.
Note that there are wrappers which are capable of emulating such functionality - e.g. this question suggests jStorage for compatibility with IE6+.

A simple HTML page with content, but get blank page in Chrome 6.0.472.53

I am developing a ASP.Net web site and my page works normally in IE/Firefox/Opera
This is the page source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Content Navigation
</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
</head>
<body>
dd222222222222222222222
<div id="content-tree">
</div>
</body>
</html>
It is simple, isn't it? But in my Chrome 6.0.472.53, I always get a blank page, just a blank page, nothing else.
After click the "Inspect Element" in context menu, here is the HTML DOM structure I see
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>
Content Navigation
</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script></head></html>
Hmmm, the body is gone!
If I remove the jquery js reference line, body comes back
Is this a bug in Chrome or mine? my web host is IIS7.1
Thank you for any help
Update:
I have reported this issue to Chrome Help
And here is the screenshot:
Correct: http://img128.picfoco.com/img.php?id=1274578614&q=&jump=5176678858&ru=
Incorrect: http://img122.picfoco.com/img.php?id=778329008&q=&jump=4680429165&ru=
Not really sure, I can't replicate the issue in my Chrome build. Can you try replacing your jQuery ref to the following from the Google repository? If it does the same, possibly try degrading to 1.3 and see if that produces the same results.
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
I find the reason now
because there is a "Connection:Close" in the response HTTP HEAD, and it only affects Chrome
After remove this head, everything is fine