IE6 'hidden text'

[Barry Morris]

Hello

I have a cross browser problem that I hope somebody has seen and found a
work-around:

The problem is with an image aligned left the text does not show up on the
page in IE6. The display works properly in IE7, Opera 8.53, FireFox
1.5.0.11 and Netscape 8.1.2.

The image / text is user defined using a web content editor by people with
limited HTML knowledge, so I would like to fix this by coding 'around' the
user supplied code:

Example (Welsh news with a picture in file newyddion.txt) - this is
generated by a content editor and I do not have much control over this:

<P><STRONG><FONT color=#347938>Newyddion&nbsp;</FONT></STRONG></P>
<IMG height=226 alt="" src="pageimages/tracey%20launch%20032_edited1.jpg"
width=300 align=left border=0>
<P>Jane Davidson AC a Tracey Williams Cyfarwyddwraig Safle Swyddi yn parti
lansiad ar Fawrth y 1af</P>

php snippet:

include("Mainheader.tpl");
include("MainMenu.tpl");

if ($LANG == 'w') {
include("newyddion.txt");
} else {
include("news.txt");
} ?>

The code as shown does not display the text (including the word Newyddion -
Welsh for News), however, it is there on the screen and using the mouse to
select the text / image causes the text to appear properly, as too does
resizing the screen ever so slightly. The text is there as white on white!

If I add paragraphs after the text by changing the above php / html to:

include("Mainheader.tpl");
include("MainMenu.tpl");

if ($LANG == 'w') {
include("newyddion.txt");
} else {
include("news.txt");
} ?>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

The page displays properly, i.e. the 'space paragraphs' must go beyond the
image height. Using a single style="clear:both" does not work

As I said I hope somebody has seen this problem before, if not I will try
and create a 'minimal' html + css web page which demonstrated this IE6
problem.

TIA

Cheers

Barry

 

[Els]

I have a cross browser problem that I hope somebody has seen and found a
work-around:

The problem is with an image aligned left the text does not show up on the
page in IE6. The display works properly in IE7, Opera 8.53, FireFox
1.5.0.11 and Netscape 8.1.2.

[snip some code]

As I said I hope somebody has seen this problem before, if not I will try
and create a 'minimal' html + css web page which demonstrated this IE6
problem.

As you didn't give a URL, I can't be certain which of the usual
culprits applies here. The effect is called the peek-a-boo bug, and is
documented here:
http://www.positioniseverything.net/explorer/peekaboo.html

 

[Barry Morris]

Cool!

Thanks for the helpful reply!!

I (with your help) fixed this be placing the 'news' within a relative
position div <div style="position:relative">


Cheers

Barry

 

[Jonathan N. Little]

Hello

I have a cross browser problem that I hope somebody has seen and found a
work-around:

The problem is with an image aligned left the text does not show up on the
page in IE6. The display works properly in IE7, Opera 8.53, FireFox
1.5.0.11 and Netscape 8.1.2.

The image / text is user defined using a web content editor by people with
limited HTML knowledge, so I would like to fix this by coding 'around' the
user supplied code:

Classic IE Peekaboo bug. B*itch ain't it! Aside of El's link which has a
very good explanation of it, I stumbled upon a possible easy fix, seems
to work in all cases but time will tell. Define for IE the line-height.
The default value is 'normal' but having any numeric value for IE seems
to work, '1.2' ≈ 'normal'.

I have found just adding:

BODY { line-height: 1.2; }

Appears to fix it.

 

[Els]

Classic IE Peekaboo bug. B*itch ain't it! Aside of El's link which has a
very good explanation of it, I stumbled upon a possible easy fix, seems
to work in all cases but time will tell. Define for IE the line-height.
The default value is 'normal' but having any numeric value for IE seems
to work, '1.2' ≈ 'normal'.

I have found just adding:

BODY { line-height: 1.2; }

Appears to fix it.

Yup - I've come across that one lately too, (and forgot about it when
replying to Barry!), and it would be interesting to test it on all
classic peek-a-boo occasions. If it works for all of them, it kinda
makes all the other solutions obsolete though - means we can throw out
about half of all CSS discussions from the web ;-)

 

[Andy Dingley]

Hello

PAUOFRO

 

[Jonathan N. Little]

Yup - I've come across that one lately too, (and forgot about it when
replying to Barry!), and it would be interesting to test it on all
classic peek-a-boo occasions. If it works for all of them, it kinda
makes all the other solutions obsolete though - means we can throw out
about half of all CSS discussions from the web ;-)

Well I have been using in all the peekaboo situation that I have had to
hack in the past and seem to work. A fair sample but not exhaustive testing.

 

[Jonathan N. Little]

PAUOFRO

If newbie enough not to supply a URL he will certainly have no clue what
PAUOFRO is! I had to look it up....as obscure as CBBRU - Crystal Ball
Broken Require URL

 

[dorayme]

Classic IE Peekaboo bug. B*itch ain't it! Aside of El's link which has a
very good explanation of it, I stumbled upon a possible easy fix, seems
to work in all cases but time will tell. Define for IE the line-height.
The default value is 'normal' but having any numeric value for IE seems
to work, '1.2' ≈ 'normal'.

I have found just adding:

BODY { line-height: 1.2; }

Appears to fix it.

I have heard of doing this on the container in which the problem
exists. But you are suggesting simpler, just on body no matter
how it goes below. Most interesting and easy to remember.

 

[Jukka K. Korpela]

Scripsit dorayme:

I have heard of doing this on the container in which the problem
exists. But you are suggesting simpler, just on body no matter
how it goes below. Most interesting and easy to remember.

Actually

* { line-height: 1.2; }

is even easier and probably safer. That way, any potentially offending
element has line-height set directly, not just via inheritance, which is -
as we know - problematic not only to most CSS authors but also to CSS
implementations.

Besides, for most fonts actually used on web pages, 1.2 is too small, but
that's a different issue. The fixing effect does not depend on the value
used, only on the setting of line-height value to _something_.

 

[dorayme]

Scripsit dorayme:


Actually

* { line-height: 1.2; }

is even easier and probably safer. That way, any potentially offending
element has line-height set directly, not just via inheritance, ...

If this is as effective for the problem concerned, this is a fine
point of yours. I only say "if" because my impression was that
there was something a bit irrational in the business of
line-height being a fix. I will certainly remember and try it.

 

[Barry Morris]

Andy,

PAUOFRO? what is this acronym?

Els identified the problem as the 'Peek-a-boo' bug and enabled me to fix the
problem.

Perhaps I should have supplied the web address? Except at the time the www
address used different CSS and the 'faulty' site was still on localhost.

The (rather sparse) page that did not work, but works with one of the
peek-a-boo work-around's is:

http://www.safleswyddi.com/news.php

Cheers

Barry

 

[Sally Thompson]

Andy,

PAUOFRO? what is this acronym?

<snip>

I may be wrong but after some research I decided it was Post A Url Or Flutter
Right Off - or something roughly similar -)