G'day,
I am using CSS to construct bar charts from nested DIVs. In general this
works fine. However, in certain circumstances I need to display multiple
charts inline. To get consistent results on IE and Moz I wrap each chart in
a <TABLE style="display: inline">. Unfortunately, IE ignores the top-margin
and left-margin properties of a few of the charts, which end up in the top
left corner of the page. The charts that get this treatment depends on the
size of browser window.
The problem goes away if I use display: block instead of display: inline
but for my purposes I need the charts displayed inline.
The problem occurs for IE6 on Win2K and WinXP. There is no problem with
Mozilla 1.7.3 (on RHL9).
Attached is an example HTML document that illustrates the problem and an
image of the results for IE6.
Here's the style:
div {
box-sizing: border-box;
-moz-box-sizing: border-box
}
..histogram {
background-color: #ded;
text-align: left
}
..histogram .title {
font-weight: bold;
font-size: large;
position: absolute;
text-align: center
}
..histogram .legend {
line-height: 24px;
position: absolute
}
..histogram .x_axis {
position: absolute
}
..histogram .y_axis {
position: absolute
}
..histogram .bars {
position: absolute
}
..histogram .bars .bar {
border-right: #000 1px solid;
border-top: #000 1px solid;
background: #8888ff;
border-left: #000 1px solid;
border-bottom: #000 1px solid;
position: absolute
}
..histogram .bars .block {
position: absolute;
background-color: #cdc
}
..histogram .axis {
font-size: 12px;
white-space: nowrap
}
..histogram .label {
font-weight: bold
}
..histogram .x_axis .label {
position: absolute;
text-align: center
}
..histogram .x_axis .value {
position: absolute;
writing-mode: tb-rl;
text-align: left
}
..histogram .y_axis .label {
position: absolute;
writing-mode: tb-rl;
text-align: center
}
..histogram .y_axis .value {
position: absolute;
text-align: right
}
If you can suggest a workaround/fix I'd really appreciate it.
Thanks,
Chris.
