468,140 Members | 1,643 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,140 developers. It's quick & easy.

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

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.
Jul 20 '05 #1
1 7344
G'day,

Following the advice of PositionIsEverything.net
<http://www.positioniseverything.net/articles/hollyhack.html> I inserted a
{ position: relative; } in both the enclosing TABLE and .histogram styles.
This fixed the problem.

Regards,
Chris.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Bob Bedford | last post: by
3 posts views Thread by brian | last post: by
4 posts views Thread by dennis.mcknight | last post: by
9 posts views Thread by Alan Isaac | last post: by
9 posts views Thread by Generic Usenet Account | last post: by
27 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.