CODEWITHSUNDEEP
cssinternet-explorer-7internet-explorerbackground
user184106
user184106

Reputation: 89

IE7 Overflow & IE7 Background Images

Two problems, both caused by IE7

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;

}

Upvotes: 0

Views: 5984

Answers (2)

Brian Kim
Brian Kim

Reputation: 25336

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>

Upvotes: 1

Bela
Bela

Reputation: 3464

I think I solved 1) with these changes

.clip drop float right, change position to absolute, and give it a right of 0.

.postheader add position relative

.postheader h2 width of around 400px

Seemed to work in IE7 and firefox, not sure how it looked in other browsers though.

Upvotes: 1

Related Questions