Re: [css-d] IE Rendering Bug?

[Ian Young]

> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] Behalf Of Rob Wilmshurst
> Sent: 16 October 2006 11:36
> To: CSS Discuss
> Subject: Re: [css-d] IE Rendering Bug?
>
>
> Sorry about the slow reply; I haven't been able to get online all weekend.
>
> I fear you've misinterpreted the problem (or I worded the original post
> badly, which is more likely :).

Guess so.

I haven't the original page saved as I changed it to make it work.
As I said earlier, it didn't work in any of the browsers that I tested it.

The test that I have put here:
http://www.iyesolutions.co.uk/templates/css/wilmhurst/test2.html

does work. You will see that the HTMl is different to what you had, if I
remember correctly.

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.4/477 - Release Date: 16/10/2006

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Rendering Bug?

[Rob Wilmshurst]

Sorry about the slow reply; I haven't been able to get online all weekend.

I fear you've misinterpreted the problem (or I worded the original post 
badly, which is more likely :).

The CSS works fine; there is no problem with the page I'm using.
The example I gave previously was the bare minimum markup and CSS to 
recreate this rendering bug (I'm calling it a bug, for simplicity's sake).

The last  tag on the page contains only asterisks, and you can 
see in the screen shot (and hopefully the example, in IE) that these 
asterisks are rendered *outside* of the select box, in addition to being 
rendered correctly inside it.  Furthermore, interacting with these extra 
asterisks has the same consequences as interacting with the  tag 
itself, proving that the two are one and the same element.

I was just curious to know if this issue (drop down contents appearing 
elsewhere on the page in IE) has been raised before, and if not, to 
point it out.

So, has anybody seen this bug 'in the wild'?
I need to know or it'll be irritating me all week ;)

Cheers,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Rendering Bug?

[Rob Wilmshurst]

Ian Young wrote:
> You might want to have a look at these as something more fundamental is
> going on here.

The Firefox issue was because the width of the  was set to 0, 
forcing the elements to stack on top of each other (although this only 
happened in FF2, not 1.5 for me).  I've updated the example to fix this, 
but the IE problem remains.

Thanks for pointing this out though Ian; I hadn't looked in FF 2.

The full page is currently living on our internal server; I'll try and 
get it public-facing ASAP.

It certainly seems this is something to do with the way IE handles 
floats; inserting a  after the last  tags fixes things... 
very strange.

Rob

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE Rendering Bug?

[Rob Wilmshurst]

Hi all,

I've come across a strange rendering glitch in IE (apologies if this is 
a known issue; google has failed me today).

I'm seeing this in IE7 (full install) and IE6 (standalone, so it can't 
really be trusted).

The test case can be seen at 
 and 
.  Obviously, I've trimmed 
things down to the bare minimum in terms of CSS and markup...

Basically, IE is rendering the last {x} letters from the last  
tag of the last  on the page, where {x} is the number of 
s on the page minus 1.
So in this case, there are five s and four letters being displayed.

Removing
"form div { width: 1px; }" (any width, even 0, will cause this glitch) 
from the CSS fixes things, as does removing
"form select { float: left; }".

Removing
"form label { float: left; }" causes the second-to-last 's value 
to be displayed instead!

If anybody can shed light on this, it'd be much appreciated.
And if the above is completely unintelligible, I'll try and explain a 
bit better :)

Cheers,

Rob

--
Rob Wilmshurst
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Philippe Wittenbergh]

On 14 May 2005, at 10:05 am, Ingo Chao wrote:
There might come the day when IE7-8 interpret height:1% without 
expanding the container by childs. As this hack was used to bugfix 
countless pages ... uh.
Conditional comments are your friend in all those cases, especially for 
those potentially quite destructive rules.

Re: [css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Ingo Chao]

Justin Patrin schrieb:
Does that work in FireFox, Opera, and Safari as well?
Yes. Only IE knows of something 'above' the html element.
For the Holly hack, have a read here:
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
There might come the day when IE7-8 interpret height:1% without 
expanding the container by childs. As this hack was used to bugfix 
countless pages ... uh.

Either way, we have a workaround. :-) 
:)
Ingo

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Justin Patrin]

On 5/13/05, Ingo Chao <[EMAIL PROTECTED]> wrote:
> Justin Patrin schrieb:
> ...
> > The Holly Hack probably does work, but I
> > stumbled across this page:
> > http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
> > which says that the zoom property also gives a box layout. So I tried
> > zoom: 100% in my div and lo and behold, it works.
> 
> Yes, but zoom is proprietary to MS and will not validate (I use zoom:1
> for debugging).
> The problem with this MSDN page is that it don't explain what "layout" /is/
> 
> The mechanism of the Holly Hack is the same as zoom:1; but validates:
> 
> /* hide from IEMac \*/
> * hmtl .hack {height:1%;}
> /* end hide */
> 
> The intention of the Holly Bergevin's hack was not to add a height
> of 1%, but to add a dimension to the element, as any dimensioned element
> gains the "layout"-quality.
> 

Good point. Does that work in FireFox, Opera, and Safari as well?

I honestly don't care too much about validation as the rest of the
page is very much not XHtml. Just this part that I'm rewriting. As
long as the zoom property works to fix the problem and doesn't screw
up the other browsers I'm fine.

And about the above hackif that only shows up for IE then you
could still use zoom. Hmmm, well I suppose not. If the compliant
browsers still read the CSS (and it looks like they do) then it still
wouldn't validate

Hmmm, oh well. Either way, we have a workaround. :-)

-- 
Justin Patrin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Ingo Chao]

Justin Patrin schrieb:
...
The Holly Hack probably does work, but I
stumbled across this page:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
which says that the zoom property also gives a box layout. So I tried
zoom: 100% in my div and lo and behold, it works.
Yes, but zoom is proprietary to MS and will not validate (I use zoom:1 
for debugging).
The problem with this MSDN page is that it don't explain what "layout" /is/

The mechanism of the Holly Hack is the same as zoom:1; but validates:
/* hide from IEMac \*/
* hmtl .hack {height:1%;}
/* end hide */
The intention of the Holly Bergevin's hack was not to add a height
of 1%, but to add a dimension to the element, as any dimensioned element
gains the "layout"-quality.
regards, Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Justin Patrin]

On 5/13/05, Ingo Chao <[EMAIL PROTECTED]> wrote:
> 
> Hi Justin
> 
> > FYI, I've posted this bug to quirksmode.org but it hasn't shown up
> > yet. Hopefully it will soon.
> 
> Nice catch!
> 
> > This rendering bug in Internet Explorer 6.0 causes text in a div with
> > a background color followed by a div which floats to the left and
> > another which is clear on the left to be invisible. All styling on the text 
> > is also
> > invisible (such as background colors and text colors).
> > http://pear.reversefold.com/badIE/
> 
> I hope you allow a discussion on your test findings (as you write
> "FYI"). I post this offlist, though. If you want to discuss it on-list,
> feel free to cite.

Of course, I meant this as an announcement of the finding. CCing to the list.

> 
> regards, Ingo
> 
> #
> 
> A semi-transparent bg-image like
> http://www.satzansatz.de/cssd/tmp/justin.html
> 
> (IE6 XPSP2 1280*1024, cleared cache, reducing the width by dragging the
> window+reload)
> 
> reveals: The text is invisible because the div is stacked /under/ its
> parent background layer.
> 

Ah, I wouldn't have thought of that.

> (And when the container is positioned relative, then the _float_ is
> "disappearing":
> http://www.satzansatz.de/cssd/rpfloat.html)
> 

This is also interesting, but there's a difference. If you highlight
the "hidden" text in my bug the text and all styling appears. (Or if
you scroll the window off of the hidden text and back on it). The
hidden float bug *doesn't* show up when you highlight the text.

> The trigger of this and similar bugs is a float that expands (changes
> its 'intrinsic' dimensions) a container without "layout".
> 
> Or, to put it simple, trying to contain a float can be buggy when the
> container has no dimension.
> 
> (These bugs can be filed under "dimensional bugs" in order to summarize
> them in one branch with one fix.)
> 
> Normally, a non-layouted parent won't contain the float. With this
> clearer, the height of the parent is determined by the height of the
> content /and/ the float. I guess IE6's problem is that this makes the
> un-layouted parent dependent on its layouted (floating) child.
> 
> -> A element having layout can change the layering of dependent elements.
> 
> -> The bug is fixed by giving layout to the parent, i.e. via the Holly hack.

Ah, it makes more sense now. The Holly Hack probably does work, but I
stumbled across this page:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
which says that the zoom property also gives a box layout. So I tried
zoom: 100% in my div and lo and behold, it works. Much better than the
table hack I was using. I've added this workaround to my page:
http://pear.reversefold.com/badIE/workaroundZoom.html

> 
>  > "To keep the styling and still have the text show up, wrap it in a table"
> -> According to MSDN, some elements (body, img, input, table, td (?),
> control, iframe, marquee, hr) have layout by default.
> 
>  >"Removing any one of the three divs causes the text to appear
> Remove the outer div"
> -> Then the parent of the float is body, that's equal to putting it in a
> table.
> 
>  >"Remove the floating div".
> -> That's the trigger.
> 
>  > "Remove the clear div"
> Without this clearer, the height of the container will not be determined
> by the float.
> 
>  > "Removing any of the three styles causes the text to appear
> Remove the background color."
> -> The background layer /hides/ its childs.
> 
> Again, interesting catch!
> 

Thanks for the help and the commentary. You've obviously much more
experience in IE rendering bugs than I do. :-)

-- 
Justin Patrin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE rendering bug, invisible text involving 3 divs and 3 CSS styles

[Justin Patrin]

FYI, I've posted this bug to quirksmode.org but it hasn't shown up
yet. Hopefully it will soon.

A short description:

This rendering bug in Internet Explorer 6.0 causes text in a div with
a background color followed by a div which floats to the left and
another which is clear on the left to be invisible. This bug does not
manifest in FireFox or Safari (although Safari renders the Hidden Text
to the right of the float: left div). All styling on the text is also
invisible (such as background colors and text colors).

A longer description and (lots of) examples and a workaround:
http://pear.reversefold.com/badIE/

-- 
Justin Patrin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/