Doc Type: Creates Extra Paragraph Space between Tables

Forum Moderators: open

Message Too Old, No Replies

Doc Type: Creates Extra Paragraph Space between Tables

kccollins

12:22 pm on Jan 23, 2012 (gmt 0)

Hi all, appreciate any help on this, it's doing my head in.

I'm using dreamweaver to create my webpages and it automatically creates new files with the DOC TYPE details:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The problem is - none of my webpages are displaying correctly on ANY browser - there appears to be a large white space between tables, the size of a paragraph break.

However, when I take the DOCTYPE code off the page, the tables appear correctly on ALL browsers - which means the DOCTYPE code is telling browsers to do this. Strange!

I've tried a few different versions of DOCTYPE code, with no solution. Should I just leave the DOCTYPE off, or will this cause problems down the road?

Many thanks
Karina

g1smd

1:06 pm on Jan 23, 2012 (gmt 0)

Run the code through validator.w3.org and fix all listed errors then check how the page displays.

kccollins

1:23 pm on Jan 23, 2012 (gmt 0)

No luck I'm afraid, but thanks for the suggestion.

g1smd

1:34 pm on Jan 23, 2012 (gmt 0)

"No luck"; what's that mean? No errors?

kccollins

2:16 pm on Jan 23, 2012 (gmt 0)

Sorry, it means only minor errors which made no difference when they were changed.

As an experiment I have copied and pasted the source code of other website pages and uploaded them with and without the DOCTYPE code, and the same thing happened. So it doesn't sound like a code problem on my pages, or am I missing something?

Marshall

2:35 pm on Jan 23, 2012 (gmt 0)

In your CSS, you could set you table margins to zero if you do not want any space.

Marshall

kccollins

3:48 pm on Jan 23, 2012 (gmt 0)

Marshall, if I change my cell padding to zero and my cell spacing to zero, and ensure I take out any paragraphs in the start of my text in a table, then it certainly improves the look.

However, if I leave everything as it is, that is keep the cell padding at 5 and cell spacing at 2, but remove the DOCTYPE reference at the top of my HTML file, that REALLY fixes the appearance the page.

In other words, the DOCTYPE line of code is screwing with the appearance of the page.

Would it be really bad just to leave the DOCTYPE code out?

Cheers :)

Marshall

4:48 pm on Jan 23, 2012 (gmt 0)

If you use HTML 5, there is no declaration, just <html>

Regardless, if it is just the tables, not cells, causing the problem, I would just reset the table margins:

table {
margin: 0 auto;
}
or
table {
margin: 0 Xpx;
}

Some margins are affected by doctype just as different browsers do, however the latter is usually most notable in body padding.

Marshall

tedster

5:10 pm on Jan 23, 2012 (gmt 0)

Have you read this thread? Can't Get Rid of White Space Between Two Rows [webmasterworld.com]

rocknbil

5:12 pm on Jan 23, 2012 (gmt 0)

In other words, the DOCTYPE line of code is screwing with the appearance of the page.

It will, but it is a good thing. If you validated it (sounds like you did) your site is now rendering in Standards Compliance Mode as opposed to Quirks mode. This gives you a baseline from which to debug the problem. It is also the best path to cross browser compatibility, so stick with it.

With this in place, you can say that it's definitely something in your CSS or how you've approached the layout. The fact that it's the same in all browsers actually verifies this - all of them are telling you you have a problem. Bad to leave it out? Most of the time, yes, this causes some pretty serious cross browser differences.

I've never been a fan of global zero outs (prefer to work with document's natural flow), and that may not even be it. A margin of an element within the table might be pushing things around. Next thing you should do is download/install the FireFox Firebug extension. Get on the page, right click and select "inspect element." As you mouse around the page and HTML inspector, paddings will show in purple, margins yellow, element itself blue. This should reveal what's adding the space.

lucy24

5:55 pm on Jan 23, 2012 (gmt 0)

Low-tech version:

td {border: 1px solid red;}
table {border: 1px solid blue;}

;)

james123

3:48 am on Jan 24, 2012 (gmt 0)

I have faced this problem once in one Article submission site, when i submit article, it appears in paragraph,which is not at the time of submission, but happens after the submission when the site goes live.

kccollins

10:21 am on Jan 24, 2012 (gmt 0)

Guys, can I make a confession - I'm not using CSS, just old fashioned html. I almost feel like I'm saying I murder little kittens by admitting it :)

I discovered part of the problem last night. If I upload 2 tables, one directly underneath the other with no text in it, they look exactly as they should - no large space between them.

Next I tried inserting some text and uploaded. Both still looked fine.

Next I tried a paragraph break in the text in one of the tables, and uploaded. Then the problem occurred. The tables were separated by a large space.

So it appears that the drop between tables is caused when I use paragraph breaks in my text.

lucy24

11:11 am on Jan 24, 2012 (gmt 0)

Hmmm... You mean you opened a paragraph and didn't close it within the same table cell? That could definitely play havoc with spacing.

When you validate the HTML, doesn't it nag at you about using a style sheet? Mine did. (Along with saying something like "I have no idea what this is, so let's try 4.01 Transitional." That was, ahem, some years ago. Header? DTD? Wha dat?)

kccollins

1:48 pm on Jan 24, 2012 (gmt 0)

Hi Lucy! :)

As far as I see, I am closing the paragraphs - here is one table. I simply put another similar one under it. If I don't use the DOCType at the top of the document they sit on top of each other very neatly. As soon as I put the DOCType in, the tables are seperated by a space near enough to a paragraph size space. WEIRD!

<table width="700" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td width="130" valign="top">Some text here </td>
<td width="535" valign="top">Paragraph title here
This is the fascinating text that I am writing.</td>
</tr>
</table>

I use dreamweaver, and it doesn't nag me about style sheets thank heavens! :)

rocknbil

4:44 pm on Jan 24, 2012 (gmt 0)

It actually makes sense. Sounds like something Quirks Mode would do.

A margin of an element within the table might be pushing things around.

So it appears that the drop between tables is caused when I use paragraph breaks in my text.

table td p { margin-bottom:0; }

Or if you really want it inline,
This is the fascinating text that I am writing.

:-)

You mean you opened a paragraph and didn't close it within the same table cell?

Oddly enough, closing 's are optional in 4.01 and less but it's really bad style not to and the W3C will warn you.

lucy24

1:02 am on Jan 25, 2012 (gmt 0)

Aha! The extra space is actually inside the table cell, it just looks like it's between them. fwiw, my default paragraphs have margins only at the top. (Same for almost everything except headers.) Makes it easier to adjust inter-paragraph spacing when you do p + p type stuff.

Oddly enough, closing 's are optional in 4.01 and less but it's really bad style not to and the W3C will warn you.

In fact, some ill-advised actions -- like putting a table inside a paragraph -- will make the validator think a paragraph is closed when you've never touched it. So then it yaps about closing an element that isn't open.

And then there are the browsers that will italicize until the cows come home if you carelessly leave off the before the end of your containing element-- even though the validator raises ### when you do get around to closing it.