I'm not really sure it has anything to do with the contents of the floating <div>s, because none of them move around. When I move my mouse over a hyperlink, then all floating <div>s following the one containing this link move a little.
Maybe shrinking isn't the most accurate term to define my problem. How about compacting? To me it appears like IE performs some corrections on the page-layout when I hover my pointer over a hyperlink.
yes, an excellent description!
The shrinking/compacting only occurs once, depending on relative position of the <div> containing the link I'm hovering my pointer over. If it's the first, then everything compacts at once. If I work my way back from the last floating <div> to the first, then all <div>s following the one I'm currently at will compact a little.
It's the IE6 percentages bug on margins, see http://www.positioniseverything.net/explorer/percentages.html
time is rare, so here is a short explanation:
the page structure is like:
html:
<body>
<div id="page">
<div class="float">...</div>
...
</div>
</body>css:
#page { margin: 0pt auto; width: 600px; }
* html div.float { margin: 0pt 0.5% 0.5% 0pt; }assume the browser window is sized to 1000px;
IE6 in standards mode doesn't calculate the margin-right:0.5% with respect to the parent (#page) but with respect to the grandparent (body)
margin-right:0.5% * 1000px =5px
Any hover-transition with a change of the background induces a reflow of the container: the elements in this container are redrawn: this happens after all the elments are known in their dimensions.
You know that IE6 expands a container (width: 100px) when a child (width:110px) is wider: the container is expanded by an "intrinsic" width. So, after rendering this example, the parent has a width of 110px. IE has different thinking of when a width is determined.
%-margins have a referring problem: as long as the page is rendering, they refer to the ancestor, and after the page is drawn, they refer to the parent (%-paddings have similar, but worse problems).
Now, a hover-transition forces a reflow with the known dimensions of all elements in the neighborhood.
margin-right:0.5% * 600px =3px
you have encountered a jump on hover by 2px.
---
your css fix
div.float { margin: 0pt 1% 1% 0pt; ...}
* html div.float { margin: 0pt 0.5% 0.5% 0pt; }shows that you was probably designing this page at a 1280 px screen, so this star html hack was maybe used to fix the miscalculation of
1% x 600px.
a fix would be: delete this hack, and double-wrap the page
<body>
<div id="pagewrapper">
<div id="page">
<div class="float">...</div>
...
</div>
</div>
</body>#pagewrapper { margin: 0pt auto; width: 600px; }
#page { width: 600px; }I know this is a pain to see (but this is the wsg list, so I can't seriously promote quirks mode or expressions). For complaints, please write directly to the IE7 dev team.
Ingo
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
