MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-06-25, 13:42

檢視沒有回覆的主題 | 檢視最近討論的主題


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

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





發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 8 篇文章 ] 
  列印模式 上一個主題 | 下一個主題 
發表人 內容
55126
文章發表於 : 2006-03-23, 15:58 
離線
[MozTW 版主群]

註冊時間: 2006-03-07, 13:35
文章: 245
來自: 豐原市
sorry，更新連結！
http://www.wra.gov.tw/ct.asp?xItem=14326&ctNode=3742
在最新水情的表格處，IE正常顯示，FF顯示錯誤！


附加檔案:
ff.jpg [34.25 KiB]
被下載 325 次
ie.jpg [39.22 KiB]
被下載 333 次


最後由 55126 於 2006-03-24, 13:08 編輯，總共編輯了 3 次。
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.0; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
coolcd
 文章主題 :
文章發表於 : 2006-03-23, 17:59 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
能說說哪裡顯示錯誤嗎?
是不是這個網頁?
感覺上看不太出來有什麼錯呀~

以我自己看到的為例
如果最小字型設成 15
表格版面會有點亂掉

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
coolcd
 文章主題 :
文章發表於 : 2006-03-24, 13:32 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
那個看起來像表格的東西其實是用 span + CSS 做出來的
選單的 html 與 css 分別是
代碼:
<div class="MainMenu2">
<span><a href="..." title="本署簡介">本署簡介</a></span>
<span><a href="..." title="........">........</a></span>
......
</div>

代碼:
.MainMenu2 {
   border-right: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #8C7926;
   border-bottom: 2px solid #8C7926;
   background: #634B0D url(../images_3/MainMenu2Bg_2.gif);
   text-align: right;
   width: 755px;
   padding: 2px 10px;
}
.MainMenu2 a {
   background: url(../images_3/BulletMmenu.gif) no-repeat 2px 2px;
   font-size: 75%;
   white-space: nowrap;
   text-decoration: none;
   color: #FBF8D0;
   display: inline-block;
   border-right: 1px solid #B5B2B2;
   border-bottom: 1px solid #B5B2B2;
   text-align: right;
   padding-top: 1px;
   padding-right: 2px;
   margin-top: 2px;
   width: 7em;
}
.MainMenu2 a:hover {
   background: url(../images_3/BulletMmenum.gif) no-repeat 2px 2px;
   text-decoration: none;
   color: #FFFFFF;
   border-right: 1px solid #FFCC99;
   border-bottom: 1px solid #FFCC99;
}


其中，那個 display: inline-block 好像是 IE Only 的語法
因為我在 W3C 查不到這個東西
最簡單的方法 要讓這東西看起來整齊的話
依據 W3C 標準
應改成 display: table-cell
但 IE 應該尚未支援這個屬性
所以呢... 直接在 HTML 改用 table 比較簡單啦～
真的想用 CSS... 那 HTML 最好改一下
把想放在同一欄的 item 用 div 包起來
會比較好處理

可以參考這一篇的作法。

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
不惑仔Boohover
文章發表於 : 2006-03-25, 13:46 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
div.MainMenu2裡的導覽列的每個連結a之間，僅以span圍繞，如果沒有類似「|」的間隔符號，將不符無障礙網頁的規範，所以依照原來的方式，還必須加入間隔符號，實在增添麻煩，應該改用ul製作導覽列就會符合無障礙規範，而且ie和fx都會正確顯示，類似以下作法：
代碼:
<ul>
<li><a href="np.asp?ctNode=1885" title="本署簡介">本署簡介</a></li>
<li><a href="np.asp?ctNode=1886" title="施政計畫">施政計畫</a></li>
.....
.....
</ul>


css裡將a和li都設定成float:left;就可以了，其他css細節都和原來差不多。
把a設成float:left;有兩個好處，第一，不需要再設定display特性了，因為float已經是block level了，第二因為flaoat的特性使得a可以依照內容大小自動縮放寬或高。
而使用ul製作導覽列已符合無障礙網站規範，不需要再加間隔符號，我知道現在政府機關都需要製作符合無障礙規範的網站，所以這裡是一舉數得的技術。[/code]

_________________
時間，人為與自然的衝突。~不惑仔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
coolcd
 文章主題 :
文章發表於 : 2006-03-25, 14:50 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
從語意上來看
的確是用 list 來做比較好
原來一直在想
怎麼讓 list items 像原來網頁一樣排列整齊

口口口口
口口口口
　口口口

li {display: table-cell} ?
直接在用 tr td?
每個 column 用 div 包起來？
後來看到你的回文才想到 我真笨
把 li 設定成 float 之後 變成 block-level 物件
直接設 width 就好了 :oops:
謝謝你的提點 :)

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
不惑仔Boohover
文章發表於 : 2006-03-25, 15:33 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
coolcd 寫:
後來看到你的回文才想到 我真笨
把 li 設定成 float 之後 變成 block-level 物件
直接設 width 就好了 :oops:
謝謝你的提點 :)


不客氣，你太謙虛了
實際上此用法好處多多，li裡的a也可以定義成display:block;，這是ie可以接受的。

_________________
時間，人為與自然的衝突。~不惑仔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
李某人
 文章主題 :
文章發表於 : 2006-03-26, 00:11 
離線

註冊時間: 2005-01-16, 13:34
文章: 131
更正上面有人說到 display: inline-block 是 ie-only 的說法...

inline-block 是標準的 display property 的 value, 屬於 CSS2 的範圍...

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

_________________
Notes redesigned.
--
Opera 9.5 just tastes good. ;-)
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
coolcd
 文章主題 :
文章發表於 : 2006-03-26, 00:26 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
李某人 寫:
更正上面有人說到 display: inline-block 是 ie-only 的說法...

inline-block 是標準的 display property 的 value, 屬於 CSS2 的範圍...

http://www.w3.org/TR/CSS21/visuren.html#propdef-display


真歹勢，查到 CSS 2.0 去了 ><"

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 8 篇文章 ] 

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

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


誰在線上

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

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

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW，Mozilla 台灣社群