Member Avatar for autocrat

Hi all,

OK, I can use the " minwidth: nnpx; " for most browsers, for IE I can use " <hr /> ".
That mostly sorts out setting a minimum width... apart from the fact that I want a gap between the viewportal/screen-res and the content of the page!
Any images I have on the right continue to shift in IE6, even beyonf what I set the <hr> to......
I've had a play, and I can stop it from happening, but only to cause my floats to drop!

any idea's?

All I want to acheive is a set of rows positioned below each other with pretty corners/edges, that only shrinks to either 640 or 800 in width!

  • 2 Contributors
  • 6 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

Older IE rendering is the likely culprit behind the behaviour described. Internet Explorer 6 uses a different layout path for floats and shrink-to-fit containers; that can let a right-floated image appear to escape an intended lower-width limit or, conversely, make floats drop when containment hacks are added. The reliable way to stop that is to make the container behave as a proper layout context and to contain the floats cleanly rather than relying on spacer elements.

Two concise, practical fixes that together solve most IE6 float woes:

  • Make the containing block establish layout in IE (the so-called "hasLayout" effect). This prevents IE from doing the odd shrink-wrap/overflow positioning that lets floats run past the boundary.
  • Use a robust clearfix to contain floats (modern pseudo-element clearfix) or use overflow auto/hidden where clipping is acceptable.

Example CSS (works across modern browsers; add the layout trigger so old IE respects it):

/* contain floats */
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* trigger hasLayout in old IE */
.wrapper {
  zoom: 1;
}

/* avoid double-margin issues on floated elements in old IE */
.col-right {
  float: right;
  display: inline;
}

Troubleshooting steps: reproduce the problem with the smallest HTML (one container + one floated image). Toggle the container rules: first add zoom:1, then add the clearfix, then try overflow:auto. Use an IE-only stylesheet or conditional comments if you must limit fixes to older browsers. For deeper background on float behavior and the IE layout quirk, see QuirksMode on floats () and the hasLayout explanation (). Thanks to for the nudge that prompted testing.

Recommended Answers

All 6 Replies

Member Avatar for autocrat

Please?

I've done really well converting a table site to css... apart from this stupid issue of the images floating over everything....

a simple 3x3 design, content in middle, surrounding dives with background images , corners stay the same size, the H and V middles are expandable.
This is simple in tables... so why so difficult in css?

Member Avatar for autocrat

sod it, no one here or at CSS creator has come up with anything apart from a hack.... so I'll go to tables for the top and bottom bar!

Shame, as I thought CSS was doing so well, (one I figured how things go together! Yet it appears even the pro's have the same problem on their sites, so I'll default to good old reliable tables to get around this!
cheers anyway for looking!

Member Avatar for autocrat

update... tables has it's own issues... min-width is OK, no floating over the desired point OK, yet havegaps vetween cells and can't get a bg-img on the % middle cell!

So muc hfor CSS being better than tables... new I'd have problems as soon as I wanted something that is standard in tables!

oh well..... if you do have an idea, your welcome to post it!

Member Avatar for autocrat

Don't worry people.... not only have Ifigured out how to cause IE6 to emulate NN6 and MFX 1.0.1 in regards to the "overfloat" (this being when a right floated object continues floating past the point of minimum width of the container it was in), but also how to make the HR object 1 px tall, invisible and having an infuence of 2px above and 2 px below, rather the the usual 12/7.

So I got what I wanted to work in the three browsers, without the need of either tables or a hack!

(still can't believe the lack of help.... is thios a common problem with css?)

Member Avatar for DanceInstructor

We were having fun watching you post to yourself :p

Member Avatar for autocrat

Oops.... I seem to have a habit of treating things like a blog sometimes!
*meak* sorry *shrug*

Still, is this a common problem... or do others know how to fix it?

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.