Forum Moderators: open
I've been having an issue with IE that causes text to render as blanks. This behavior has been observed by myself with IE6.0 under XP and 2000 and by others with IE5.5. The text does render properly when viewing with Firebird 0.7 (and presumably others). The text will render as background color, but can be selected, and may under certain conditions show up with the proper foreground color after being unselected. Scrolling up and down may cause text to be shown or obscured seemingly at random. Gifs and HRs etc do get rendered properly, and in the position you would expect should text appear. The bug is only apparant in the middle (text) section.
My 3-section page is constructed using a with id tags for CSS table for the header area, a DIV for the body, and a DIV for the footer. Here's the simplified CSS (colors, fonts and decorations left out):
header classes:
#wikiheader {
width: 100%;
padding-bottom: 3pt;
padding-top: 3pt;
border-bottom: 2pt solid #0033FF;
border-top: 2pt solid #0033FF;
margin-bottom: 0pt;
right-border-width: 8px;
}#wikiheaderlogo {
padding-left: 8pt;
padding-right: 8pt;
padding-bottom: 3pt;
}#wikiheadercommands {
text-align: right;
margin-right: 8pt;
padding-right: 8pt;
}#wikiheadertitle {
letter-spacing: -0.1em;
}#wikiheadertitle A {
letter-spacing: -0.1em;
}text body class:
#wikitext {
margin-bottom: 0px;
padding-bottom: 8pt;
padding-top: 8pt;
border-bottom: 0pt;
padding-left: 12pt;
padding-right: 24pt;
}#wikitext IMG {
padding: 8px 8px 8px 8px;
}footer classes:
#wikifooter {
margin-top: 0pt;
border-top: 2pt solid #0033FF;
padding-top: 0pt;
font-size: smaller;
padding-right: 8pt;
padding-left: 8pt;
}I can provide any other information needed, just ask!
Thanks all!
Class
.wikiheadertitle {
letter-spacing: -0.1em;
}
<a class="wikiheadertitle"...
Id
#wikiheadertitle {
letter-spacing: -0.1em;
}
<a id="wikiheadertitle"...
Aviancer, (welcome to WebmasterWorld, by the way) you didn't include any positioning rules - so I assume these divs just flow in the same order they are in the HTML document, right?
If that's the case, I am a bit suspicious of the HTML itself, because rendering bugs usually show up when there are floated, absolute or relative position for the divs. Have you validated the HTML?
Thanks for the warm welcome (and the ideas earlier).
Yes, the document flows as emitted. The document is (now) 4.01 Transitional and the CSS is valid. (errors were minor, <LINK .../> vs <LINK ...>. Same with <META>) The dropout issues are still present.
Birdman,
I said "classes", as that is what they effectively are, but they're called out as ID='...' (only once per type) in the HTML. Sorry for the confusion.
The text will render as background color, but can be selected, and may under certain conditions show up with the proper foreground color after being unselected.
I must have missed giving that point its due during my earlier read-through. What are the css rules that affect text and fonts in the text body class? (I assume that's where the problem is occurring). And also, what is the container for the font - just the <div>, or <p> or <blockquote> or...?
IE can get a little weird in complex inheritance situations. Sometimes an extra class seems to wake it up, even though strictly speaking that rule might be redundant.
<added>
As an aside, IE is not alone in this kind of bug. Opera 7.11
shows a similar bug right here on WebmasterWorld in some of
the form elements. Actually Opera displays what should be
black text as white until it has been selected.
</added>
[edited by: TryAgain at 5:42 am (utc) on Dec. 30, 2003]
Colors, fonts et al are handled (typically) at the nearest <DIV> level, and are assumed to be inherited into the <P>, <A>, lists, and other elements. Here's an excerpt of the HTML that exhibits this problem:
<div id='wikitext'>Hi, you've reached the page about me,
Here are the relevant bloks of CSS (unedited):
BODY
{
color: #010101;
padding-right: 0px;
padding-left: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
margin-top: 0px;
font-family: Tahoma,Verdana,sans-serif;
background: #ff0000;
}
#wikitext
{
margin-bottom: 0px;
padding-bottom: 8pt;
padding-top: 8pt;
border-bottom: 0pt;
padding-left: 12pt;
padding-right: 24pt;
background: #FFCC00;
color: #010101;
}
<rant>FWIW, I do recall IE having issues with CSS and inheritence since 1997 or so... Then, however, the IE support was absoutely dismal, and Netscape even then did handle it properly. Silly Microsoft, making up their own standards as they go.</rant>
I've been warned once about putting in real examples, and I really don't want to be banned from a great resource like this.
Ted,
I've made an example HTML that contains no site references, except for the <LINK> for the css. Is that an acceptable example? It's about 16 lines long.
Thanks
~ Paul
text to be shown or obscured seemingly at random
Sounds like the peekaboo bug to me. Do you have any floating elements?
Doc, I'm not sure what you mean by "floating". I don't specify placement of any particular object, so they "float" in that sense. I'm only using CSS to specify colors, borders, margins, padding, & fonts.
=== CUT HERE ===
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html40/loose.dtd">
<html><head>
<link rel='stylesheet' href='http://www.example.com/pmwiki.css' type='text/css'>
<link rel='stylesheet' href='http://www.example.com/local.css' type='text/css'><title>Title</title>
</head><body>
<table id='wikiheader' cellpadding='0' cellspacing='0'><tr>
<td id='wikiheaderlogo' width='4' valign='bottom'>HEADER WOULD GO HERE
</td>
</tr></table><div id='wikitext'>Hi, you've reached the page about me, Paul Charles Williams. This is pretty skeletal at the moment. This whole site is pretty new, having the domain registered for only about a month, and the wiki set up only for a few days now. Please, feel free to comment -- wikis are fun that way.
<p /><hr />
<p />12/23/2003
<dl ><dt> </dt><dd>The BBC is running a story o
</div>
<div id='wikifooter'>
Footer goes here
</div></body></html>
=== CUT HERE ===
I've googled for "peekaboo bug" and found the link (http://www.positioniseverything.net/explorer/peekaboo.html), along with the "holly hack" fix. After seeing the demo, I believe my issue might be related, but the holly hack doesn't solve the problem.
In the demo, once you get the text to display, it doesn't go away again. In my case, the text will appear (sometimes) and then dissapear later by scrolling, switching windows etc. Scrolling or switching windows never causes the text to be displayed.
width: 94.5%;That seems to have solved the problem, for now. It's not an optimal solution, as on Firebird there is a narrow band of background color down the left side of the page, and on IE the page extends a few pixels beyond the right side of the screen causing the lower scrollbars to appear.
If anyone has a better solution, please let me know.
It's been run through w3c's HTML 4.01 validator, and declared compliant by that tool...
If you can find a small subset of HTML and CSS code that dependably recreates the bug, you will be many miles toward a fix.
Also your HTML code lists two CSS files, so I wasn't sure what to do with that relative to the CSS you posted. Are there perhaps any conflicting or overlapping rules between pmwiki.css and local.css?
Local.css is emitted by the framework, but in my case it's a zero-byte file. Anyway, here's the bug reproduction (drumroll please!).
Looks like a problem when using a background color...
=== CUT HERE ===
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
#wikitext { background: #FFCC00; }
-->
</STYLE>
<title>Title</title>
</head>
<body>
<table id='wikiheader' cellpadding='0' cellspacing='0'>
<tr>
<td id='wikiheaderlogo' width='4' valign='bottom'>HEADER WOULD GO HERE</td>
</tr>
</table>
<div id='wikitext'>Hi, you've reached the page about me, Paul Charles Williams. This is pretty skeletal at the moment. This whole site is pretty new, having the domain registered for only about a month, and the wiki set up only for a few days now. Please, feel free to comment -- wikis are fun that way.
<p />
<hr />
<p />12/23/2003
<dl>
<dt></dt>
<dd>The BBC is running a story o
</dl>
</div>
<div id='wikifooter'>
Footer goes here
</div>
</body>
</html>
=== CUT HERE ===
It's a good idea to use paragraph tags in a semantic fashion (to mark true paragraphs) and not because they create certain layout characteristics, such as a double line break. This little bug in IE is one more reason.
Thanks to everyone for their generous help!
Cheers ~ Aviancer
