Question

Two problems, both caused by IE7

http://www.myvintagesecret.com

1) I have a Div called .postheader that holds the title and another div called .clip . As you can see, the clip should hover over the content and not push it down. (use any other browser to test). Its currently giving me a huge gap when it should only go as long as the text does.

.postheader {
    background:url(images/posthead.png) no-repeat;
    min-height:100px;
    max-height:600px;
    padding-right:25px;
    overflow:visible;
}

.clip {
    width:214px;
    height:275px;
    float:right;
    position:relative;

} 

Any ideas? I can make the max height smaller, but that causes the .clip div to be cut off.

2) In the sidebar, there are a bunch of items called .sidebaritem. They have a background image that is only not showing up in IE7. I can’t figure this one out.

.sidebar-item
{
    background:url(images/sidebar.png)top center no-repeat;
    font-size: 12px;
    margin-bottom: 20px;
    padding-left: 18px;
    padding-right:10px;
    padding-top:8px;
    min-height:200px;

}

Answer 1

1) Try this. I think using position:absolute instead of float:right will solve the problem.

.postheader {
    background:url(images/posthead.png) no-repeat;
    position:relative;
}

.clip {
    width:214px;
    height:275px;
    position:absolute;
    top:0;
    right:25px;
}

2) Hmm.. It could be the space after closing ).

background:url(images/sidebar.png) top center no-repeat;

3) Response to comment: In that case… You should redo the background. Create wrappers with backgrounds only and put your content inside. Clip should be the top div inside wrapper and float to right. Do something like…

<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
  <div class="clip">...</div>
  ... content with no bg... just text...
</div></div></div></div>