Sent by Brandon Oto on 29 December 2002 11:11
on 12/28/02 5:03 AM, Brandon Oto at [EMAIL-REMOVED] mumbled
something about:
> http://berkeleyhigh.org/design/cb.html (CSS at:
> http://berkeleyhigh.org/design/style.css )
Ooh, ooh!
All right, so I've been messing with this (converted to XHTML, fixed the
preloading problem, etc.), and in the midst of it all I somehow managed to
do something remarkable.
While all of the weird and wonderful CSS that I used elsewhere on the page
cooperated nicely, the ordinary links -- the LINKS -- that sit in the middle
of the text were going bat-crazy.
The culprit? IE/Win, of course. Blastard.
So here's the deal. The links were fairly basic... black italic in their
:link and :visited state, orange italic in their :hover and :active. Simple
stuff, and working fine yesterday. As they certainly should. They're links,
for god's sake.
But in IE 6, upon mouseover... the link would correctly turn orange, and the
background of the ENTIRE LINE of text that it sat in would turn black.
All of it. Thus making the text invisible, since it's black, and the only
thing you can see being the link, since it turned orange.
What's the best part? When you MOUSE OFF, the link turns back (as it
should), but the LINE STAYS BLACK. So the entire line is now invisible.
If I explicitly gave the link a background color, its background would turn
that color, but the rest of the line would still be black. And here's a
telling point: if I made the link's background transparent, it would end up
black... suggesting that something behind the link is what's causing the
color.
Apparently if you resized the window, the black line would go away. Yummy.
After sifting through the code, I do NOT know what I did that ended up
causing this (since I assume it was triggered by one of the changes I made
during the day), but I DO know what it centers around: changing color.
Here are the two relevant rules in their totality:
div#content a:link, div#content a:visited {
color: #000;
background: transparent;
text-decoration: none;
font-style: italic}
div#content a:hover, div#content a:active {
color: #E77F1A;
background: transparent;
text-decoration: none;
font-style: italic}
And as far as I can tell, the only property that matters is the
color:#E77F1A in the second rule. If it's there, the bug happens; if it's
not, it doesn't. Also, if the color is the SAME as in the first rule (#000)
then the bug doesn't seem to occur -- so what matters is if you CHANGE
color. I don't think that anything else in these rules matters.
So, we've certainly got a bug here. My questions are: Is it known? If not,
can anyone find the other piece of the trigger? And is there a way to fix
it, other than just not using a color change (which is what I ended up
doing)?
Again, the page is at http://berkeleyhigh.org/design/cb.html , and the CSS
is at http://berkeleyhigh.org/design/style.css . I left the page, for now,
hooked to the buggy version of the CSS.
Thoughts are welcome.
- Brandon
