IE7 rendering problem

Hi everyone,

I’m having problem with a part of a web page not displaying correctly in internet explorer 7.

At the following address there’s an input field in the top right corner of the layout and directly below this is a lime green coloured div. These two elements display correctly in IE8, and other “correct” browsers but in IE7 the input field is being pushed down and then that pushes the lime green div down.

http://example.com/test/

I wondered if anyone knows why this is happening and whether there’s a workaround?

I’ve used conditional comments and have tried inserting certain rules in the ie7.css file but nothing I do fixes the problem.

Would really appreciate any help if anyone wants to offer any.

The problem is the empty legend taking up space in IE7. You said that you have set it to display:none in the css but you haven’t.:slight_smile:

If you are using it for accessibility then add the legend text for accessibility and then position it off screen absolutely.


legend{position:absolute;left:-999em}

Thanks very much for that Paul - your suggestion helped.

Just one other question regarding the layout in IE6 if that’s ok: Do you know why the links under Affiliates have all dropped down below one another? I’m assuming one of the divs needs a display: inline rule. I’ve tried it on all the divs within the #secondary-main div but it’s not working.

Do you have any suggestions?

There’s a few things causing the problem as highlighted below.


#affiliates a {
    float: left;
    height: 96px;
    margin: 0 30px 20px 0;
    padding: 10px 15px 10px 0;
    position: relative;
    width: 96px;
[B]display:inline;/* ie6 double margin bug fix*/[/B]



}


[B]#secondary-main #affiliates{zoom:1.0}   /* haslayout fix*/ [/B]

#affiliates a span {
    position: absolute;
    left: 10px;
    bottom: -25px;
    text-align: center;
    width: 100px;
    }
    
#affiliates a span#lighthouse {
    width: 120px;
    left: 0;
    }

#affiliates img {
[B]    /*padding: 18px 25px 30px 19px; makes element too wide to fit*/[/B]
    background: url(http://example.com/test/img/thumb-frame.png) no-repeat;
    }




Thanks again – I’ll go through your code. It’s quite late here so I’ll continue on in the morning.