DOCTYPE html add whitespace

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
ianc10
Posts: 5
Joined: September 20th, 2015, 8:19 pm

DOCTYPE html add whitespace

Post by ianc10 »

Hello,

Please browse to my website's home page, http://www.mandelmania.net.

If you view the page source, you will see that FireFox highlights my <html> tag in red. So, I've tried setting the DOCTYPE by replacing <html> with <!DOCTYPE html>. When I do that, however, FireFox inserts a bunch of vertical space in between all the lines. I've tried changing the DOCTYPE to a transitional type, like so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but I still get a bunch of whitespace and other mangled stuff.

Does anyone have any suggestions of how to deal with this? I would like to set the DOCTYPE like this: <!DOCTYPE html> and not have the extra vertical space in between all the lines.

Thanks,
Ian
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: DOCTYPE html add whitespace

Post by trolly »

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">

??
You need both lines as shown above (taken from this page).
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: DOCTYPE html add whitespace

Post by jscher2000 »

From a brief review of your page, you are not writing according to the strict rules of XHTML. Why not use the HTML5 doctype, it's very simple:

Code: Select all

<!DOCTYPE html>
<html>
etc.
ianc10
Posts: 5
Joined: September 20th, 2015, 8:19 pm

Re: DOCTYPE html add whitespace

Post by ianc10 »

Thank you for your replies. I tried both methods suggested, but they both add the extra vertical space that I mentioned:

Image

Is there a practical way to fix the extra vertical space problem?
Thanks,
Ian
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: DOCTYPE html add whitespace

Post by jscher2000 »

For me, Firefox and Chrome display the same, with tight spacing of text. I'm not sure how you got yours to have such a tall line-height. If you right-click the paragraph and choose Inspect Element (Q) and review your style rules, can you see any reason for that? Does it matter if you try a different font?
ianc10
Posts: 5
Joined: September 20th, 2015, 8:19 pm

Re: DOCTYPE html add whitespace

Post by ianc10 »

The page does not currently show the extra vertical space, because it looks incorrect that way, so I did not want to keep it saved that way for the live website. When I add <!DOCTYPE html> to the top, it adds the extra vertical space. I have saved a copy of the page with <!DOCTYPE html> at the top, so you can see the extra vertical space.

Here's the URL: http://www.mandelmania.net/index-extraspace.html

I have inspected the page, as you suggested, and Firefox shows me that the style for bodytext is:
element {
}
.bodytext {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
text-decoration: none;
font-weight: normal;
-moz-hyphens: auto;
}

and the computed values are:
font-family: Verdana,Arial,Helvetica,sans-serif
font-size: 10px
font-weight: 400
text-decoration: none
text-decoration-color: #000
text-decoration-line: none
text-decoration-style: solid
-moz-hyphens: auto
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: DOCTYPE html add whitespace

Post by trolly »

The cause of the extra space seems to be the font size of 20px 16px of the body and its line-height is transferred to all elements. Not sure how the inheritance is.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
ianc10
Posts: 5
Joined: September 20th, 2015, 8:19 pm

Re: DOCTYPE html add whitespace

Post by ianc10 »

Hi trolly,
I'm not sure where you're getting 20px--? The developer toolbar in both Firefox and IE says the font size is 10px. Also, they both show the same style, whether with the <!DOCTYPE html> tag (that results in the extra vertical space) or without.
Ian
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: DOCTYPE html add whitespace

Post by trolly »

If you check the browser styles of the body element (Inspect Element (CTRL-O) -> and then check "Browser styles" in the "Computed Styles" and then select the body element you'll see that the font size is set to 16px and the line height to 20px. If you modify the font size of the body element then your spacing changes too.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: DOCTYPE html add whitespace

Post by jscher2000 »

Yes, that makes sense. In standards mode, the default font-size for the body element is 16px, and the line-height is set large enough to allow descenders below the baseline. Apparently in quirks mode this rule is not applicable.

If you want tighter spacing throughout, you could set the body font-size to a lower value. Obviously this page is designed for young peoples' eyes. ;-)
ianc10
Posts: 5
Joined: September 20th, 2015, 8:19 pm

Re: DOCTYPE html add whitespace

Post by ianc10 »

Thank you for your help! With the <!DOCTYPE html> tag set, I was able to fix the vertical spacing by setting the body font-size to 10px to match the font-size explicitly set elsewhere: body { font-size: 10px; }

Actually LOL the small type is a side effect of the layout from the original website, which was designed for the lower resolution displays from back then. It's approaching the time when the whole website could use a makeover.
Ian
Nware Devr
New Member
Posts: 1
Joined: November 19th, 2015, 4:24 am

Re: DOCTYPE html add whitespace

Post by Nware Devr »

Hello,

Please browse to my website's home page, http://www.asphire.in

If you view the page source, you will see that FireFox highlights my <html> tag in red. So, I've tried setting the DOCTYPE by replacing <html> with <!DOCTYPE html>. When I do that, however, FireFox inserts a bunch of vertical space in between all the lines. I've tried changing the DOCTYPE to a transitional type, like so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but I still get a bunch of whitespace and other mangled stuff.

Does anyone have any suggestions of how to deal with this? I would like to set the DOCTYPE like this: <!DOCTYPE html> and not have the extra vertical space in between all the lines.

Thanks,Nware Devr
Last edited by trolly on November 19th, 2015, 7:29 am, edited 1 time in total.
Reason: Potential spammer, text copied from first post.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: DOCTYPE html add whitespace

Post by jscher2000 »

Nware Devr wrote:If you view the page source, you will see that FireFox highlights my <html> tag in red.
No, it doesn't: view-source:http://www.asphire.in/
Post Reply