2013-06-24 124 views
0

我試圖手工編寫HTML電子郵件通訊(使用MailChimp)。它應該看起來類似於viastedebouw.nl/newsflash/2013-06/這是用一個應用程序創建的(因此沒有很好看的代碼)。HTML電子郵件中的表格單元格寬度不對應於HTML或CSS中設置的寬度

我遇到的問題是其中一個表單元格的寬度設置爲HTML CSS,但它不對應於兩者之一。該代碼是:

HTML

<td width="140" class="logo"> 

CSS

.logo { width: 140px; height: 140px; } 

然而,是什麼最終發生的是標誌TD是614px寬,出於某種原因,這個截圖所示:

電子郵件的完整代碼可以在這裏找到:https://gist.github.com/Flobin/5849501

編輯:現在我意識到,我得到了整個表錯擺在首位,科特迪瓦哦!大多數行有1個單元格,但有些單元格有2個。我忘記將colspan="2"添加到跨越整個表格寬度的單元格中。

+0

要啓動您,標記無效。使用驗證器。 – jeremy

+1

帶有徽標的行有2個單元格,而第一個和其餘部分只有一個。 –

+0

@AlexK。你的評論只是讓我意識到這個錯誤並不是電子郵件的一些模糊的CSS規則,我把整個表格弄錯了。 D'哦! – Flobin

回答

1

你需要把colspan="2"在每個單元格,如果它是在一個連續的本身。當你有一排2個細胞,所有的行需要添加多達2

而且,在你桌上的最頂端,你也應該把一個空行與2個單元執行Outlook中所需的寬度。有關詳細信息,請參見this technique

+0

我的確遺漏了'colspan =「2」'!我不知道兩個單元格的空行。非常感謝你! – Flobin

0

您不能將樣式表應用於HTML新聞稿,它需要內聯樣式!

此:

<td width="140" class="logo"> 

需求是這樣的:

<td width="140"><img src="http://yourdomain.com/images/logo.png" width="140px" height="140px" /></td> 

或者:

<td width="140"><img src="http://yourdomain.com/images/logo.png" style="width:140px;height:140px;" /></td> 

仔細閱讀本,幫助你在未來http://www.sitepoint.com/code-html-email-newsletters/

編輯

我看到了內嵌樣式!

它看起來像表格寬度的需要,以便被定義爲TD的回暖最大寬度等

+0

請參閱屏幕截圖,OP對寬度使用內聯樣式。 – MrCode

+0

不是,他們在td中加入'class =「logo」',仔細看。 – designtocode

+0

嗯,我想我忘了提及我使用MailChimp,它會自動內聯所有樣式(這很棒)。看看截圖,它顯示了這一點。 – Flobin