Not WYSWYG

Discussion in 'HTML & Website Design' started by mbliu118, Oct 2, 2009.

0
  1. #1
    Hi All,

    I am using Dreamweaver MX 2004 and design my webpage using conventional Chinese language. I created one table with two column and each column has different height of cells.

    The desigm seems OK in Dreamweaver.
    However,when I click the finished html files & watch them through IE or Firefox browsers,the tables were elongated & not as compact as I see in Dreamweaver.

    What is the problem ?

    Please advise.
    Thanks
    Tony
     
    mbliu118, Oct 2, 2009 IP
  2. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Where's the markup?

    Nobody can help you without seeing the markup.
     
    Masterful, Oct 2, 2009 IP
  3. mbliu118

    mbliu118 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Masterful,

    Please tell me what is markup ?

    Thanks
    Tony
     
    mbliu118, Oct 3, 2009 IP
  4. myst_dg

    myst_dg Active Member

    Messages:
    224
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #4
    Codes, show us the codes, or URL.


    On different browsers, elements have different default values for several attributes, e.g. padding, margin, border.

    In your case, try add these lines in css:
    table {
	border-collapse: collapse;
	border-spacing: 0;
}
    Code (markup):
    Generally, you may prevent this problem from happening again by implementing css reset. Here are some articles
    http://www.csspedia.org/tag/reset/


    One more thing to blah: search "div+css" if you're using tables for layouts. Tables are, and only, made for tabular data.

    Good luck.


    Leo
     
    myst_dg, Oct 3, 2009 IP
  5. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #5
    Markup means HTML (Hyper Text Markup Language).

    Whenever you need help, make sure to present your markup. That includes any CSS styling.

    Alternatively, leave a link to your site.
     
    Masterful, Oct 3, 2009 IP
  6. mbliu118

    mbliu118 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hi Leo,

    I dont use css and is using html only.

    Codes as follows:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5">
    <title>卓越迷你倉,自存倉,迷你存倉</title>
    <style type="text/css">
    <!--
    .style2 {
    font-size: 100px;
    font-family: "標楷體";
    color: #FFFFFF;
    font-weight: bold;
    }
    .style11 {
    font-family: "標楷體";
    font-size: x-small;
    }
    .style12 {font-family: Arial, Helvetica, sans-serif}
    .style14 {font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
    .style15 {font-size: x-large}
    .style16 {font-size: xx-large}
    .style17 {color: #0000FF}
    .style18 {
    font-size: xx-large;
    color: #0000FF;
    font-weight: bold;
    }
    .style32 {font-family: "標楷體"}
    .style33 {
    font-size: xx-large;
    font-family: "標楷體";
    font-weight: bold;
    }
    .style34 {font-size: 50px; font-weight: bold; font-family: "標楷體";}
    .style35 {color: #000000}
    -->
    </style>
    </head>

    <body>
    <div align="center">
    <table width="818" height="1101" border="2">
    <tr align="left">
    <td height="113" bgcolor="brown" colspan="2"><div align="center" class="style2"> 卓越迷你倉</div></td>
    </tr>
    <tr>
    <td height="78" bgcolor="yellow"><div align="center" class="style15"><a href="self-storage-price-encouragement.htm">價格優惠</a></div></td>
    <td width="559" bgcolor="yellow"rowspan="8"><div align="center">
    <table width="553" height="1383" border="1">
    <tr>
    <td colspan="2"><div align="center"><span class="style16 style17"><span class="style34">香港仔田灣金山迷你倉</span></span></div></td>
    </tr>
    <tr>
    <td colspan="2"> <div align="center">
    <p class="style33">目標客戶</p>
    <p align="left" class="style15 style32"> 本迷你倉提供存倉服務給港島南區的商戶及住戶,包括香港仔,田灣,鴨利洲,薄扶林,華富村,置富花園,碧瑤花園,貝沙 灣等.</p>
    </div></td>
    </tr>
    <tr>
    <td colspan="2"> <p align="center" class="style33">交通方便</p>
    <p class="style32 style15">本迷你倉位於薄夫林及香港仔中間,多絛巴士線及小巴專線出入,交通方便快捷.從鴨<span class="style15 style32">利</span>洲,香港仔,薄夫 林到本貨倉,車程只需數分鐘. </p>
    <p align="center" class="style32 style15"><img src="figures/tinwanmap.gif" width="272" height="168"></p>
    <p align="center" class="style32 style15"> 香港仔田灣石排灣道40號金山電腦大廈G樓全層 </p>
    <p align="center" class="style32 style15">&nbsp;</p></td>
    </tr>
    <tr>
    <td colspan="2"><p align="center" class="style16 style17"><span class="style35 style32 style16"><strong>樓底特高</strong></span></p>
    <p align="center" class="style16 style17"><span class="style15 style32 style35">倉庫樓底高至12呎,提供大量儲存空間.而我們的收費是 按面積計算,給客<span class="style15 style32">戶</span>一個價錢便宜的儲存空間. </span></p></td>
    </tr>
    <tr>
    <td height="782" colspan="2"><p align="center" class="style16 style17">&nbsp;</p>
    <div align="center">
    <h3 class="style33"> 迷你倉價目一覽表</h3>
    <table border="1" cellpadding="1" cellspacing="1">
    <tr>
    <td align="center" valign="bottom" width="162"><p align="center">面積 </p></td>
    <td valign="top" width="225"><p align="center">每月租金 (HK$) </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>20 </p></td>
    <td valign="top"><p align="center">400 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>25 </p></td>
    <td valign="top"><p align="center">500 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>26 </p></td>
    <td valign="top"><p align="center">520 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">30 </p></td>
    <td valign="top"><p align="center">600 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">36 </p></td>
    <td valign="top"><p align="center">720 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">41 </p></td>
    <td valign="top"><p align="center">820 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>42 </p></td>
    <td valign="top"><p align="center">840 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">52 </p></td>
    <td valign="top"><p align="center">1040 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">53 </p></td>
    <td valign="top"><p align="center">1060 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">54 </p></td>
    <td valign="top"><p align="center">1080 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">55 </p></td>
    <td valign="top"><p align="center">1100 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">58 </p></td>
    <td valign="top"><p align="center">1160 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">60 </p></td>
    <td valign="top"><p align="center">1200 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">63 </p></td>
    <td valign="top"><p align="center">1260 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>65 </p></td>
    <td valign="top"><p align="center">1300 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">81 </p></td>
    <td valign="top"><p align="center">1620 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">87 </p></td>
    <td valign="top"><p align="center">1740 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">88 </p></td>
    <td valign="top"><p align="center">1760 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">91 </p></td>
    <td valign="top"><p align="center">1820 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">93 </p></td>
    <td valign="top"><p align="center">1860 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">108 </p></td>
    <td valign="top"><p align="center">2160 </p></td>
    </tr>
    </table>
    <p align="center">租倉半年有95% 優惠 . 必須預繳. </p>
    <p align="center">租倉一年有90% 優惠. 必須預繳. </p>
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18"><br>
    </p>
    </div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><a href="index.htm">服務及承諾</a></div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style12"><span class="style15"><a href="self-storage-contact.htm">聯絡我們</a></span></div></td>
    </tr>
    <tr>
    <td height="161" bgcolor="yellow"><p align="center" class="style14">開倉熱線</p>
    <p align="center" class="style14">81082112</p></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><span class="style15"><a href="tinwan-self-storage.htm">香港仔田灣大生迷你倉</a> </span></div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><a href="tinwan-self-storage.htm">香港仔田灣金山迷你倉</a></div></td>
    </tr>
    <tr>
    <td height="81" bgcolor="yellow"><div align="center"><span class="style14"><a href="kaming-self-storage.htm">九龍荔枝角嘉名迷你倉</a></span></div></td>
    </tr>
    <tr>
    <td height="281" bgcolor="yellow"><div align="center" class="style14"></div>
    <div align="center" valign="top" class="style14"><img src="figures/&#21331;&#36234;&#36855;&#20320;&#20489;&#21830;&#27161;.jpg" width="240" height="300"></div> <div align="center" class="style14"></div></td>
    </tr>
    <tr>
    <td height="40" colspan="2"><div align="left"> Tag:<span class="style11"> <a href="http://www.brilliant-storage.com.hk/main_eng.html">Mini storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Warehouse </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Self storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">File storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Document storage </a>, <a href="http://www.self-storage-hk.com">迷你倉 </a>, <a href="http://www.self-storage-hk.com">迷你存倉 </a>,<a href="http://www.self-storage-hk.com">租倉 </a>, <a href="http://www.self-storage-hk.com">倉 </a>, <a href="http://www.self-storage-hk.com">自存倉 </a>, <a href="http://www.self-storage-hk.com">儲存 </a>, <a href="http://www.self-storage-hk.com">倉庫 </a>, <a href="http://www.self-storage-hk.com">貨倉 </a>, <a href="http://www.self-storage-hk.com">文件倉 </a></span> </div></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
     
    mbliu118, Oct 4, 2009 IP
  7. mbliu118

    mbliu118 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi Leo,

    I dont use css and is using html only.

    Codes as follows:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5">
    <title>卓越迷你倉,自存倉,迷你存倉</title>
    <style type="text/css">
    <!--
    .style2 {
    font-size: 100px;
    font-family: "標楷體";
    color: #FFFFFF;
    font-weight: bold;
    }
    .style11 {
    font-family: "標楷體";
    font-size: x-small;
    }
    .style12 {font-family: Arial, Helvetica, sans-serif}
    .style14 {font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
    .style15 {font-size: x-large}
    .style16 {font-size: xx-large}
    .style17 {color: #0000FF}
    .style18 {
    font-size: xx-large;
    color: #0000FF;
    font-weight: bold;
    }
    .style32 {font-family: "標楷體"}
    .style33 {
    font-size: xx-large;
    font-family: "標楷體";
    font-weight: bold;
    }
    .style34 {font-size: 50px; font-weight: bold; font-family: "標楷體";}
    .style35 {color: #000000}
    -->
    </style>
    </head>

    <body>
    <div align="center">
    <table width="818" height="1101" border="2">
    <tr align="left">
    <td height="113" bgcolor="brown" colspan="2"><div align="center" class="style2"> 卓越迷你倉</div></td>
    </tr>
    <tr>
    <td height="78" bgcolor="yellow"><div align="center" class="style15"><a href="self-storage-price-encouragement.htm">價格優惠</a></div></td>
    <td width="559" bgcolor="yellow"rowspan="8"><div align="center">
    <table width="553" height="1383" border="1">
    <tr>
    <td colspan="2"><div align="center"><span class="style16 style17"><span class="style34">香港仔田灣金山迷你倉</span></span></div></td>
    </tr>
    <tr>
    <td colspan="2"> <div align="center">
    <p class="style33">目標客戶</p>
    <p align="left" class="style15 style32"> 本迷你倉提供存倉服務給港島南區的商戶及住戶,包括香港仔,田灣,鴨利洲,薄扶林,華富村,置富花園,碧瑤花園,貝沙 灣等.</p>
    </div></td>
    </tr>
    <tr>
    <td colspan="2"> <p align="center" class="style33">交通方便</p>
    <p class="style32 style15">本迷你倉位於薄夫林及香港仔中間,多絛巴士線及小巴專線出入,交通方便快捷.從鴨<span class="style15 style32">利</span>洲,香港仔,薄夫 林到本貨倉,車程只需數分鐘. </p>
    <p align="center" class="style32 style15"><img src="figures/tinwanmap.gif" width="272" height="168"></p>
    <p align="center" class="style32 style15"> 香港仔田灣石排灣道40號金山電腦大廈G樓全層 </p>
    <p align="center" class="style32 style15">&nbsp;</p></td>
    </tr>
    <tr>
    <td colspan="2"><p align="center" class="style16 style17"><span class="style35 style32 style16"><strong>樓底特高</strong></span></p>
    <p align="center" class="style16 style17"><span class="style15 style32 style35">倉庫樓底高至12呎,提供大量儲存空間.而我們的收費是 按面積計算,給客<span class="style15 style32">戶</span>一個價錢便宜的儲存空間. </span></p></td>
    </tr>
    <tr>
    <td height="782" colspan="2"><p align="center" class="style16 style17">&nbsp;</p>
    <div align="center">
    <h3 class="style33"> 迷你倉價目一覽表</h3>
    <table border="1" cellpadding="1" cellspacing="1">
    <tr>
    <td align="center" valign="bottom" width="162"><p align="center">面積 </p></td>
    <td valign="top" width="225"><p align="center">每月租金 (HK$) </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>20 </p></td>
    <td valign="top"><p align="center">400 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>25 </p></td>
    <td valign="top"><p align="center">500 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>26 </p></td>
    <td valign="top"><p align="center">520 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">30 </p></td>
    <td valign="top"><p align="center">600 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">36 </p></td>
    <td valign="top"><p align="center">720 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">41 </p></td>
    <td valign="top"><p align="center">820 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>42 </p></td>
    <td valign="top"><p align="center">840 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">52 </p></td>
    <td valign="top"><p align="center">1040 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">53 </p></td>
    <td valign="top"><p align="center">1060 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">54 </p></td>
    <td valign="top"><p align="center">1080 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">55 </p></td>
    <td valign="top"><p align="center">1100 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">58 </p></td>
    <td valign="top"><p align="center">1160 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">60 </p></td>
    <td valign="top"><p align="center">1200 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">63 </p></td>
    <td valign="top"><p align="center">1260 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p>65 </p></td>
    <td valign="top"><p align="center">1300 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">81 </p></td>
    <td valign="top"><p align="center">1620 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">87 </p></td>
    <td valign="top"><p align="center">1740 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">88 </p></td>
    <td valign="top"><p align="center">1760 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">91 </p></td>
    <td valign="top"><p align="center">1820 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">93 </p></td>
    <td valign="top"><p align="center">1860 </p></td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><p align="center">108 </p></td>
    <td valign="top"><p align="center">2160 </p></td>
    </tr>
    </table>
    <p align="center">租倉半年有95% 優惠 . 必須預繳. </p>
    <p align="center">租倉一年有90% 優惠. 必須預繳. </p>
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18">&nbsp;</p>
    </div> <div align="center">
    <p class="style18"><br>
    </p>
    </div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><a href="index.htm">服務及承諾</a></div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style12"><span class="style15"><a href="self-storage-contact.htm">聯絡我們</a></span></div></td>
    </tr>
    <tr>
    <td height="161" bgcolor="yellow"><p align="center" class="style14">開倉熱線</p>
    <p align="center" class="style14">81082112</p></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><span class="style15"><a href="tinwan-self-storage.htm">香港仔田灣大生迷你倉</a> </span></div></td>
    </tr>
    <tr>
    <td width="249" height="78" bgcolor="yellow"><div align="center" class="style14"><a href="tinwan-self-storage.htm">香港仔田灣金山迷你倉</a></div></td>
    </tr>
    <tr>
    <td height="81" bgcolor="yellow"><div align="center"><span class="style14"><a href="kaming-self-storage.htm">九龍荔枝角嘉名迷你倉</a></span></div></td>
    </tr>
    <tr>
    <td height="281" bgcolor="yellow"><div align="center" class="style14"></div>
    <div align="center" valign="top" class="style14"><img src="figures/卓越迷你倉商標.jpg" width="240" height="300"></div> <div align="center" class="style14"></div></td>
    </tr>
    <tr>
    <td height="40" colspan="2"><div align="left"> Tag:<span class="style11"> <a href="http://www.brilliant-storage.com.hk/main_eng.html">Mini storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Warehouse </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Self storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">File storage </a>, <a href="http://www.brilliant-storage.com.hk/main_eng.html">Document storage </a>, <a href="http://www.self-storage-hk.com">迷你倉 </a>, <a href="http://www.self-storage-hk.com">迷你存倉 </a>,<a href="http://www.self-storage-hk.com">租倉 </a>, <a href="http://www.self-storage-hk.com">倉 </a>, <a href="http://www.self-storage-hk.com">自存倉 </a>, <a href="http://www.self-storage-hk.com">儲存 </a>, <a href="http://www.self-storage-hk.com">倉庫 </a>, <a href="http://www.self-storage-hk.com">貨倉 </a>, <a href="http://www.self-storage-hk.com">文件倉 </a></span> </div></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
     
    mbliu118, Oct 4, 2009 IP