Question

I’m using the Google Charts API which renders charts using an <iframe>, however there’s an large amount of white space on both the bottom and top parts which I’d like to remove. I’ve been attempting to do this in a variety of ways (explained below), but can’t seem to get it to work out how I want it to;

My HTML markup

<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200"     frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div

The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.

My CSS Styling

#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}

#chart-contents {
    margin-top: -45px;
}

#chart-nav {
    margin-top: 15px;
    padding: 0px 15px;
}

The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it’s still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.

However, this doesn’t seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.

So far I’ve tried;

• Use of negative top, padding-top and margin-top properties.
• Positioning of absolute and relative in conjunction with top.
• Using the clip property in conjunction with a relative position.

I’m starting to think that this is something that perhaps isn’t possible without further elements or javascript?

Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!

If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google’s API use of AJAX, it’s rather difficult.

Answer 1

You could always place the previous element on top of your iframe so it looks like it’s starting sooner than it actually is. This obviously works for an element coming after the iframe as well.

All you need to do to achieve this is to give the element position: relative.

Preview: http://jsfiddle.net/Wexcode/XyVGr/