IE6 oddity ...again

In article <h1vqk3$ogg$1 (AT) newsreader2 (DOT) utanet.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) com> wrote:

Nik Coughlin meinte:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) com> wrote in message
news:h1soh0$2v7$1 (AT) newsreader2 (DOT) utanet.at...
dorayme meinte:

Add a width (100% will do) or a height of 1px to your
.vxJS_foldThis h2 { ... }

for IE 6 eyes only.

Actually, because you mentioned IE6 I only looked at 6. But you
better do this for IE7 too (I notice now).

Thanks for your ideas. How could I forget about the
"arbitrarily-thrown-in-width-and-height-settings" to make IE work...

Yes it works. I assume there's no sense-making explanation for this
behaviour. (Has the bug a name?)

O yes, it is what I know as the IE 6 and 7 "Sandwich bug":

<http://dorayme.netweaver.com.au/ieBugs/IE6And7SandwichBug.html>

For those without IE6 and 7, here are screenshots:

<http://dorayme.netweaver.com.au/ieBugs/withFilling.gif>

and

<http://dorayme.netweaver.com.au/ieBugs/sansFilling.gif>

There are three ways to zap this bug.

1. Turn off relative positioning on #main

2. Remove width on #main (or substitute default auto)

3. Hack with a width or a height on <h3>

It is called a sandwich bug because if there is no fill, the top and
base layer of the bread both then suffer the loss of background. In your
case there is a fill and so only the top layer loses its background.

I think it is a very nice bug and that it looks to be designed - have
you ever noticed that spaced-out look that Bill Gates sometimes gets on
his countenance?

Google: IE hasLayout

I thought my * { zoom: ... } would suffice to give everything a
hasLayout property. Anyway, why does *only the first* headline
disappear? In addition: it is a dead simple layout. Well,

No, there is no general fix for all the IE faults. That would be a bit
like expecting a rational explanation of why God created the world with
so much evil. <g>

Btw, I have no idea if it affects IE8. Perhaps someone would be so kind
as to let me know. Must install IE8 soon.

--
dorayme

dorayme meinte:

In article <h1vqk3$ogg$1 (AT) newsreader2 (DOT) utanet.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) com> wrote:

Nik Coughlin meinte:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) com> wrote in message
news:h1soh0$2v7$1 (AT) newsreader2 (DOT) utanet.at...
dorayme meinte:

Add a width (100% will do) or a height of 1px to your
.vxJS_foldThis h2 { ... }

for IE 6 eyes only.
Actually, because you mentioned IE6 I only looked at 6. But you
better do this for IE7 too (I notice now).
Thanks for your ideas. How could I forget about the
"arbitrarily-thrown-in-width-and-height-settings" to make IE work...

Yes it works. I assume there's no sense-making explanation for this
behaviour. (Has the bug a name?)

O yes, it is what I know as the IE 6 and 7 "Sandwich bug":

http://dorayme.netweaver.com.au/ieBugs/IE6And7SandwichBug.html

For those without IE6 and 7, here are screenshots:

http://dorayme.netweaver.com.au/ieBugs/withFilling.gif

and

http://dorayme.netweaver.com.au/ieBugs/sansFilling.gif

There are three ways to zap this bug.

1. Turn off relative positioning on #main

2. Remove width on #main (or substitute default auto)

3. Hack with a width or a height on <h3

It is called a sandwich bug because if there is no fill, the top and
base layer of the bread both then suffer the loss of background. In your
case there is a fill and so only the top layer loses its background.

I think it is a very nice bug and that it looks to be designed - have
you ever noticed that spaced-out look that Bill Gates sometimes gets on
his countenance?

:-)

Google: IE hasLayout
I thought my * { zoom: ... } would suffice to give everything a
hasLayout property. Anyway, why does *only the first* headline
disappear? In addition: it is a dead simple layout. Well,


No, there is no general fix for all the IE faults. That would be a bit
like expecting a rational explanation of why God created the world with
so much evil. <g

Indeed.

Btw, I have no idea if it affects IE8. Perhaps someone would be so kind
as to let me know. Must install IE8 soon.

It's gone in IE8. IE8 is not that bad at rendering. Which comes as a
small surprise. At least IE7 is heavily cannibalized by IE8. It's
futile, I know, but I still hope that IE6 and 7 will be gone soon.

Gregor

--
http://www.gregorkofler.com
http://web.gregorkofler.com - vxJS, a JS lib in progress

Gregor Kofler wrote:

dorayme meinte:
In article <h1vqk3$ogg$1 (AT) newsreader2 (DOT) utanet.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) com> wrote:

Nik Coughlin meinte:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) com> wrote in message
news:h1soh0$2v7$1 (AT) newsreader2 (DOT) utanet.at...
dorayme meinte:

Add a width (100% will do) or a height of 1px to your
.vxJS_foldThis h2 { ... }

for IE 6 eyes only.
Actually, because you mentioned IE6 I only looked at 6. But you
better do this for IE7 too (I notice now).
Thanks for your ideas. How could I forget about the
"arbitrarily-thrown-in-width-and-height-settings" to make IE work...

Yes it works. I assume there's no sense-making explanation for this
behaviour. (Has the bug a name?)

O yes, it is what I know as the IE 6 and 7 "Sandwich bug":

http://dorayme.netweaver.com.au/ieBugs/IE6And7SandwichBug.html

For those without IE6 and 7, here are screenshots:

http://dorayme.netweaver.com.au/ieBugs/withFilling.gif

and

http://dorayme.netweaver.com.au/ieBugs/sansFilling.gif

There are three ways to zap this bug.
1. Turn off relative positioning on #main

2. Remove width on #main (or substitute default auto)
3. Hack with a width or a height on <h3

It is called a sandwich bug because if there is no fill, the top and
base layer of the bread both then suffer the loss of background. In
your case there is a fill and so only the top layer loses its background.
I think it is a very nice bug and that it looks to be designed - have
you ever noticed that spaced-out look that Bill Gates sometimes gets
on his countenance?

:-)

Google: IE hasLayout
I thought my * { zoom: ... } would suffice to give everything a
hasLayout property. Anyway, why does *only the first* headline
disappear? In addition: it is a dead simple layout. Well,


No, there is no general fix for all the IE faults. That would be a bit
like expecting a rational explanation of why God created the world
with so much evil. <g

Indeed.

Btw, I have no idea if it affects IE8. Perhaps someone would be so
kind as to let me know. Must install IE8 soon.

It's gone in IE8. IE8 is not that bad at rendering. Which comes as a
small surprise. At least IE7 is heavily cannibalized by IE8. It's
futile, I know, but I still hope that IE6 and 7 will be gone soon.

Since your site uses javascript:

http://dean.edwards.name/IE7/

It's like IE6 and IE7 are already gone. Just make sure it doesn't
badly break (which is usually unlikely) with js off. I don't believe it
will fix your specific issue though, not sure.

Jeff

Gregor

jeff meinte:

Since your site uses javascript:

Naturally. Since it is about my JS library. ;-)

http://dean.edwards.name/IE7/

It's like IE6 and IE7 are already gone. Just make sure it doesn't
badly break (which is usually unlikely) with js off. I don't believe it
will fix your specific issue though, not sure.

No. It is a plain bug. Has nothing to do with lack of CSS selectors or
PNG transparency. Having an extra JS just to even out IE6 and 7 is not
my idea of proper authoring. Conditional CSS includes do the job, and I
don't care if poor IE6 chaps get transparent PNGs. The JS lib can handle
IE6 and 7 - all ugliness stems from the lack of "proper IE styling".

Gregor

--
http://www.gregorkofler.com
http://web.gregorkofler.com - vxJS, a JS lib in progress

Petr Vileta "fidokomik" meinte:

Gregor Kofler wrote:
On "normal" browsers (i.e. anything except IE6, and perhaps IE7)

http://web.gregorkofler.com/index.php?page=xhr_widgets

Any ideas?

Try to put cursor before word "widgets" and move mouse down by lines ;-)
Tried In IE6.

I know they are there. And they work.

In other words: I found that both <h2> elements are invisible because
background-color as well as color are set to white.

And no: They ain't set to white (it's more like a "visibility: none").
dorayme's suggestion of assigning a width: 100% to the headlines did it.

Gregor

--
http://www.gregorkofler.com
http://web.gregorkofler.com - vxJS, a JS lib in progress

Gregor Kofler meinte:

Petr Vileta "fidokomik" meinte:

In other words: I found that both <h2> elements are invisible because
background-color as well as color are set to white.

And no: They ain't set to white (it's more like a "visibility: none").

My bad. It is indeed that the background color is "lost". And therefore
it's white on transparent on white.

Gregor

--
http://www.gregorkofler.com
http://web.gregorkofler.com - vxJS, a JS lib in progress

In article <h22if8$9ig$1 (AT) newsreader2 (DOT) utanet.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) com> wrote:

....

...It is indeed that the background color is "lost". And therefore
it's white on transparent on white.

Yes, in the URL I gave in my last post the text was deliberately made
black by me to avoid this red herring.

I am not sure if you noticed that the bug has a peculiar logic to it.
You were asking why the first heading disappeared but not the second.
The crucial feature of the "filling", the element between the two
headings is whether or not it has a default background (of transparent)
or a specific colour set in the CSS. If it is given or left as
transparent, the subsequent element does not lose its background. (This
is what happened in your case)

In general, if there is a sequence of elements that are all specifically
given a colour for bg, no bg will appear in any of them. Stick in any
transparent bg on any element that has some content in the sequence (but
not starting the sequence!) and the elements before this lose their bg
while those after retain them.

..main { position: relative; width: 200px; }
h3 { background: #cfc; color: #000; }

<div class="main">
<div>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
....
</div>
</div>

will get no background to any of the elements. Whereas all elements
after the inlined style one will show up with background in:

<div class="main">
<div>
<h3>Element</h3>
<h3 style="background: transparent; color: #000;">Element</h3>
<h3>Element</h3>
<h3>Element</h3>
....
</div>
</div>

To have *all* the elements show a background you want, in addition to
the fixes I mentioned before (hack a width or height on the H3s, remove
the width on "main" or remove relative position), there is yet another
way I found, a sort of relative zap to a relative bug:

..main { position: relative; width: 200px; }
h3 { background: #cfc; color: #000; position: relative; }

<div class="main">
<div>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
<h3>Element</h3>
....
</div>
</div>

The key being to relative the h3 but not give a position. This last
seems to do no harm to good browsers so may not need hiding.

--
dorayme