Member Avatar for jedwards23

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.

  • 2 Contributors
  • 2 Replies
  • 119 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

Short primer: both symptoms you describe are classic IE7 rendering and stacking quirks. The second issue (floats appearing to sit outside a centered layout) often comes from using the document body as the main container, which can behave differently across IE versions. The first issue (borders vanishing after scroll) is a repaint/reflow problem where IE does not always redraw the affected layer correctly.

Practical troubleshooting, in order:

  1. Reproduce the problem in the smallest possible test page (only the HTML/CSS required). That isolates layout interaction from other scripts or styles.
  2. Make sure floated children are properly contained by their parent (use a standards clearfix). If the parent does not contain floats, children can appear to “float” visually when the window resizes.
  3. Check for any nonstandard rendering triggers on the page — filters, alpha PNG hacks, CSS expressions or complicated z-index stacks — any of these can change how IE repaints. Remove or simplify them while testing.
  4. If a particular element visually misrenders, force the browser to give it a proper rendering context (a layout) or a reflow. If simple CSS changes don’t help, a tiny, non‑destructive style tweak on resize/scroll will often force a repaint.

A safe clearfix to try (standards browsers):

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

For IE6/7 you may need an IE‑only rule to give the container a layout (use a conditional stylesheet). Avoid using the body as the outer wrapper for centered/floated layouts — a dedicated container div is more predictable.

If the issue still appears only in IE7, create a minimal repro and test forcing a redraw during resize/scroll (toggle a harmless class or read element offsets to trigger reflow). That will confirm whether the problem is a repaint bug rather than a true positioning error. Mentioning and : the diagnosis and quick tests they described are on the right track; focus on containment/has-layout and simplified repros next.

Recommended Answers

All 2 Replies

Member Avatar for jedwards23

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.

Member Avatar for autocrat

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.