I am having trouble with a jQuery project I am working on. I can't reveal a lot about it but what it basically consists of is a list that contains elements that are styled (display: block; float:left) to produce a liquid layout resembling a table.
I need to be able to animate the elements in the container with jQuery. In order to set up for the animation I get the current width and height of the containing list and then explicitly apply them with the $().width and $().height functions so the container wont collapse when I change the contained elements. Once the size of the container is explicitly set the top and left of each contained element is explicitly set to their offsetTop and offsetLeft positions. Finally all the elements are set position: absolute to make them ready for animating. The only problem is that in IE the container ends up one whole column narrower than intended under certai ncircumstances. If I've got elements that are 100px across with a 1px border and 2px or margin, then each element takes up 106px of space horizontally. If theter are 7 elements across then the result would be 742px width for the container. Firefox and IE compute this properly but IE ends up computing the width needed as 636px! I tried the dimensions plugin but that was of no help. The problems happen in IE5.5, 6 and 7.
