Stylesheets - Columns and asides

Author

Columns and asides - IE issue

Mark Eggers

2005-01-19, 7:24 pm

OK, I'm confused. This wouldn't be the first 100 times, but I'm not sure
I understand how to fix this one.

I'm building a document template. One of the constructs I want is an
aside. I can do this for both asides with formatted text and <pre></pre>
text as shown on the following page.

http://webpages.charter.net/mdeggers/asides/asides.html
http://webpages.charter.net/mdegger.../css/asides.css

Everything validates. Firefox, Konqueror, and IE 6 display the same
general page (fonts not withstanding).

Now I took the exact same structure and dropped it into the Faux columns
template from http://www.alistapart.com/articles/fauxcolumns/. You can
see the results on the following page.

http://webpages.charter.net/mdegger.../col-aside.html
http://webpages.charter.net/mdegger...s/col-aside.css

Again, everything validates. Firefox and Konqueror work as expected.
Unfortunately IE 6 botches the <pre></pre> aside, pushing the text below
the image. You can also see by the top and bottom borders that the
aside-frame class dimensions have stretched to include the <pre></pre>
text.

What sort of hacks (if any) are possible to get IE 6 to play right in this
environment?

/mde/
just my two cents . . . .

Mark Eggers

2005-01-20, 11:19 pm

On Wed, 19 Jan 2005 14:32:39 -0800, Mark Eggers wrote:

> OK, I'm confused. This wouldn't be the first 100 times, but I'm not sure
> I understand how to fix this one.

> Now I took the exact same structure and dropped it into the Faux columns
> template from http://www.alistapart.com/articles/fauxcolumns/. You can
> see the results on the following page.
>
> http://webpages.charter.net/mdegger.../col-aside.html
> http://webpages.charter.net/mdegger...s/col-aside.css
>

After some investigation, I found the issue. It seems that Internet
Explorer will try to expand containing <div></div> to hold <pre></pre>
text. When the containing div is next to a float, IE breaks the float in
order to not expand the div. If that fails, then IE also expands the div.

Firefox and Konqueror just let the text spill out into the rest of the
page.

I should have realized this when I saw the borders on the containing div
change size.

I've fixed this in the above link by expanding the containing div a bit.
However, this arrangement will only work if the page author is careful
about sizing the <pre></pre> text.

I'll need to read a bit more on the overflow property, but this looks like
IE violates the standard (surprise, surprise). The next trick will be
getting around the trouble - and letting the text render outside the
containing block without messing up the float.

/mde/
just my two cents

Mark Eggers

2005-01-24, 4:21 am