Ok, I've verified this on IE9 and Firefox 10.
I am writing a few classes that will allow for customized reports being displayed to the screen. So, the HTML is generated by a
Java program. Some styles are always there, and some are dynamically generated, so the resultant HTML references a .css file, as well as defining additional styles in the HEAD portion.
Here's the CSS I've got:
Here's the HTML I'm working with, note that it has some internal styles :
Now, here's the conundrum.
1) Note the BR tag between each DIV block. That is required because of the absolute positioning. If I didn't include it, the DIV blocks would display over each other (ie: same absolute vertical position), making an unreadable mess.
2) HOWEVER, note the "tint1" for some of the DIV elements. I have a height because if I don't, while the bold of the text remains, the background color setting will vanish!
3) BUT, having added that height, I now have extra space, as if the display was showing a sort of double-spaced format for just that line, and eliminating the BR will cause things to display as I want.
4) FINALLY, if I remove the "tint1" style from the DIV, everything is fine. Well, except that I don't have the background color.
In an ideal world, I'd like to be able to have positioning such that vertical is relative, and horizontal is absolute, in my generated styles, so that I don't have to deal with some of this monkey business.
In the real world, I want to be able to change the background color (noted with the "tint1" style) without having to specify a height attribute in the style, and thus having to worry about whether I should check for an overridden background and have to determine if I need to skip the BR tag.
Why am I getting the behavior I am? How do I solve this problem?
Thanks in advance.