Weird CSS issue in IE7

Question

Hi, I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:

1. Go to this site (spanish).
2. On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
3. The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.

I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!

Answer 1

Hi,

I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:

#prevparties_middlerow
{
    float:left;
    width:150px;
}

one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:

<div id="prevparties_left"/>
<div id="prevparties_contentBox">
     content
</div>
<div id="prevparties_right" class="boxmiddle"/>

you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:

<div id="prevparties_contentWrap">
    <div id="prevparties_contentBox">
         content
    </div>
</div>

the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D

anyways, hope this helps.