1. Home
  2. Forums Index
  3. Deprecated / (deprecated) WYSIWYG and Text Code Editors 7:58 am May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

How do I remove the white spaces appearing after insertion of Doctype

These white spaces or blank lines have the size of a paragraph break

         

PikPratik

1:15 pm on May 25, 2013 (gmt 0)

10+ Year Member



Hi all. I’d appreciate some help on this.

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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. 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 is the beginning of the source code (with no URL) that will allow you to visualize the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><body bgcolor="#FFFFFF" text="#000000">
<head>
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<title>Something 1</title>
<META NAME="Description" CONTENT="Something 1a">
<META NAME="Keywords" CONTENT="redui,risk">
<META NAME="Author" CONTENT="Myself"></head>
<table width="99%" height="1078" border="0" align="center" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="99%" height="1078" valign="top" background="imaj/fonbodi.jpg" bgcolor="#FFFFFF">
<br>
<table width="990" height="1000" border="0" align="center" cellpadding="3" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr bgcolor="#FFFFFF">
<td height="170" colspan="2"> <div align="center">
<table width="100%" height="162" border="0" align="left" cellpadding="3" cellspacing="3" bordercolor="#FFFFFF">
<tr>
<td width="19%" bgcolor="#FFFFFF"> <div align="center"><img src="imaj/thing.jpg" width="150" height="150"></div></td>
<td width="62%" background="imaj/thing2.jpg" bgcolor="#FFFFFF">
<div align="center">
<p align="left"><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif"><strong><font face="Courier New, Courier, mono">Bigger Title<br>
</font></strong></font><font color="#0000FF" face="Courier New, Courier, mono"><strong><font size="6"><strong>www.BigTitle</strong></font></strong></font><font color="#0000FF"><strong><font size="5" face="Arial, Helvetica, sans-serif"><br>
<font size="4" face="Courier New, Courier, mono">Something 2</font></font></strong></font></p>
<p align="left"><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif"><strong><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif"><strong><font size="1"><img src="imaj/picture.JPG" width="15" height="10" border="1">
&nbsp; <img src="imaj/picture.JPG" width="15" height="10" border="1">
&nbsp; <img src="imaj/picture.JPG" width="15" height="10" border="1">
&nbsp; </font><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif"><strong><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif"><strong><font size="1"><img src="imaj/picture.JPG" width="15" height="10" border="1"></font></strong></font></strong></font></strong></font></strong></font></p>
</div></td>
<td width="19%" height="162" bgcolor="#FFFFFF">
<div align="center"><img src="imaj/thing3.jpg" width="137" height="150">
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<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>
<ul>
<li><font size="2" face="Courier New, Courier, mono"><strong><font color="#0000FF"><a href="Something4.htm">Something4</a></font></strong></font></li>
<li><font size="2" face="Courier New, Courier, mono"><strong><font color="#0000FF"><a href="Something5.htm">Something5</a></font></strong></font></li>
</ul>
<ul>
…

My question is: what should I do in order to remove these undesirable 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.

Many thanks.
Herwin

[edited by: bill at 1:47 pm (utc) on May 25, 2013]

lucy24

6:09 pm on May 25, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I use nested tables.

:: stumbles away sobbing brokenly ::

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.

:: stumbles back briefly to say that this is probably not going to happen with one possible exception so the most realistic options are (a) learn a few words of css or (b) go editor-shopping ::

PikPratik

7:55 pm on May 25, 2013 (gmt 0)

10+ Year Member



Hi lucy24. Thank you for the suggestions. I plan upgrading everything as soon as possible but now I'm trying to find a very simple solution if it exists. I have already found a commenting system that displays well with no Doctype declaration in the major browsers. This is LiveFyre. But I prefer Disqus and I'm trying to find a way to use it with the Doctype declaration and no undesirable white spaces or blank lines.

lucy24

8:36 pm on May 25, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Short and brutal answer: If adding a correctly worded DTD (Document Type Declaration) causes something to display incorrectly or other than as intended, the problem is in the misbehaving element, not in the dtd.

Likeliest explanation: Once you've got the dtd in place, the browser knows where it is and can deploy its built-in styles. (The browser is right to do this. Display of most www documents would otherwise be a disaster.) Without the dtd, it has to guess, and may guess unpredictably.

If you want an element such as a list to display the same in all browsers, you have to style it explicitly. That's what a stylesheet is for.

li {margin-top: 1em; margin-bottom: 1em;}
or
li {margin: 1em auto;}

sounds like what your browsers are doing by default. (They tend to do the same for paragraphs.) Sounds as if you want that default "1em" value to be something smaller.

Cut and paste: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type = "text/css">
body {margin: 1em; border: 1px dotted #090;}
ul {border: 1px solid blue;}
li {margin: 1em auto; border: 1px dotted red;}
</style>
</head>
<body>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</body>
</html>

Put into an empty text file, save as anything with "html" or "htm" extension, and open in a browser. (Or html preview if your text editor has the option.) The visible borders are just so you can see what's what: body green, whole list blue, list item red.

Now try changing the numbers and see what happens. Or replace "auto" with some value, either in ems or a percentage.

Lists are especially tricky because the browser is liable to have strong opinions about what happens along the left, where the list items are indented and may also have markers.

PikPratik

9:25 pm on May 25, 2013 (gmt 0)

10+ Year Member



@lucy24 Thank you for the code. I'm going to try it and let you know the results.

PikPratik

10:37 pm on May 26, 2013 (gmt 0)

10+ Year Member



@lucy24 I tried the code but I was not able to use it. I found a DreamWeaver MX WYSIWYG solution that I present in my next post.

PikPratik

10:39 pm on May 26, 2013 (gmt 0)

10+ Year Member



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.

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.

lucy24

11:55 pm on May 26, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I was not able to use it

Mercy sakes, you're not expected to use that! It's just to show you what CSS does. In fact, after posting I ran up a longer version to illustrate browser defaults in other categories. (I've done this at least once before, but can't find it. This time I saved it in a sensible location with an easily recognized name.)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Deprecated / (deprecated) WYSIWYG and Text Code Editors 7:58 am May 21, 2026