I am having some really weird problems with my float based layout in ie7 mainly relating to browser window resize.

problem 1) if i scroll the window down and then back up any borders that go offscreen dissapear, and will not re-appear without a refresh. There is a sharp line where the edge of the browser window effectively "chops" the border. Why would half of a single vertical border render and not the rest - but then come back after a refresh? This makes less sense to me than if it were not showing up at all.

problem 2) i have used a nested float layout and the contents of my "wrapper" do not stay inside their fixed width centered ( margin: o auto; ) parent div after a browser window resize - they behave as if they have position: fixed; (they don't) staying in the same place in the browser window while the parent div moves out from underneath them. Some of the divs have position: relative applied to them because i needed a z-index added.
Once again this makes absolutely no sense to me.

i have a proper doctype - xhtml strict and css validate. Everything renders perfectly in Firefox and Opera (haven't tried safari).

I know this is a shot in the dark without code for you to look at, but unfortunately i am not allowed to show the page. If nobody has any ideas off the top of their head i will see if i can replicate the problem on a test page.

any help is greatly appreciated.

9 Years
Discussion Span
Last Post by autocrat

problem 2 is solved.
I was using the body as my wrapper (one less div - the wrapper/body/copntent just sits centered on a plain white page). Going ahead and adding the extra div and moving the css rules to apply to that instead of the body tag solved the problem. Like all problems it seems obvious once you have solved it

I don't know if i was wrong or ie is wrong - but it definitely wasn't worth the amount of time i spent trying to figure this out just to try to save one div.


You may find that you have issues with stacking/rendering due to "haslayout" problems (IE sucks due to that).

If it helps, try applying one of the following to either the item that is failing, or it's parent;
zoom: 1;
display: block;
position: relative;

Alternatively, check if you are applying height/width, as sometimes (as with floats), this can result in a change of behaviour.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.