फ्लोट बाएं इंटरनेट एक्सप्लोरर 8

Question

में काम नहीं कर रहा है मेरी साइट पर Family Law Act मैं एक-दूसरे के ऊपर खड़े चित्रों/प्रोफाइलों की दो क्षैतिज पंक्तियां प्राप्त करने की कोशिश कर रहा हूं। शीर्ष पंक्ति एक शहर के लिए है, प्रोफ़ाइल की निचली पंक्ति किसी अन्य शहर के लिए है। शीर्ष पंक्ति ठीक से तैरती है, लेकिन नीचे की पंक्ति, जैसा कि आप देख सकते हैं, फ्लोट नहीं किया गया है। इसके बजाय तस्वीरों को लंबवत रूप से एक दूसरे के शीर्ष पर रखा जाता है।

यह क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है लेकिन इंटरनेट एक्सप्लोरर 8 में यह समस्या है।

कोई भी विचार?

सीएसएस

#Vancouver {float:left; display:block; } 
.vancouver {float: left; padding-right: 10px;} 
#New_York {clear:both; float:left; display:block; margin-top:20px; } 
.newyork {float: left; padding-right: 10px; } 

एचटीएमएल

<div id="Vancouver"> 
<div class="headVan">Vancouver</div> 
<div class="vancouver a"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li> 
<li>Tom JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver b"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver c"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver d"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver e"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

</div> 

<div id="New_York"> 
<div class"headvic">New York</div> 
<div class="newyork a"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li> 
<li>Nat JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 
<div class="newyork b"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li> 
<li>Jed JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 
</div> 

Answer 1

तैरता आम तौर पर सबसे अच्छा काम जब युक्त div अपने न्यूयॉर्क में एक चौड़ाई

है div यह एक चौड़ाई (की चौड़ाई देने की कोशिश अपने सामग्री क्षेत्र - जो भी हो सकता है)

#New_York { 
    clear: both; 
    float: left; 
    display: block; 
    margin-top: 20 px; 
    width: XXXXX px; 
} 

मैं इसे अपने वैंकूवर div में भी जोड़ दूंगा।

Answer 2

इस के बजाय ऐसे:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

साथ:

<meta http-equiv="X-UA-Compatible" content="IT=edge,chrome=IE8"> 

<meta charset='utf-8'> 

यह मैं एक WordPress साइट में एक समान समस्या हल हो। शायद कॉलम के बीच <div style="clear:both"></div> जोड़ें। अगला चरण: डेवलपर टूलबार एडिन के साथ डिबगिंग करने का प्रयास करें - आपको समस्या के बारे में अधिक जानकारी मिलेगी।

Answer 3

यह आपके लेआउट के आधार पर दिखाई देता है कि आपको केवल सामग्री पर float कॉलर्स (#Vancouver और #New_York) पर कॉल की आवश्यकता नहीं है। यदि ऐसा है, तो उन फ्लोट्स को हटाने से आपकी समस्या हल हो जाती है।

आप #New_York पर clear को भी हटा सकते हैं।