homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Doc Type: Creates Extra Paragraph Space between Tables
kccollins



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4409830 posted 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



 
Msg#: 4409830 posted 1:23 pm on Jan 23, 2012 (gmt 0)

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

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4409830 posted 1:34 pm on Jan 23, 2012 (gmt 0)

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

kccollins



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4409830 posted 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



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4409830 posted 5:55 pm on Jan 23, 2012 (gmt 0)

Low-tech version:

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

;)

james123



 
Msg#: 4409830 posted 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



 
Msg#: 4409830 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4409830 posted 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



 
Msg#: 4409830 posted 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"><p>Some text here</p> </td>
<td width="535" valign="top"><p>Paragraph title here</p>
<p>This is the fascinating text that I am writing.</p></td>
</tr>
</table>

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

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4409830 posted 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,
<p style="margin-bottom:0;">This is the fascinating text that I am writing.</p>

:-)

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

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

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4409830 posted 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 </p>'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 </i> before the end of your containing element-- even though the validator raises ### when you do get around to closing it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved