向下移动页面以允许标题图形

Question

I am working with a program that allows me to add content, within a cell, in a table. All types of content is allowed, however, so I have added a reference to a stylesheet that is allowing me to re-brad the application.

The application is accessed via web browser inside our organization using mostly IE8 and IE10, as well as the application interface which use IE7 mode. Therefore, it has to be compatible with all of those browser modes at various screen resolutions.

What I am trying to accomplish is adding a header graphic, to a page that never had one. The layout is as such

<table width="60%">
    <tbody>
        <tr>
            <td>
                Here is my content
            </td>
        </tr>
    </tbody>
</table>
Rest of page content here

I want a header image to cover the top part of the browser, so I have inserted an image

In the HTML I get to input

<img src="/pathtoimage.png" class="newhead">

CSS

.newhead
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}

Since the graphic is removed from the document flow, the rest of the page content wants to start behind the graphic.

Since the graphic will change heights, depending on browser size (adjusting proportionately on width), the content needs to move down by that same amount.

Any advice is appreciated on how to best accomplish this. I have been racking my brain at how to do this, and have it work with IE7 mode (I know, I know)

What I have been attempting is to use a transparent image that is 60% width of the header graphic (same height) - that way it would resize proportionately along with the header graphic) but getting it to properly fill the table, or stay 60%, or do anything according to plan has proven to not work.

Again, thank you for any help

Answer 1

Why make the position absolute? You can change the side of the header and have it push down as to whatever size you'd like it to be.

.newhead
{
    width: 100%;
    display: block;
}

and in case you want to get rid of the default padding:

body
{
    margin: 0;
    padding: 0;
}