Black horizontal line artifacts on controls

[Bruce_Dickey]

Hi,

I've populated the TreeView as shown below. In both Firefox 3.6.15 and Chrome 12.0.742.124, when a tree leaf item is selected, it is rendered as a light blue dashed line (instead of text with a selection background). The item text is fine when the page is refreshed, before it is selected. When a folder node is selected, the text is fine, however. I have not tried in another browser.

Please help.

Thanks,
Bruce


[{
    "id" : "pm_group",
    "caption" : "PM",
    "sub" : [{
        "id" : "pm system type",
        "caption" : "system type"
    },
    {
        "id" : "pm vcc enable",
        "caption" : "vcc enable"
    }]
},
{
    "id" : "psd_with_ftb_group",
    "caption" : "PSD WITH FTB",
    "sub" : [{
        "id" : "psd ftb system type",
        "caption" : "system type"
    },
    {
        "id" : "psd ftb vcc enable",
        "caption" : "vcc enable"
    }]
},
{
    "id" : "psd_without_ftb_group",
    "caption" : "PSD, NO FTB",
    "sub" : [{
        "id" : "psd system type",
        "caption" : "system type"
    },
    {
        "id" : "psd vcc enable",
        "caption" : "vcc enable"
    }]
}]

[linb]

Did you set custome style?

[Bruce_Dickey]

Found the problem.

I had the following erroneous "reset" CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; color: black; font-size: 100.1%;    font-style: normal; font-family: arial,helvetica,verdana,sans-serif;         /* font: inherit;         CAUSES LINB TreeView LEAF NODE CAPTIONS TO BE DISPLAYED AS A DASHED LINE WHEN SELECTED */ vertical-align: middle; horizontal-align: left; }

Thanks,
Bruce

[Bruce_Dickey]

This seems to have been a problem on older, outdated browsers (Like Firefox 3.6.7). Is currently OK on Firefox 11, Opera 11.61, Chrome 18.
`font: inherit` is not a problem with the recent browsers. I have not been able to test with IE because my app page does not load in that browser (any version of it).

[Bruce_Dickey]

Hi Linb,

One exception to that is Firefox 11 on Red Hat Enterprise Linux 5, 64-bit. When using CTRL+ and CTRL- to zoom the web page, the black horizontal lines appear at times on buttons (linb.UI.Button).  I've also seen it in the edit boxes under Properties in VisualJS on this same OS but with Firefox 3.6.7.

On the buttons, the line seems to appear at the edge of the images or regions. Please see attached pic; this is after hitting CTRL+ a few times.

It could be construed to be a Firefox bug, but would you be able to address it in your code anyway?

Thanks

[linb]

It's a render bug in firefox, maybe you can try to modify images in "appearance\default\Button" to avoid that.

The "black line" appears in the color junction of those images .

[Bruce_Dickey]

Update: I agree it is a Firefox bug. In looking at it some more, at certain zoom levels, the black line is not even at color boundaries. So I doubt any changes to the images will help. Sometimes there are two black lines.

I have also seen this recently on the buttons in another app: Trac.