MozTW 討論區 • 檢視主題 - Fx與IE的Margin定位

所有顯示的時間為 UTC + 8 小時

Fx與IE的Margin定位

第 1 頁 (共 1 頁)

[ 4 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

cstony0917

文章主題 : Fx與IE的Margin定位

發表於 : 2007-04-30, 02:45

註冊時間: 2006-01-31, 22:13
文章: 18
來自: WAAGGHH!!!

最近一直在做首頁logo用的底圖

在配上導覽列的時候一直出現問題

網頁連結:

http://nicebb.com/test/BerserkFuhrer/mnp/margin.htm

CODE簡介:

我把menu包在名為Header的div區塊

並且用css設定header的高度&背景圖

想要利用CSS的margin-top來對其Header的底部

但是設定margin-top的屬性之後發現整塊Header都在動

但是用ie看就跟我想的一樣 :oops:

------------------------------------------------------

網頁也通過w3c的xhtml 1.0 strict的驗證了

不知道為什麼還不能達到想要的效果

越來越對Fx Orz了.... :cry:

最後由 cstony0917 於 2007-04-30, 15:03 編輯，總共編輯了 1 次。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

catho7

文章主題 :

發表於 : 2007-04-30, 13:42

註冊時間: 2004-08-01, 23:05
文章: 246

想知道為何你要用Header套著menu div區塊
這太欠缺彈性了

修改這處:

代碼:

#menu {
margin-top:30px;
background:#A2BA25;
float:left;
width:100%;
}

為何要這樣要由其他人補充了，詳細的我也不清楚

P.S.charset缺了「 /」

_________________
Journey of Blue
貓BLOG 我的Firefox
美味書籤

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

cstony0917

文章主題 :

發表於 : 2007-04-30, 14:54

註冊時間: 2006-01-31, 22:13
文章: 18
來自: WAAGGHH!!!

catho7 寫:

想知道為何你要用Header套著menu div區塊
這太欠缺彈性了

請問您說的缺乏彈性是什麼意思呢?_?

catho7 寫:

修改這處:

代碼:

#menu {
margin-top:30px;
background:#A2BA25;
float:left;
width:100%;
}

為何要這樣要由其他人補充了，詳細的我也不清楚

設定float:left;之後好像就正常了.... :oops:

謝謝你

catho7 寫:

P.S.charset缺了「 /」

回頂端

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

不惑仔Boohover

文章主題 :

發表於 : 2007-04-30, 22:16

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩

用padding就不會把背景截掉了。margin-top因疊合作用，會將外層背景隱藏（包括背景色及背景影像）。

代碼:

#menu{ 
padding-top:30px; 
 }
#menu ul{background:#FFFFCC;}

這樣就不需要動用到float了（照原來的意思是沒有用到float）

padding-top要定義在#Header或#MainContent也可以，像是

代碼:

#Header{ 
background:url('http://nicebb.com/images/logo.png');
height:249px;
padding-top:1px;
}

如果要在所有瀏覽器都正常顯示，這種狀況最好利用padding。別因為總是依賴ie的「好意」，而忽略了正確的用法，這裡的情況看起來雖然有點討厭，但是fx畢竟不能說它是錯的。

ps.通過W3C驗證，不代表就能在所有瀏覽器正確呈現，各家瀏覽器是不可能一模一樣的，而且支援的程度也不盡相同。 :lol:

_________________
時間，人為與自然的衝突。~不惑仔

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

第 1 頁 (共 1 頁)

[ 4 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 2 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :