小弟的網站內一個圖片原在firefox是可常顯示的，就如下圖的紅框部份


但自從加了w3c的文件宣告後，紅框部份便多了圖片上邊的一部份出來，就如下圖


這是這段代碼


請問各位，這個部份有甚麼方法刪除去呢，請幫幫忙指點小弟，不勝感激，多謝~

網站來一下，這樣我用 Stylish 之類的工具邊修改邊檢查比較方便。

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

<div style="text-align: center">

<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto; background-image: url({IMGDIR}/topbg_right.jpg); background-repeat: no-repeat;">
<tr><td style="text-align: left"><a href="index.php">{BOARDLOGO}</a></td>
</tr></table>
</div>

加入紅字標示的內容即可，作用是禁止背景圖重覆顯示

多謝樓上兩位大哥指教，我照"路過的"大哥的方法已經消去那部份了，但又出了一個小問題，就是在IE下，圖下紅框部份的距離是我心中所想的距離


但在firefox下，距離是高了很多，


那部份的代碼整段是這樣的

請問一下這有沒有方法可收短一些呢，請大哥再指教，先多謝大哥~~

其實就是因為多出那段距離，圖片才會開始重複的...
不過正如 wini 所說的，還是貼一下網址比較好
因為光看你貼的代碼，而沒見到頁面本身，有時是很難解決問題的

例如你貼的代碼就看不出來 {BOARDLOGO} 那邊應該是什麼東西
(因為這不是程式輸出之後真正在瀏覽器上看到的頁面的代碼)
也看不出來你表格的高度是怎麼來的...或許是一個圖片在 {BOARDLOGO} 那邊？
而且有時候並不一定是那段代碼本身的問題，也可能是頁面其他地方的代碼造成的

總之，貼上網址會比較容易找出問題的原因唷 ^^

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜

好的，那麻煩各位大大幫我看一看，先此多謝
http://www.hkbbs.net/index.php?styleid=6

===========================================================
後話：我剛將


改為


現在firefox下的距離已收短了很多了，雖然IE上沒有了我想的距離，但也順眼了很多了，多謝各位一直的幫助，真是非常多謝~~

有點不太清楚你原本想要的版面是要怎樣調整，不過 IE6 有 CSS hack 可以應付， IE7 算過渡產品應該可以不用理倒是。（呃）

下面的方法一定要寫在網頁檔的 head ，或 CSS 檔裡。



另外各種瀏覽器在一部分網頁元素上，對 margin 跟 padding 的解釋方式也有差別，這點我就不確定有沒有影響了。

（還有 margin 是可以給「負值」的屬性哦）

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

to wini兄:
我想我說得不清楚，我也不太懂如何說明我的要求，我就簡單的說說問題所在好了

我發覺在firefox底下，在一個圖片和下一個圖片之間，總是有一條空隙，我在IE上可以做到上下兩圖緊貼著，就是firefox一加上w3c的宣告，這條空隙就走了出來了，現在就是我想圖興圖之間有4px的距離，但結果firefox下，這個距離因為加了那自帶的空隙就變成遠遠不止4px了，這個問題就是我一直搞不好的呢

另外請問一下wini兄，你給的一段代碼就是個整貼上css就可以了？需不需要改改的呢？

嗯……所以說，你想要的是「首頁圖跟選單距離 4px 高度」嗎？

我從頭開始說一下。

首先你貼上 CSS 的地方沒錯，不過 CSS 的優先權設定你要搞懂一下，放在 CSS 檔案越後面的越優先，除非你在指定完屬性的值後，接個 !important 才會把最終顯示的優先權拉高。


然後是我上面提到的 CSS hack ，你只要自己調整那兩行 margin 的值，到自己覺得 IE 跟 Fx 都一致了就好──不過我上面只是單純用 menu 舉例而已，實際上要用啥，請先看完這篇再說。

然後我覺得你的 HTML 寫太複雜了，以首頁圖跟選單為例，其實根本不需要用到 table 元素，用 h1 跟 ul 元素也就夠了；而整個網頁左右的留白，也只要在 body 上放 CSS 的 padding 屬性就好；然後更麻煩的問題是，你的 CSS 「寫得到處都是」，可以的話，全放進 CSS 檔案，並加上適上的備註文字（用 /* 跟 */ 包住的），維護時會比較方便。

總之畫表格的地方可以靠程式，不過其它小地方靠編輯原始碼可能會方便點，所以可能要麻煩你先想辦法把首頁圖跟選單的 HTML 簡化一下。（ body 的留白問題你可以看看要不要選擇在 body 用 CSS 處理）

HTML 部分的範例：

CSS 部分的範例：

其中 h1 的地方可以放文字，或是放圖片都行，記得改成圖片 img 元素後要加 alt 屬性寫替代文字就好。（當然改成圖片後也要記得拿掉 CSS 中的 background 啦）


（不過把 CSS 部分弄出來獨立檔案後，你原本用的編輯軟體就會碰上麻煩了，要不就是只拿來純畫 HTML ，不要讓它修改你的 CSS 檔，要不就是得想辦法搞懂這編輯軟體會怎麼修改 CSS ……）

（另外，因為我認為你擁有修改該網頁全部的 HTML 跟 CSS 檔案的權限，所以就沒認真去研究為什麼「空隙」會變大的問題了，因為那件事我上次碰到是好幾年前了，沒做筆記所以也沒辦法想出來原因來，只能請你簡化 HTML 再說了……）

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

你內容改來改去的，現在看到的又不一樣了，這樣會讓大家搞不清楚，改過內容一定要再po訊息上來通知，否則有人下載過前面的，那不就浪費時間了。

依據你現在最新的
<td style="background-image: url(./images/vigirl/logo2.jpg); width: 750px; height: 250px; background-repeat: no-repeat"><a href="http://www.hkbbs.biz/home.php"><img src="images/vigirl/logo2.jpg" alt="hkbbs II " /></a></td>

第一個問題：menu上頭那條縫是紅字的img所產生的，這是行內元素垂直對齊與base-line的現象，只要以CSS定義該 img {vertical-align:top;}，那條縫就不在了。

第二個問題：這是看先前內容的，因為你改過了，所以只能猜測一下問題。只要定義上或下margin，根據背景及背景疊合規則，背景色或背景影像圖是不會顯示在margin所空出的空間的。以margin-top來說，firefox不會顯示背景色，而背景影像會降到margin-top以下的位置開始顯示，所以你會看到fx好像空比較多，而ie空比較少，實際上是ie不符合規則自行發展的顯示方式，如果你還要持續做網頁，這點最好能了解清楚，否則你將會有不搞完的問題。

ps.像wini說的一樣，你最好先學好怎麼安排html內容，一個簡單的表頭竟然可以搞得這麼複雜？而且你好像是套用版型的，明明就有現成的CSS樣式檔(style_6.css)可用了，你還搞得自己頭昏腦脹做什麼？

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

謝謝wini大大和不惑仔Boohover大大指教，兩個方法也行，我用了wini大大的方法，終於也解決了我的問題

小弟其實只略懂html，對於DIV和CSS只算初學，所以習慣上仍是覺得html親切一點，其實兩位大大的帖，我也摸索了很久才摸出少許頭緒出來，一些高手眼中的小問題也真是搞得我頭也痛了，無論如何也得多謝幫過我的所有大大，謝謝各位~~

div 元素也算是 HTML 就是， CSS 算是專管樣式的網頁語法，重點觀念在於「選擇子」跟「規則」，其它的屬性那些的都是慢慢觀察就會知道的。

選擇子範例：

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）