How do I remove the white spaces or blank lines appearing after insertion of Doctype [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Closed 8 years ago.

• Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
• Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Improve this question

I’m using DreamWeaver MX to create my webpages. I use nested tables. One main table with only one row and one column (W = 99% and H = n pixels ) and a background image with a repetitive pattern. A second main table (W= 990 pixels and H = n pixels) inserted and centered inside the first main table. This is so that the pages fit all screens 990xn pixels and up with a nice border done by the background image.

The second main table has 3 zones: a header zone at the top (horizontal and same width as the second main table), a menu zone on the left and a text zone, on the right, bigger than the two other zones. I also have a little horizontal table with one row and three columns inserted in the header zone. This is to contain the pictures and the text of the header. There are some other little tables: one inserted in the menu zone at the bottom of the menu in order to contain three “Follow this social network” buttons, one or several little tables inserted in the text zone in order to contain pictures, one little table in order to contain Disqus comments.

Everything was working well. All the pages of my site displayed like I wanted it in Chrome, Firefox, IE8 and IE9. Then I inserted the Disqus commenting system into some of the pages. The pages with the Disqus commenting system displayed well in Chrome and Firefox but, in IE8 and IE9, it was a mess, the comments took all the width and made disappear the majority of the contents of my web pages.

In order to have a correct display of the Disqus comments in IE8 and IE9, I inserted the code of the transitional Doctype declaration in the first line of my Web pages containing a Disqus comment: . This action has allowed me to obtain a correct display of the Disqus commenting system in Chrome, Firefox, IE8 and IE9 but there is now a small problem with all the browsers: there are white spaces (blank lines) between the horizontal cell lines of my second main table and the nearest line of text (this is like an additional horizontal padding; the initial vertical and horizontal padding stay unchanged). Each of these undesirable white spaces has the size of a paragraph break.

Here are two URLs that will allow you to visualize the problem:

• in the home page of my site, http://pikpratik.com/, that contains no Doctype declaration, the spaces between the invisible table cell lines and the nearest lines of text are OK.
• In the page http://pikpratik.com/fichye/pou_redui_risk_viktim_aksidan_sou_wout.htm, at the top, the white spaces appear clearly, especially between the header (the cell line is invisible) and the first line of text (Akèy > Jesyon risk ak dezas >) and also between the last line of text (Akèy | Kiyès nou ye | Di sa w panse de sit sa a | Plan sit la | Kontak) and the lower border of my second main table.

Important note: when I take the transitional DOCTYPE declaration code and the Disqus commenting system off the pages, the tables appear correctly on ALL browsers.

My question is: what should I do in order to remove these white spaces?

I don’t know how to use CSS. Please give me a solution with no CSS. If the only solution available contains CSS, please give me the complete code and the exact location(s) where I have to insert the code in my web pages.

Answer 1

I finally found a WYSIWYG solution while using DreamWeaver MX. It’s quite simple. This solultion allows me to remove the excess of blank spaces and to have an homogeneous line spacing inside the big cell constituting my text zone. It specially allows me to have a normal distance: a) between the top border of the cell and the first line of text in the cell b) between the last line of text in the cell and the bottom border of the cell. I must remark that I added the transitional Doctype declaration in all the pages of my web site. This way, my web site looks more professional.

What I did:

In DreamWeaver MX, I selected my first main table. The number for CellPad was empty (blank). I set it to 0. So I had: CellPad = 0, CellSpace = 0, Border = 0.

I selected my second main table. I had CellPad = 3. I set it to 2. So I had: CellPad = 2, CellSpace = 0, Border = 0.

I selected my header table that has one row and three columns. The cell in the middle has a background picture and some text (the site name, the site URL and the site slogan) and four very little pictures of the Haitian flag inserted on the fourth line of text. The cell on the left contains only a picture inserted in it. Idem for the cell on the right. For my header table, I had: CellPad = 3, CellSpace = 3, Border = 0. I changed this so that now I have: CellPad = 0, CellSpace = 0, Border = 0. For my header table, I also had: Width = 100% and Height = 162 pixels, the same height as the one of the background picture for the middle cell.

I selected the picture (150x150 pixels) on the left in my header table: V Space = blank, H Space = Blank, Border = blank. I set: V Space = 0, H Space = 0, Border = 0. Idem for the picture (137x150 pixels) on the right. I selected one of the four little (15x10 pixels) Haitian flags : V Space = blank, H Space = Blank, Border = 1. I set: V Space = 0, H Space = 0, and I let Border = 1. Idem for the three other little Haitian flags.

I left clicked in the space inside of the left column of my header table (the cursor was blinking either on the right border or on the left border of the picture contained): W = 19% and H = blank. I set H = 162. I left clicked in the space inside of the middle column of my header table: W = 62% and H = blank. I set H = 162. I left clicked in the space inside of the middle column of my header table: W = 19% and H = 162. It was OK, no change necessary.

I went in “Show Code View” and I put the cursor immediately on the right of “height="170"”, in the line of code . I returned in “Show Design View” and I saw that the top cell of my second main table containing my header table was selected: Width = blank, and Height = 170. I let Width = blank and I set Height = 162. I save and automatically, I have only one line for my Header, not several lines corresponding to tables or cells of different heights. Then I go to the bottom of my page and I stretch the height of my second main table to the minimum possible and idem for the height of my first main table.

The problem was in the cellpad and the cellspace of my second main table and its top cell height. They were too high. I had to decrease them because they added one to another and increased the vertical blank spaces between the top border of the cell and the first line of text in the cell. I had to set the cellpad and the cellspace of my header table to zero because they were not necessary. I could set cellpad = 0 for my second main table but the text in my text zone would not be nice to read (too closed to the vertical edges). So I reduced this cell pad (from 3 to 2) because it also contributed to the white spaces a) between the top border of the cell and the first line of text in the cell b) between the last line of text in the cell and the bottom border of the cell.

The excess of vertical white spaces could be totally prevented if I could set the padding of one table cell individually instead of setting the padding for the whole table.

Setting to zero “V space” and “H space” of the pictures was not really necessary, only a precaution.

I observed that the blank space between an horizontal cell line and the nearest text line is set by default equal to the spacing between two paragraphs. The cellpadding and cellspacing of the mother table is added to this blank space if these cellpadding and cellspacing are not set to 0.

Prospects:

Find a way to set the cellpadding of a cell individually.

Find a way so that a) the vertical distance between the first line of text (in a table cell) and the border of the cell immediately above is lower than the height of a spacing between two paragraphs b) the vertical distance between the last line of text and the border of the cell below is is lower than the height of a spacing between two paragraphs.

Get the last version of DreamWeaver because I have been using the MX for more than 10 years. A lot of new WYSIWYG options must be available now in order to have the presentation that I need for my web pages.

Learn how to use CSS as soon as I have this opportunity because it is obvious that CSS offer more possibilities and it is said that the nested tables slow down the loading of the web pages.

Answer 2

There appears to be empty parargraph ( <p>&nbsp;</p> ) at the top of the table cell - see second line of the snippet below:

          <td width="235" height="821" valign="top" bgcolor="#FFFFFF"> 
            <p>&nbsp;</p>
            <ul>
              <li><font color="#0000FF" size="2" face="Arial, Helvetica, sans-serif" align="left"><strong><font face="Courier New, Courier, mono"><a href="../index.htm">Ak&egrave;y</a></font></strong></font></li>
            </ul>

which may explain your spacing problem