I am still getting problems with IE,
Aaron,
Right here, at this point, it is utterly important to identify the
browser version. There are lots of differences between IE 6 and IE 7
and between IE 7 and IE 8. If you're having a problem with (only) IE
6, then I recommend to just forget about it and add a link to
browserhappy.com or to a few of the many (over 100) websites
campaining to stop supporting IE 6.
e.g.
http://www.ripie6.com/
http://www.goodbyeie6.org.ua/
http://www.ie6nomore.com/
http://mashable.com/2009/07/16/ie6-must-die/
the whole page is being pushed
down when in narrow width on IE, but not on any other browsers. Its > like the z-index stuff is colliding with the normal div's :-
http://www.aarongray.org/comp.lang.javascript/Test/test1.html
1-
Your doctype declaration is triggering backward-compatible rendering
mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
You should use instead
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
TR/html4/strict.dtd">
ensuring that you trigger web-standards compliant rendering mode in IE
7 and IE 8 and in all non-IE browsers.
2-
Line 31: width: expression( document.body.clientWidth >=900 ?
"900px" : (document.body.clientWidth <= 700 ? 700 :
document.body.clientWidth));
Dynamic expression has been deprecated in IE 8. If you code your
webpage accordingly, you should not need/require to calculate the
browser window viewport. Creating a scalable design is the best
solution here; relying on a normal flow (and not a constrained one) is
best solution. What I'm trying to say here is that you may not need to
even bother about what the size of the browser viewport width is...
Relying on proprietary tricks like expression is exactly the kind of
feature that can (and often will) create different rendering between
IE (all versions) and non-IE browsers. My recommendation: avoid
expression everywhere.
3- z-index can only apply to non-static element (eg position:
absolute). In your code you have none. And you have no z-index
declarations, only one in your js script.
My guess is that your webpage problem is related to float and to over-
constraining your webpage design.
I checked your whole webpage code and I am sure that you can safely
remove z-index and zIndex everywhere. Your issue has to do with
floating and horizontal constraining (too tight squeezing of floated
elements - too tight for IE 7). z-index has no influence, no effect on
floated elements.
4- test.js
function test() {
var tag = document.createElement("div");
tag.style.zIndex = 101;
If such div is not positioned in a non-static manner, then
tag.style.zIndex = 101; will just be ignored.
tag.style.cssFloat = "right";
cssFloat is not supported by IE (all versions).
tag.style.styleFloat = "right";
styleFloat (non-standard) is only supported by IE (all versions). So,
your code makes sense here.
tag.style.width = 16;
tag.style.height = 16;
width and height declared dynamically must be using a CSS unit suffix
(like px or em or cm, etc). This for sure will create execution
errors.
https://developer.mozilla.org/en/Us...DOM#Changing_an_Element's_Style_Using_the_DOM
tag.style.width = "16px";
tag.style.height = "16px";
is possibly what you should be coding instead for best compatibility
and forward-compatibility.
var image = document.createElement("img");
image.src = "tag16.gif";
image.style.zIndex = 101;
Same thing here. If the image is not positioned anyway, then setting
its z-index dynamically won't do anything.
tag.appendChild( image);
document.body.insertBefore( tag, document.body.firstChild);
}
If the image has to be floated, then wrapping it inside a div (your
tag) is probably not necessary.
5-
<body style="margin:0; border:0; padding:0;">
<title>Three Columns with Maximum and Minimum Width Center</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
- You can safely remove border:0; padding:0; for the body node.
- Put the <title> element inside the <head>. Just by validating your
markup code (
http://validator.w3.org/ ) , you can often avoid layout
problems. Strictly speaking, your markup code says that <title> node
is your body's first-child and you're asking your javascript code to
deal with it. So, you can see, you may be causing the problem here.
- text-align: center; is an inheritable property. So, other
descendants (containment hierarchy) won't need to have text-align
redeclared. You redeclared text-align: center for #container
6-
#header {
margin: 0px;
height: 100px;
border: solid 1px;
}
You can safely remove margin: 0px; for #header. By default, there is
no margin on generic div elements in all browsers.
7-
Finally, please explain why you need to dynamically DOM-insert that
tag16.gif image into your webpage. Often, but not always, layout
problems can be avoided by avoiding DOM-insertion of elements in IE 7+
versions.
regards, Gérard
