MozillaZine

DOCTYPE html add whitespace

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

Post Posted September 20th, 2015, 8:25 pm

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

trolly
Moderator

User avatar
 
Posts: 39866
Joined: August 22nd, 2005, 7:25 am

Post Posted September 21st, 2015, 5:46 am

<!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.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 21st, 2015, 11:04 pm

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

Post Posted September 22nd, 2015, 10:56 pm

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

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 23rd, 2015, 1:09 am

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

Post Posted September 23rd, 2015, 8:22 am

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

trolly
Moderator

User avatar
 
Posts: 39866
Joined: August 22nd, 2005, 7:25 am

Post Posted September 23rd, 2015, 8:49 am

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

Post Posted September 23rd, 2015, 10:24 am

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

trolly
Moderator

User avatar
 
Posts: 39866
Joined: August 22nd, 2005, 7:25 am

Post Posted September 23rd, 2015, 10:45 am

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.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 23rd, 2015, 12:39 pm

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

Post Posted September 23rd, 2015, 11:46 pm

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

Post Posted November 19th, 2015, 4:32 am

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.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted November 19th, 2015, 7:25 pm

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/

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest