Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Thursday, November 09, 2006

[Blog] Overflow problems in IE (sidebar appears at bottom of blog)

之前我的Blog中的side bar(也就是右邊那一整欄)在使用Internet Explorer瀏覽時(Firefox沒有問題),有時候會發生整個sidebar跑到頁面的最下方,但有時候又不會....XD,後來不爽了去問了一下Google大神才知道,原來是因為sidebar被blog中的content所擠壓,導致sidebar在主頁面的右邊(通常放在右邊)沒有足夠的空間擺放,而跑到整個Blog的下面去,主要有下面兩項原因導致這種情形發生,以下底這段sample為例:
#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

  1. post的內容為文字時,因為沒有斷行,整行文字超過main-wrapper的width了。
  2. post的內容包含圖片時,因為太大張,超過了main-wrapper可接受width。
※以上2種情形在Firefox中,會自動產生scroll bar,例如:[Blog] IE底下一片空白的UTF-8網頁...囧,而不會導致sidebar跑掉。若在Firefox中還有這樣的問題的話,那可能就是自己太智障,將sidebar-wrapper的width值設太大,導致"outer-wrapper -> width < main-wrapper ->width + sidebar-wrapper ->width",那就是你的錯了,快改小一點吧...
.Solution:#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
....... }

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

........ }
改成上面的樣子,就行了... ^_^

5 Comments:

Who: 夏娃 Class:
When: January 02, 2008 5:26 PM  

解決了
謝謝你^-^

Who: Tsung-Kai Chen Class:
When: January 03, 2008 8:25 AM  

To 夏娃:
不客氣,似乎是個才女來的..^_^,特別的是還有Pixnet Album @@",大馬沒有此類的免費服務可以用嗎..

Who: Pay Fong Computer Society Class:
When: March 01, 2008 10:26 PM  

i will try to do it ~
i am also malaysian~XD

Who: Pay Fong Computer Society Class:
When: March 01, 2008 10:33 PM  

我找不到main那一段!
請問是body ma = =?
歐...
i am stupid.........

Who: Tsung-Kai Chen Class:
When: March 02, 2008 3:23 AM  

To Pay Fong Computer Society:
呃...每個template不一定都有這個變數,也許你的template是別的名子,所以你必需自行判斷一下,我的main-wrapper也就是指你的blog中,主要內容呈現出來的那塊block的div id!! ^_^