DOCTYPE html add whitespace
-
- Posts: 5
- Joined: September 20th, 2015, 8:19 pm
DOCTYPE html add whitespace
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
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
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: DOCTYPE html add whitespace
<!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).
<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.
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
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: DOCTYPE html add whitespace
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.
-
- Posts: 5
- Joined: September 20th, 2015, 8:19 pm
Re: DOCTYPE html add whitespace
Thank you for your replies. I tried both methods suggested, but they both add the extra vertical space that I mentioned:
Is there a practical way to fix the extra vertical space problem?
Thanks,
Ian
Is there a practical way to fix the extra vertical space problem?
Thanks,
Ian
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: DOCTYPE html add whitespace
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?
-
- Posts: 5
- Joined: September 20th, 2015, 8:19 pm
Re: DOCTYPE html add whitespace
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
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
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: DOCTYPE html add whitespace
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.
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.
-
- Posts: 5
- Joined: September 20th, 2015, 8:19 pm
Re: DOCTYPE html add whitespace
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
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
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: DOCTYPE html add whitespace
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.
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
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: DOCTYPE html add whitespace
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.
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.
-
- Posts: 5
- Joined: September 20th, 2015, 8:19 pm
Re: DOCTYPE html add whitespace
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
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
-
- New Member
- Posts: 1
- Joined: November 19th, 2015, 4:24 am
Re: DOCTYPE html add whitespace
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
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.
Reason: Potential spammer, text copied from first post.
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: DOCTYPE html add whitespace
No, it doesn't: view-source:http://www.asphire.in/Nware Devr wrote:If you view the page source, you will see that FireFox highlights my <html> tag in red.