IE7 débordement et IE7 Contexte Images

Question

Deux problèmes, à la fois causés par IE7

www.myvintagesecret.com

1) J'ai une division appelée .postheader qui détient le titre et un autre div appelé .clip. Comme vous pouvez le voir, le clip devrait planer sur le contenu et ne pas le pousser vers le bas. (utilisez un autre navigateur pour tester). Il me donne actuellement un énorme écart quand il devrait seulement aller aussi longtemps que le texte le fait.

.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; 

} 

Des idées? Je peux réduire la hauteur maximale, mais cela entraîne la coupure de la div .clip.

2) Dans la barre latérale, il y a un tas d'éléments appelés .sidebaritem. Ils ont une image de fond qui n'apparaît que dans IE7. Je ne peux pas comprendre celui-ci.

.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) Essayez ceci. Je pense en utilisant la position: absolue au lieu de float: droite va résoudre le problème.

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

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

2) Hmm .. Cela pourrait être l'espace après fermeture).

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

3) Réponse au commentaire: Dans ce cas ... Vous devriez refaire l'arrière-plan. Créez des wrappers avec des arrière-plans uniquement et placez votre contenu à l'intérieur. Le clip doit être l'enveloppe div la plus haute et flotter vers la droite. Faites quelque chose comme ...

<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> 

Answer 2

Je pense que je l'ai résolu 1) avec ces changements

.clip drop flotteur droit, position de changement absolu, et lui donner un droit de 0.

. postheader ajouter la position relative

.postheader largeur de h2 d'environ 400px

semblait travailler dans IE7 et Firefox, ne sais pas comment il a regardé dans d'autres navigateurs bien.