Pesky IE Hickey

[aiden]

I'm getting a tiny CSS hickey with IE5/5.5/6 only (this is completely valid in every other way and working with all browsers otherwise)

Click here to see the template.

Click here to see the CSS document.

The error is in the intended whitespace that the model's hand is extending through, immediately below the nav bar and right above the sidebar's shadow there is a roughly 3pt tan line extending up.

I have -no- idea why. I can't see any of the usual box model padding/margin errors that IE usually has.

If anyone can help me fix this, it's the last nail in the coffin in getting this template to validate for me on every browser in the spec.

--
@iden.

[tgreer]

IE has weird issues with "float". I hate to suggest this, but see if you can rework your CSS to use absolutely positioned divs. Sometimes adding "display: inline;" to your div styles will fix some of IE's float/margin issues.

[aiden]

Boy, that's a total bummer :) I've never had much luck with absolute positioning with fluid templates (not very skilled... but reading a lot of positioniseverything)

Drat!

I'll post this a couple other places and see if I find another solution, and if it comes along I'll post it up.

Thanks for your help.

--
@iden.

[tgreer]

If you strip everything down to just the content and sidebar, and remove all other CSS except just the "float: left", you'll see the gap still remains. IE doesn't do well with "float", period. Yeah, it stinks, I know.

[aiden]

Any suggestions as how to tackle this with absolute positioning with the minimum impact on the visual look?

[tgreer]

Hmm... you could ensure centering with "margin: 0 auto;" in your container div. You know that, it seems. Then, your pageblock div would be absolutely positioned, with "top" set to whatever you like to move it down the page. Then I think you could use top, left, and width properties for content and sidebar, using position: relative, for them, so that they would be relative to pageblock.

I hope that makes sense, I'm going from memory of your page structure.

[aiden]

I continued working with this template, and the more I attempted to mark up with absolute positioning, the more I realized I was taking an elephant gun to a mouse.

The problem was because I did something bad. The entire goal here is to provide a standard, faux-columns ala Dan Cedarholm layout, but also allow the top of the character's had to extend into the margin space (15px of white above the content area, or #pageblock). To do this I was applying the area with no real margin, and "faking" the margin on the sidebar by defining it with a 15px white border at the top. The float wasn't the issue. I just wasn't using best practices at all.

So I've kept the float, but moving in a new direction. This time I'm applying the margin honestly, and attempting to use a negative top property and relative positioning on the image class to move it up into the margin area. This, I have decided, is much more compliant. And it seems to be yielding better results.... BUT!

Now I find some browsers (IE5/5.5, Firefox) do not allow the image to float above the box model. I assume this is actually the correct way to interpret it: the moves up as necessitated, but is cropped off at the edge of the div. Others (IE6, Opera, and I assume KHTML derivatives although I haven't had a chance to get back to my Mac yet) result in a successful match to the design: the image floats up and extends fully into the margin area.

Please refer to the links in the inital post of this thread to review the changes.

So now the question is, what's the poper way to get the result of this image floating into the margin. Should it be positioned outside the content div and relatively floated into place with a z-index, and then pad down the content area to accomodate? Should it be in it's own div, or should I continue to do what I'm doing (apply style directly to the image tag with a specific class).

Eek! :)

--
@iden.

[tgreer]

Image slicing?

[aiden]

Yup, that's probably where it's going. I have a personal hatred of white space in web images though. Just my efficiency side telling me not to bitmap white pixels when I can help it :)

But alas, I think that's where we're going with this :)