1 reply [Last post]
cpudney
Offline
newbie
Last seen: 17 years 16 weeks ago
Timezone: GMT+8
Joined: 2004-10-05
Posts: 2
Points: 0

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.

cpudney
Offline
newbie
Last seen: 17 years 16 weeks ago
Timezone: GMT+8
Joined: 2004-10-05
Posts: 2
Points: 0

IE randomly ignoring top-margin, left-margin of DIV style

G'day,

Following the advice of PositionIsEverything.net I inserted a position: relative in both the enclosing TABLE and .histogram styles. This fixed the problem Laughing out loud

Regards,
Chris.