IE cuts off part of my CSS when I scroll off

[postitlord]

When I scroll down past the CSS highlighted text, and back up, Internet Explorer loses part or all of the top border. This does not happen in FireFox, nor Opera. Internet Explorer is 100% my target audience.

Is this a known problem, that I can work around?

In the HTML (http://ca.geocities.com/nastajus@rogers.com/ie.htm)<kbd>press escape</kbd>In the CSS (http://ca.geocities.com/nastajus@rogers.com/professional.css)/* code borrowed from Opera's help files */
kbd {
color: #333333;
background-color: #FFFFE1;
font-family: "Verdana";
font-weight: normal;
font-size: 80%;
text-align: center;
border-top: 2px double #0000FF;
border-left: 2px solid #0000FF;
border-right: 2px solid #0000FF;
border-bottom: 2px solid #0000FF;
padding-left: 0.2em;
padding-top: 0em;
padding-right: 0.2em;
padding-bottom: 0em;
line-height: 1.6em;
vertical-align: top;
white-space: nowrap;
}
I tried changing double to solid. No difference.

[coothead]

Hi there postitlord,

for a double border to work, it has to have a mininum value of 3px....

border...1px
space....1px
border...1px

I could not replicate your scrolling problem when testing in I.E. 6.02

See attachment

[coothead]

Hi there postitlord,

further to my previous post I was able to replicate the problem
by placing the <kbd> on the first line of a <p> tag. This was
not caused by scrolling but by the relationship of font-size and
line-height. In my test I set the font-size to 16px and with your
line-height value of 1.6em, the top border was chopped off. See
attachment. I tried two cures, firstly I changed the <kbd> tag
line-height value to 2.3em and secondly, I set the <p> tag
line-height value to 1.8em. From an aethetic point of view I
preferred the second option. I hope that this helps.

[coothead]

Hi there postitlord,

here is how it looks with the <p> tag adjusment...

[coothead]

....and here's how it looks with the <kbd> adjustment....

[postitlord]

All right, so this is a result of my not understanding any of the code I copied.

I changed two things from the original: pixels and colors. Not em. I'm thinking em and px might be disagreeing with each other. The thing is, not understanding em, I didn't touch em.

Original HTML usage:<p>
<span class="note">Tip:</span>
It's the same as pressing <kbd>Ctrl</kbd>.
</p>Original CSS usage. These are all five instances of kbd:kbd {
white-space: nowrap;
}
table kbd {font-size: 90%;}
kbd {
color: #333333;
background-color: #EFEFEF;
font-family: "Verdana";
font-weight: normal;
font-size: 80%;
text-align: center;
border-top: 2px double #CFCFCF;
border-left: 3px solid #BABABA;
border-right: 4px solid #AAAAAA;
border-bottom: 6px solid #909090;
padding-left: 0.2em;
padding-top: 0em;
padding-right: 0.2em;
padding-bottom: 0em;
line-height: 1.6em;
vertical-align: top;
}
kbd:before {
content: "[";
}

kbd:after {
content: "]";
}Everything above produces the attached image. The top border never disappears with this code. Which means I broke something when I changed the pixels.

Edit: Oh. I'm going for solid border on all four sides. Two pixels would look perfect. (I'm catching myself at a communication problem. Since it's the Internet, I can fix it)

So double should go. Solid should come in.

[postitlord]

Deleting line-height: 1.6em; and changing double to solid appears to have solved my problem.

Edit: Edited because my brain is all messed up this day. I'm making the changes on my harddrive but not properly reporting them. Apologies.

[coothead]

Hi there postitlord,

as I said in my first post...
for a double border to work, it has to have a mininum value of 3px....
...I see that you are still using 2px. :supereek:

These links may assist an understanding of the mysterious 'em'...

mozillazine.org (http://kb.mozillazine.org/Em_units_versus_ex_units)
bigbaer.com (http://www.bigbaer.com/css_tutorials/css_font_size.htm)
faqts.com (http://www.faqts.com/knowledge_base/view.phtml/aid/19491)