IE7 Resize Problem

[zenthoef]

I am having a frustrating problem with IE7. I have a set of images that load in the proper place when the page loads in IE7. Then, if you resize the browser in any way the images do not move, but the rest of the page moves with the browser resize. This causes the images to go over other items on the page instead of staying where they should when the resize occurs.

Does anyone have an idea about what the difference between Mozilla and and IE7 is that makes this type of problem occur? Anything I should look into or try to make the images "stick" to their proper place during a resize in IE7?

Thanks.

[Fang]

The use of positioning could cause this.
Without code or link it's all guesswork.

[zenthoef]

Understanable. Here is the code that is acting weird:


<div class="floatArea1">
<div class="genericBorder" style="overflow:hidden; width:480px; height:280px;">
<div id="imageMenu" style="overflow:hidden; float:left;">
<ul>
<li class="featured1"><a href="/index.php?act=play&amp;id=425" onmouseover="activate1('title')" onmouseout="deactivate1('title')">featured1</a>
</li>

<li class="featured2"><a href="/index.php?act=play&amp;id=504" onmouseover="activate2('title')" onmouseout="deactivate1('title')">featured2</a>
</li>

<li class="featured3"><a href="/index.php?act=play&amp;id=511" onmouseover="activate3('title')" onmouseout="deactivate1('title')">featured3</a>
</li>

<li class="featured4"><a href="/index.php?act=play&amp;id=101" onmouseover="activate4('title')" onmouseout="deactivate1('title')">featured4</a>
</li>

<li class="featured5"><a href="/index.php?act=play&amp;id=27" onmouseover="activate5('title')" onmouseout="deactivate1('title')">featured5</a>
</li>
</ul>
</div>
<div>
<img src="featured/title0.jpg" alt="Featured Games!" name="title" width="480px" height="50px"/>

</div>
</div>

<script type="text/javascript">window.addEvent('domready', function(){var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:300, border:2, onOpen:function(e,i){window.location=(e);}});});
</script>

</div>


Here's the associated CSS:


.floatArea1{
float:left;
margin-left: 10px;
font-weight: normal;
width: auto;
padding:0px;
}

.genericBorder{
background-color:#1D1D1D;
border: 1px solid #FFF;
padding:5px;
width: auto;
}


note that the id called imageMenu is only used for the javascript rollover. i don't have any CSS for it.

Thanks.

[Fang]

No problems with this example. The image remains in place.
Remove the units from the image height/width, they are invalid.