PikPratik - 10:39 pm on May 26, 2013 (gmt 0)
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 <td height="170" colspan="2"> <div align="center">. 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.
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.