Forum Moderators: not2easy
I have a red square here that is behaving differently on IE 6/7 than on FF/Chrome/SF.
FF/Chrome/SF Behavior (Desired Behavior): Red square scrolls along with other contents when div is scrolled.
IE 6/7 Behavior (Bad): Red square stays static on the screen when all other contents scroll.
Anyone have an idea why the red square doesn't move on IE?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style>
#sorting-container {
padding:10px;
overflow: auto;
width:930px;
height:420px;
border:1px solid #666666;
}
#sorting-container > div {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
background-color: black;
}
</style>
</head>
<body>
<div id="sorting-container">
<!-- The following block of code just repeats to illustrated the scroll issue -->
<div >
<div style="position: relative; ">
<div style="position: absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
</div>
</div>
</div>
<!-- The following block of code just repeats to illustrated the scroll issue -->
<div >
<div style="position: relative; ">
<div style="position: absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
</div>
</div>
</div>
<!-- The following block of code just repeats to illustrated the scroll issue -->
<div >
<div style="position: relative; ">
<div style="position: absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
</div>
</div>
</div>
<!-- The following block of code just repeats to illustrated the scroll issue -->
<div >
<div style="position: relative; ">
<div style="position: absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
</div>
</div>
</div>
</div>
</body>
</html>
2) An id can only be used once per page, but id="preview_1" and #preview_div are each used five times in the sample.
W3C - Element identifiers.id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.A class should be used instead. I would recommend validating the HTML and CSS before hunting down the problem.
<div id="preview_div"> is used four times in just the sample. You cannot use id for this. Change to class. The document does not validate.
id usage:
Error Line 50, Column 10: ID "preview_div" already defined<div id="preview_div">
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Character encoding:
Warning No Character Encoding Found! Falling back to UTF-8.None of the standards sources gave any information on the character encoding labeling for this document. Without encoding information it is impossible to reliably validate the document. As a fallback solution, the "UTF-8" encoding was used to read the content and attempt to perform the validation, but this is likely to fail for all non-trivial documents.
Read the FAQ entry on character encoding for more details and pointers on how to fix this problem with your document.
W3C validator does not like the DTD as it used.
Error Line 2, Column 1: Missing xmlns attribute for element html. The value should be: [w3.org...]<html>
Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Validating the code will probably not fix the problem, but it is, IMO, a mistake to work with markup with known, esasily correctable, issues.
If the issue is not resolved before I get back to it, my first attack will be to validate the document. Then, and only then, will look at the problem; presuming it remains.
However, it does simplify, and that is a good place to start. The boxes scroll correctly in IE7 (6 & 8 not tested).
Note that commenting #sorting-container > div { in and out of the markup completely changes the rendering - though it is scrolling correctly either way. You will want to be careful with the child selector and be sure that it is used appropriately.
Removed all of that relative/absolute positioning, because it was certainly the root of the problem. Whether it is needed and will need to be restored in some fashion is unclear. The only way to determine the optimum option for markup is to know exactly what is going to be inside those boxes. You will need to put back the little blue box,the three item list, and add whatever else goes in there before workable markup can be determined.
<!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>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#sorting-container {
padding:10px;
overflow: auto;
width:930px;
height:420px;
border:1px solid #666666;
}
/**********
#sorting-container > div {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
background-color: #000;
}
*/
.inner-box {
float: left; width: 300px; height: 300px; background-color: teal; border: 1px solid #ccc;
}
.top-red-box {
width: 20px; height: 20px; background-color: red;
}
</style>
</head>
<body>
<div id="sorting-container">
<div class="inner-box">
<div class="top-red-box">
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
</div>
</div>
<!--##########
I have a page that contains a scrollable div, in which is a set of floated-left wrapped components:- a container div (black)
- a background image (white)
- two images imposed on the background image (red and blue)
- some text relating to the blue image.The expected behavior is how this works in FF/chrome/safari, etc. All wrapped components move with each other when the
scrollable div is scrolled.
The issue is that on IE6/7 (and I have some reports of the issue on IE8 too, though I can't reproduce) the red and blue boxes
along with the text stay fixed on the screen while the container and background images move.
....................................................
Note: This is a cleaned-up version of:
[webmasterworld.com...]I have a red square here that is behaving differently on IE 6/7 than on FF/Chrome/SF.
FF/Chrome/SF Behavior (Desired Behavior): Red square scrolls along with other contents when div is scrolled.
IE 6/7 Behavior (Bad): Red square stays static on the screen when all other contents scroll.
Anyone have an idea why the red square doesn't move on IE?
-->
</body>
</html>
<!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>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#sorting-container {
padding:10px;
overflow: auto;
width:930px;
height:420px;
border:1px solid #666666; position: relative;
}
/**********WHY?
#sorting-container > div {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
background-color: #000;
}
*/
.inner-box {
float: left; width: 300px; height: 300px; background-color: teal; border: .1em solid #ccc; position: relative;
}.top-red-box {
width: 20px; height: 20px; background-color: red; position: absolute; top: 0; left: 0;
}.top-blue-box {
width: 20px; height: 20px; background-color: blue; position: absolute; top: 0; left: 20px;
}.subtool {
background-color: #fff; border: .1em solid #000; padding: .2em; position: absolute; top: 20px; left: 20px; width: 35%;
}
margin
</style>
</head>
<body>
<div id="sorting-container">
<div class="inner-box">
<div class="top-red-box">
</div>
<div class="top-blue-box">
</div>
<div class="subtool">
<a href="#" >Rotate 180</a>
<br />
<a href="#" >Rotate 90</a>
<br />
<a href="#" >Rotate 270</a>
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
<div class="top-blue-box">
</div>
<div class="subtool">
<a href="#" >Rotate 180</a>
<br />
<a href="#" >Rotate 90</a>
<br />
<a href="#" >Rotate 270</a>
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
<div class="top-blue-box">
</div>
<div class="subtool">
<a href="#" >Rotate 180</a>
<br />
<a href="#" >Rotate 90</a>
<br />
<a href="#" >Rotate 270</a>
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
<div class="top-blue-box">
</div>
<div class="subtool">
<a href="#" >Rotate 180</a>
<br />
<a href="#" >Rotate 90</a>
<br />
<a href="#" >Rotate 270</a>
</div>
</div>
<div class="inner-box">
<div class="top-red-box">
</div>
<div class="top-blue-box">
</div>
<div class="subtool">
<a href="#" >Rotate 180</a>
<br />
<a href="#" >Rotate 90</a>
<br />
<a href="#" >Rotate 270</a>
</div>
</div>
</div>
</body>
</html>
