1. Home
  2. Forums Index
  3. Browser Side / CSS 7:22 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Div positions floating and scrolling - IE6/7

Some divs move, some don't.

         

kjsdesigns

8:55 pm on Sep 28, 2009 (gmt 0)

10+ Year Member



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.

Any help would be appreciated.

Thanks,
Keith 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
div#attachment-nav div {
display:inline;
color: #444444;
background: #eeeeee;
padding:3px;
padding-right:5px;
padding-left:5px;
border: 1px solid #999999;
text-decoration:none;
font-weight: bold;
float: left;
margin-right: 5px;
margin-bottom: 1px;
}
div#attachment-nav div a:hover {
text-decoration: underline;
}
div#attachment-nav div.active-nav {
background:#bbbbbb;
color:#ffffff;
}
#sorting-container {
padding:10px;
overflow: auto;
width:930px;
//height:420px; - allow window to stretch in height to avoid icon positioning issues in IE
border:1px solid #666666;
}
#sorting-container > div { 
float: left; 
margin: 4px; 
padding: 4px; 
border: 1px solid #ccc; 
}
#sorting-container div[state="U"] {
}
#sorting-container div[state="V"] {
background: #005826;
}
#sorting-container div[state="R"] {
background: #9e0b0f;
}
#sorting-container div[state="N"] {
background: #f26522;
}
#sorting-container div[state="M"] {
background: #000000;
}
.doc_list_active {
border: 1px solid #FF0000 !important;
}
#preview_div {
display:inline;
float:left;
}
#tools_div {
display:inline;
float:left;
}
.subtool_div {
position:absolute;
background-color:white;
border:1px solid #666666;
padding:2px;
}
</style>
</head>
<body>
<div id="sorting-container">
<div id="preview_1" state="V">
<div style="position:relative;" z-index="99999">
<div style="position:absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
&nbsp;
</div>
</div>
<div id="tools_div">
<div style="width: 20px; height: 20px; background-color: blue;">
&nbsp;
</div>
<div class="subtool_div" id="subtool_div_1">
<a href="#" >Rotate&nbsp;180</a>
<br>
<a href="#" >Rotate&nbsp;90</a>
<br>
<a href="#" >Rotate&nbsp;270</a>
</div>
</div>
</div>
</div>
<div style="cursor:pointer" onClick="select_page(1);return false;">
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
<div id="preview_1" state="V">
<div style="position:relative;" z-index="99999">
<div style="position:absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
&nbsp;
</div>
</div>
<div id="tools_div">
<div style="width: 20px; height: 20px; background-color: blue;">
&nbsp;
</div>
<div class="subtool_div" id="subtool_div_1">
<a href="#" >Rotate&nbsp;180</a>
<br>
<a href="#" >Rotate&nbsp;90</a>
<br>
<a href="#" >Rotate&nbsp;270</a>
</div>
</div>
</div>
</div>
<div style="cursor:pointer" onClick="select_page(1);return false;">
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
<div id="preview_1" state="V">
<div style="position:relative;" z-index="99999">
<div style="position:absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
&nbsp;
</div>
</div>
<div id="tools_div">
<div style="width: 20px; height: 20px; background-color: blue;">
&nbsp;
</div>
<div class="subtool_div" id="subtool_div_1">
<a href="#" >Rotate&nbsp;180</a>
<br>
<a href="#" >Rotate&nbsp;90</a>
<br>
<a href="#" >Rotate&nbsp;270</a>
</div>
</div>
</div>
</div>
<div style="cursor:pointer" onClick="select_page(1);return false;">
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
<div id="preview_1" state="V">
<div style="position:relative;" z-index="99999">
<div style="position:absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
&nbsp;
</div>
</div>
<div id="tools_div">
<div style="width: 20px; height: 20px; background-color: blue;">
&nbsp;
</div>
<div class="subtool_div" id="subtool_div_1">
<a href="#" >Rotate&nbsp;180</a>
<br>
<a href="#" >Rotate&nbsp;90</a>
<br>
<a href="#" >Rotate&nbsp;270</a>
</div>
</div>
</div>
</div>
<div style="cursor:pointer" onClick="select_page(1);return false;">
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
<div id="preview_1" state="V">
<div style="position:relative;" z-index="99999">
<div style="position:absolute;">
<div id="preview_div">
<div style="width: 20px; height: 20px; background-color: red;">
&nbsp;
</div>
</div>
<div id="tools_div">
<div style="width: 20px; height: 20px; background-color: blue;">
&nbsp;
</div>
<div class="subtool_div" id="subtool_div_1">
<a href="#" >Rotate&nbsp;180</a>
<br>
<a href="#" >Rotate&nbsp;90</a>
<br>
<a href="#" >Rotate&nbsp;270</a>
</div>
</div>
</div>
</div>
<div style="cursor:pointer" onClick="select_page(1);return false;">
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
</div>
</body>
</html>

D_Blackwell

12:41 am on Sep 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Don't have a solution for the problem, and haven't really looked for one yet, but a couple of things jump out.

1) //height:420px; - allow window to stretch in height to avoid icon positioning

The two slashes should be removed from the CSS and the comment should be enclosed /*Comment"/
W3C - Comments [w3.org]

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 [w3.org].

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.

3) There is a large proportion of inline CSS. I would reconsider the HTML and/or CSS structure. There is more presentation in the HTMl than structure.

4) There is no CSS declaration for #preview_1. Should there be?

kjsdesigns

12:55 am on Sep 29, 2009 (gmt 0)

10+ Year Member



Thank you for the reply Blackwell.

Ya, there's lots of extra bulk here - partially just to illustrate the issue (needed to make it scroll), and partially because the interface is full of substantial AJAX functionality that I've stripped out.

My best lead on resolution relates to the z-index...

D_Blackwell

12:56 am on Sep 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



PS - All five of these inline declarations are incorrectly formatted.

<div style="position:relative;" z-index="99999">

Correct is:
<div style="position: relative; z-index: 99999;">

I would still take a very hard look at the large amount of presentation markup in the HTML. The need for z-index; is unclear.

Needs a lot of clean up before being worth looking at any further.

kjsdesigns

1:42 am on Sep 29, 2009 (gmt 0)

10+ Year Member



Those quotes could be a factor - I'll clean that up in the morning and see how it looks.

Thanks,
Keith

kjsdesigns

12:27 pm on Sep 29, 2009 (gmt 0)

10+ Year Member



Alright - see below a cleaner version.

I also tested with and without z-index - still no change, so I left z-index out this time. 


<!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;">
&nbsp;
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</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;">
&nbsp;
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</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;">
&nbsp;
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</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;">
&nbsp;
</div>
</div>
</div>
</div>
<div>
<div style="width: 300px; height: 300px; background-color: white;">
&nbsp;
</div>
</div>
</div>
</div>
</body>
</html>

kjsdesigns

2:59 pm on Sep 29, 2009 (gmt 0)

10+ Year Member



Reviewing this thread - there's a lot of noise here (from me) and I apologize. - I'm creating a fresh thread for clarity, see:

[webmasterworld.com...]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 7:22 pm May 1, 2026