[SOLVED] Border Collapse? divs overlapping IE6/7

[PVM3]

Hi:

Working my way through issues -- I need to set up a left fluid column and right fixed column and I seem to have managed it but they are overlapping in ie6/7. I'd like to fix fwiw if I can. Looking up all the old bugs - seems like border collapse but suggested fixes don't seem to be working.

See this page (obviously incomplete!)

http://66.147.244.110/~rdbikeco/ug/index.html

Help appreciated!

Thanks!

[PVM3]

Have we reached to point where we can just blow off IE6/7? Do you guys worry about it anymore?

[meesa]

I still support IE7, but I never have supported IE6. I still will do 7 because there are few issues that I ever have with it.

[chrishirst]

seems like border collapse but suggested fixes don't seem to be working.

probably because in NOT "border collapse" but your use of fixed positioning which IE6 and 7 have always had problems with.

[PVM3]

Chris:
I don't have fixed positioning. Where do you mean?

Thanks -
Also thanks Meesa-

[chrishirst]

There was something on the page when I first looked that was giving your page a "sunrise effect" with the backgrounds but it no longer happens.

I gave up on IE7 a long while ago, simply because the sites I deal with were not seeing enough IE7 visitor numbers to make it worthwhile spending time on.

So which elements are overlapping and how does it manifest itself?

[PVM3]

Chris:
See here: http://66.147.244.110/~rdbikeco/ug/index.html

The fluid left div overlaps the right sidebar in IE6/7. I think I'm pretty much not going to worry about 6 any further, and not even 7 much of the time - but if this problem was easily fixable with one of the old hacks I wanted to fix it.

Thanks!

[chrishirst]

probably something to do with the strange messing about with negative margins, it's never a good idea to play about with things like that.

You are much better off understanding floats and how they work rather than bodging hacks together.

[PVM3]

Got it resolved.

Relevant code:

#floatwrap {float: left;
 width: 100%;
 }/*needed to make the float work without fixed width on leftwrap*/

#leftwrap { margin-right: 240px;
}/* margin-right makes room for the right float overflow: auto;*/

#sidebar {width: 240px; 
margin-left: -240px; /*need the -240 margin so the leftwrap will work*/
float:right;
display: inline; /*IE7*/
background-color: #f7d9bc; 
-moz-border-radius-topleft: 0px; 
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 15px 15px 0px;
border-radius: 0px 15px 15px 0px;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 
*behavior: url(/scripts/boxsizing.htc); /*ie6/7 polyfill*/
}
.innerpad {padding:20px;}/*to pad sidebar content*/

Needed the extra div (floatwrap) to wrap the leftwrap. Then needed to remove padding from the sidebar itself -- adding via the .innerpad. That took care of the overlap in IE7.