Stylesheets - IE6 only display text when you mouse over it (!)

Author

IE6 only display text when you mouse over it (!)

Edward

2007-03-16, 11:16 pm

IE6 only displays certain text on my site if you mouse over it (!).
I reduced the HTML down to this code below which still shows this
effect/bug.
My temporary solution was to take out all the comments from my HTML.
I reproduced this effect on two computers which use IE6.

Why will IE6 not show the first line of text below when the page
loads?

To see this effect for yourself, view this page online at:
http://www.tanguay.info/web/ieRenderingBug.htm

---

<html>
<body>

<div style="background-color: #fff">

IE6 will not display this line when the page loads. Why is this?

<div>

<table>
<tr>
<td>All browsers display this. But IE6 will NOT display the above
line when the page loads (only when you select the text with your
mouse or if you remove the comment or this table will IE6 display the
above comment). Why is this?</td>
</tr>
</table>
</div>

</div>

</body>
</html>

zzpat

2007-03-17, 11:18 pm

Edward wrote:
> IE6 only displays certain text on my site if you mouse over it (!).
> I reduced the HTML down to this code below which still shows this
> effect/bug.
> My temporary solution was to take out all the comments from my HTML.
> I reproduced this effect on two computers which use IE6.
>
> Why will IE6 not show the first line of text below when the page
> loads?
>
> To see this effect for yourself, view this page online at:
> http://www.tanguay.info/web/ieRenderingBug.htm
>
> ---
>
> <html>
> <body>
>
> <div style="background-color: #fff">
>
> IE6 will not display this line when the page loads. Why is this?
>
> <div>
> 
> <table>
> <tr>
> <td>All browsers display this. But IE6 will NOT display the above
> line when the page loads (only when you select the text with your
> mouse or if you remove the comment or this table will IE6 display the
> above comment). Why is this?</td>
> </tr>
> </table>
> </div>
>
> </div>
>
> </body>
> </html>
>

Have you tried using display :inline. It should work.

<div style="background : #fff; display: inline;">IE6 will not display
this line when the page loads. Why is this?

You can also put it in your style sheet.

..comment {
display :inline;
}

<div class="comment">IE6 will not display this line when the page loads.
Why is this?

Andy Dingley

2007-03-20, 12:06 am

On 16 Mar, 23:02, "Edward" <edw...@tanguay.info> wrote:

> <html>
> <body>

Where's your <head> etc.? This is invalid HTML, so browsers are free
to do whatever they like with it. Don't even think about chasing
peculiar rendering issues until you've fixed gross issues like this.

Richard Formby

2007-03-20, 12:06 am

Andy Dingley wrote:
> On 16 Mar, 23:02, "Edward" <edw...@tanguay.info> wrote:
>
>
> Where's your <head> etc.? This is invalid HTML, so browsers are free
> to do whatever they like with it. Don't even think about chasing
> peculiar rendering issues until you've fixed gross issues like this.

Er, Andy, <head> is an optional element.

So FWIW so is <html>

<body> too.

And their ending tags.

This is valid:

<title>valid page</title><p>page text.</p>

(once you add a DOCTYPE of course and perhaps some encoding stuff).

To the OP;

FWIW IE 5.5 *does* display the line. So does IE7.

This is just one of the things you have to do to test web pages. Run it in
IE (all flavours) and "fix" it. In this case you have found one fix, remove
the comment.

Or, better yet, make it into a better formed document, with all the
"optional" elements and tags present. IE sometimes chokes on these if they
are missing, even though the spec says they are optional, but whenever has
IE adhered to the specs? :-)

Wise, no, mandatory, is to stick a DOCTYPE up there at the top. Without one
you are running the browser in quirks mode where it carefully reproduces the
bugs from older versions.

--
Richard.

scripts.contact@gmail.com

2007-03-20, 12:06 am

On Mar 19, 7:05 am, "Richard Formby" <r...@invalid.com> wrote:
> ...
> Wise, no, mandatory, is to stick a DOCTYPE up there at the top.Without one
> you are running the browser in quirks mode

> where it carefully reproduces the bugs from older versions.

lol

Jukka K. Korpela

2007-03-20, 12:06 am

Scripsit Richard Formby:

> Er, Andy, <head> is an optional element.

It is not. This looks as if you had not learned the difference between
"element" and "tag" before giving public lectures on markup...

> This is valid:
>
> <title>valid page</title><p>page text.</p>
>
> (once you add a DOCTYPE of course and perhaps some encoding stuff).

Encoding stuff is not a validity issue. And when you added the title
_element_, you added the required _content_ of the head _element_.

Sadly enough, the IE 6 bug does not appear when we turn the test document
into a valid document, no matter how besserwisserism we exercise. But never
besserwisser in a company where you might get bestwissered by someone!

> This is just one of the things you have to do to test web pages. Run
> it in IE (all flavours) and "fix" it.

That's unrealistic. Testing with IE 6 and IE 7 is enough testing on IE.
Nobody is really masochistic enough to support IE 3, for example. (There is
_very_ little in CSS you could do if you wanted to be IE 3 safe.)

> In this case you have found
> one fix, remove the comment.

Well, yes, and comments in HTML files are generally harmful (they usually
range from futile to plain wrong). But I wouldn't feel quite safe if I had
encountered such a bug and found a fix that _seems_ to help.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Andy Dingley

2007-03-20, 12:06 am

On 19 Mar, 13:05, "Richard Formby" <r...@invalid.com> wrote:

>
> Er, Andy, <head> is an optional element.

No, it's a mandatory element. It's an optional tag, but then why
confuse the poor OP even further? <title> is mandatory as both a tag
and an element and that's certainly missing.

I have no idea if the <head> element was present here, or where it
was. That's a question for the arcana of IE's recovery procedures
after invalid markup, which is something I intend to spend my whole
life studiously avoiding needing to know anything about. By observing
the emergent behaviour I suspect that it actually occurs somewhere
between the first and the second <div> start tags, but I wouldn't even
try to explain why!

There is no good reason to omit <head>, </head> or the <head> element
in authoring HTML. If it's ever done, and ever done validly, then I
can only assume it's as some sort of Finnish party trick and not fit
for polite company (a bit like Humppa). The OP should add all the
relevant tags and then examine his results again. It's mandatory: it
might not be technically essential, but it's ordered by our sheer
arbitrary diktat. Chasing around in the grey areas that almost no-one
understands precisely is not a practical or efficient way to gets
pages authored.

> (once you add a DOCTYPE of course and perhaps some encoding stuff).

AIUI, there's always a doctype. If you omit the doctype declaration,
the worst that happens in all current browsers of interest is that
they default to their own internal HTML 2-like tag soup slurper.
There's still an implied doctype though and the need (or lack of)
<head> or <title> elements is just the same as if it had an explicit
doctype declaration.

Edward

2007-03-20, 7:17 am

> Where's your <head> etc.?

Sorry, here is the same example which validates as "Valid HTML 4.01
Strict" at http://validator.w3.org/check
And it still has the IE6 problem.
Sometimes (not always) IE6 will even show only the TOP half of
characters until you mouse over them, so this is definitely a CSS/IE
rendering issue and not a valid HTML issue. The display:inline
suggestion above fixes this example but on my site interfered with too
many other CSS settings so my current solution is to hide comments
from Internet Explorer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>Example of the IE6 bug (and sometimes IE7)</TITLE>
</head>
<body>

<div style="background-color: #fff">

IE6 will not display this line when the page loads. Why is this?

<div>

<table>
<tr>
<td>All browsers display this. But IE6 will NOT display the above
line when the page loads (only when you select the text with your
mouse or if you remove the comment or this table will IE6 display the
above comment). Why is this?</td>
</tr>
</table>
</div>

</div>

</body>
</html>