2012-04-02 6 views
0

Also ich ein Tab-Menü haben,CSS IE7 Ausgabe div Verpackung nicht um den Inhalt

SO heißt

Und einmal für die Registerkarte Anzeige mit einem weißen Hintergrund auf den Registerkarten den Inhalt klicken Sie auf die Registerkarte entsprechen. Das Problem in IE7 ist, dass der Inhalt für die Registerkarte zwar angezeigt wird, der Inhalt aber außerhalb meines Tabs und in den Hintergrund gelangt. Dies geschieht nur in IE7.

Der Inhalt Auszeichnungs ist als

folgt
<div class="tabContentRow"> 
    <div class="tabContentImageLeft" style="DISPLAY: inline"> 
     <a href="" target="_blank"> 
     <img width="110" height="110" alt="Video" src="~/?w=110&amp;h=110&amp;as=1" /> </a> 
    </div> 
    <div class="tabContentCopyRight" style="DISPLAY: inline"> 
     <h2>video</h2> 
     <p>Text here.</p> 
    </div> 
</div> 

Und das Problem hat mit meinen beiden divs

<div class="tabContentImageLeft" style="DISPLAY: inline"> 
<div class="tabContentCopyRight" style="DISPLAY: inline"> 

Wenn ich den Inhalt innerhalb dieser beiden divs setzen nicht zu tun, dann auch IE7 es bleibt schön in meinem Tab div. Aber wenn ich es lege, taucht der Tab Div nicht auf und es fügt sich einfach in den Hintergrund ein.

.tabContentImageLeft {float: left; width: 130px; text-align: center;} 
.tabContentCopyRight {float: left; width: 575px;} 

Antwort

1

Fügen Sie ein klares div am unteren Rand Ihrer tabContentRow hinzu. Ihre Elemente sind schwebend und daher aus dem DOM-Fluss herausgenommen.

<div class="tabContentRow"> 

      .....Inner tab markup 


     <div class="clear-fix" style="clear:both;display:block;"></div> 
    </div>