2009-11-21 29 views
0

我不能爲我的生活弄清楚如何得到我的佈局一個元件能夠在IE 7妥善安置你可以在這裏看到的頁面:無法獲取DIV定位正確在IE7

http://www.iancreates.com/debbie/contact/

在Firefox中正常工作,但如果您在IE 7中查看,您會看到側欄位於主體內容下方。我嘗試了所有我能想到的(浮動兩個div,更改寬度和邊距/填充以說明IE框模型),但無濟於事。

下面是相關的CSS:

.content-left { 
width:670px; 
height:auto; 
margin:0 30px 0 10px; 
padding:0; 
float:left; 
} 


.content-right { 
width:240px; 
height:auto; 
margin:0; 
padding:0; 
float:left; 
} 

我感謝幫助!

回答

1

這是一個經典的IE問題,略帶不切實際的頁面佈局相結合。

您已將peace-main div的寬度設置爲100%,因此旁邊沒有正確內容的空間。但是,在符合標準的瀏覽器中,div沒有任何高度(因爲它只包含浮動元素),所以正確的內容在其下面並不是問題。在IE7中,div被擴展爲包含它的內容,即左邊的內容div,因此它得到一個高度,並且當正確的內容低於它時,它也結束在左邊的內容之下。

只需從peace-main風格刪除width: 100%;風格。

0

發佈CSS代碼會很有幫助。嘗試使用「位置」。

+0

我加入了有關CSS的帖子。試過的位置,但似乎沒有解決它。 – 2009-11-21 21:29:15

0

@ Guffa的回答在我的估計中是正確的。我認爲你的頁面可能有驗證錯誤也會導致它被錯誤地解析。看着你的標記,它看起來像你想要div.content-rightdiv.content-left在同一個容器div,但他們不是,導致@Guffa指出的問題。

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png

如果他們是在同一個容器但是,因爲我認爲你打算,那麼這個問題將一併解決。試圖解決這一額外的div結束標記,看到做什麼:

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg