Float drop issues with IE6.. again..

[Alex]

Hello,

Okay. A few of you may be familiar with the numerous occasions I've had float drop issues recently. Once again, I'm having an entire division of my layout drop in IE6.

Please view http://dev.cisp.com/astanford/cisp2/ and compare FF3 to IE6. I would like IE6 to display exactly as FF3 currently does without any conditional stylesheets or hacks.

Any assistance would be very helpful and appreciated.

Thank you in advance,
Alex

[RyanReese]

You have it equal EXACTLY what the parent width is which could lead to a rounding error. On #side add margin-left:-1px;

Hi Alex.

PS: Just to be safe you can set teh padding on #side to 15px; (your being so complicated about it on AIM lol)

[Alex]

You have it equal EXACTLY what the parent width is which could lead to a rounding error. On #side add margin-left:-1px;

Hi Alex.

PS: Just to be safe you can set teh padding on #side to 15px; (your being so complicated about it on AIM lol)

#side contains elements such as images that are exactly the current with, so narrowing it is not an option.

I'm going to try to narrow the content division by a pixel or two.

P.S. Thanks Ryan, and jump on IM when you can. I'm running to a meeting but I'll be back around 10-10:30 AM EST (it is 9:30 now).

[RyanReese]

Your welcome . Remember the rule of thumb-if content is dropping it is overexceeding the width. Most likely padding is causing an element to overexpand beyond the parents width.

PS: I'll be on tonight (5 eastern). Tennis after school so I won't be home until then.

[Paul O'B]

Hi,

The problem is that your .livechat element is 211px wide but the #side container is only 210px wide and therefore it gets pushed wide and breaks the layout.

Reduce the padding on livechat and the column should appear correctly.

#side a.livechat {
margin: 25px 0 0;
height: 28px;
width: 148px;
display: block;
background: url(../img/livechat.png) no-repeat;
padding: 12px 7px 0 55px;
color: #FFF;
text-decoration: none;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
}

[RyanReese]

He doesn't like changing padding size (I tried multiple times on aim) so Just try to bear with him (lol).

[Paul O'B]

He doesn't like changing padding size (I tried multiple times on aim) so Just try to bear with him (lol).

You miss the point

The inner element is bigger than its parent and cannot exist in that form. Either the padding on the inner element needs to be reduced or the width of the inner element needs to be reduced. It has nothing to do with the padding on the parent but on the inner element called .livechat.

You can't re-invent the laws of physics

[RyanReese]

I'm not trying to but I'd have im change something else then apdding because he gets antsy with that. I understand you perfect but on AIM he wouldn't even think about messing width the padding.

PS: Did I ever say it had to do with the padding of the parent element??

[Paul O'B]

I understand you perfect but on AIM he wouldn't even think about messing width the padding.

Sorry but this is utter nonsense.

Either something fits or it doesn't. There are no ifs or buts it either has to fit or it doesn't fit at all.

The only reason it works in other browsers is because they do not stretch the parent's width to accommodate the larger child. He is not getting the exact padding he specified on that element in any browser except IE6 because that's the only one that stretches the parent. All other browsers show it with one pixel less padding because they ignore the overflow.

The answer is as I have given above and the padding and width on the .livechat element exceed the width of the parent container.

It's as simple as that and so is the solution