|
Title: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: BitcoinMoxy on May 31, 2013, 10:49:06 PM I just encountered a weird thing (not aliens).
I wasn't giving this much attention until the final stages of cleaning up the markup of my site, having decided to go fully HTML5 (which I believe was the right decision). Quoting from the web as referenced to by Wikipedia: Quote Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers. (from http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#the-doctype)Using <!DOCTYPE HTML> as recommended by the W3C produced a glitch in the rendering of my site which otherwise validates neatly. Coincidentally adding the PUBLIC identifier to the DOCTYPE declaration fixed the glitch. Here's a pic using <!DOCTYPE HTML> (notice the gap at the bottom of the page, use the black square down left as a reference point): http://imageshack.us/a/img694/3111/bmoxynone.png And <!DOCTYPE HTML PUBLIC> (no gap, as it should be): http://imageshack.us/a/img59/5524/bmoxypublic.png Any HTML/Web Standards experts around who can tell me what causes this? The source was otherwise left unmodified (could be Chrome related). Just curious. See the source/page on BitcoinMoxy.com (http://BitcoinMoxy.com) (the info page, or any other pages have not been cleaned up yet, so it just concerns index.html) Have a good Friday evening Title: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: Foxpup on June 01, 2013, 01:50:23 AM And <!DOCTYPE HTML PUBLIC> (no gap, as it should be): This is not a valid DOCTYPE. PUBLIC must be followed by both a public and system identifier (eg, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). Without a valid DOCTYPE, your browser may take it upon itself to "correct" any irregularities in your markup (even if your markup is syntactically valid).For example, in Firefox, your body's 0 px margin is not always inherited by other elements. Whereas, if you had used a valid DOCTYPE, your body's margin will be inherited, resulting in all elements which don't specify their own margin to have a 0 px margin instead of the default margin, which is what's screwing up your spacing (in reality, it's not screwed up at all: it's exactly what you asked for, even though it's not what you meant). At least, that's what's happening in Firefox. Other browsers may correct your markup in different ways, resulting in your page appearing different in different in different browsers. TL;DR: If you use <!DOCTYPE HTML> (or any other valid DOCTYPE), your browser will display exactly what your markup specifies. If this differs from what you wanted or expected, there is a bug in your markup. If you use <!DOCTYPE HTML PUBLIC> (or any other invalid DOCTYPE), your browser will attempt to fix such bugs, resulting in your page looking correct even if it is not. However, this is not valid and your page is likely to look different (and may even look worse than if the bug was not fixed at all) in different browsers. Title: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: BitcoinMoxy on June 06, 2013, 12:55:22 AM You were absolutely correct about the doctype declaration. It was Chrome indeed which displayed the page as I wanted but not according to specifications. Which is what caused the confusion.
Thank you very much. Now I don't know if you've got another 5 minutes on your hand to help me figure out why Internet Explorer still displays a gap down there (though different from the doctype case from what it looks like)... It seems to be caused by the first <span> element inside <div id="status">. I'll send a small token of appreciation (like a buck twenty) to you or anybody else who can get IE to align with my markup vision :) (unless it requires non-standard workarounds, then don't bother). Regards Title: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: Foxpup on June 06, 2013, 04:41:51 AM Now I don't know if you've got another 5 minutes on your hand to help me figure out why Internet Explorer still displays a gap down there (though different from the doctype case from what it looks like)... You mean the gap between the image and the bottom of the page? IE always leaves a gap between the last block and the bottom of the page, even if the block has no bottom margin or padding. I don't know how to get rid of it, sorry. I have long since given up on trying to get IE to display pages correctly. This isn't the worst violation of the HTML standard I've seen from IE, not by a long shot.It seems to be caused by the first <span> element inside <div id="status">. I'll send a small token of appreciation (like a buck twenty) to you or anybody else who can get IE to align with my markup vision :) (unless it requires non-standard workarounds, then don't bother). Title: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: BitcoinMoxy on June 06, 2013, 04:50:48 PM Now I don't know if you've got another 5 minutes on your hand to help me figure out why Internet Explorer still displays a gap down there (though different from the doctype case from what it looks like)... You mean the gap between the image and the bottom of the page? IE always leaves a gap between the last block and the bottom of the page, even if the block has no bottom margin or padding. I don't know how to get rid of it, sorry. I have long since given up on trying to get IE to display pages correctly. This isn't the worst violation of the HTML standard I've seen from IE, not by a long shot.It seems to be caused by the first <span> element inside <div id="status">. I'll send a small token of appreciation (like a buck twenty) to you or anybody else who can get IE to align with my markup vision :) (unless it requires non-standard workarounds, then don't bother). Foxpup, thanks alot for your input. IE seems to not render a gap when the last div in the document is either left empty completely or if it just has text without another <span> in it. Making it a floating element works, too, but then it offsets the hidden popup <span> element differently in all browsers, causing more annoyance. Spent an hour and a half last night just fooling around with trial and error and couldn't get it fixed the way I wanted. I'll either give it another half hour tonight or go in favour of Firefox/Chrome beauty. Sent you a buck twenty. Title: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: Foxpup on June 07, 2013, 08:09:49 AM IE seems to not render a gap when the last div in the document is either left empty completely or if it just has text without another <span> in it. Making it a floating element works, too, but then it offsets the hidden popup <span> element differently in all browsers, causing more annoyance. Spent an hour and a half last night just fooling around with trial and error and couldn't get it fixed the way I wanted. ??? It makes absolutely no difference on my computer using IE 8.0. Removing the spans leaves exactly the same gap. The only thing that makes any difference at all is increasing the padding/margins, which increases the size of the gap (as expected), but nothing I've tried will reduce the gap or remove it completely. I wouldn't have thought floating it would make a difference, but I never thought to try that because it'll just screw up the pop-up even if it works. I don't think there's any way to float it and still have the pop-up work the way you want.Sent you a buck twenty. Thanks. ;DTitle: Re: <!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC> (WTF!) Post by: BitcoinMoxy on June 07, 2013, 04:42:31 PM IE seems to not render a gap when the last div in the document is either left empty completely or if it just has text without another <span> in it. Making it a floating element works, too, but then it offsets the hidden popup <span> element differently in all browsers, causing more annoyance. Spent an hour and a half last night just fooling around with trial and error and couldn't get it fixed the way I wanted. ??? It makes absolutely no difference on my computer using IE 8.0. Removing the spans leaves exactly the same gap. The only thing that makes any difference at all is increasing the padding/margins, which increases the size of the gap (as expected), but nothing I've tried will reduce the gap or remove it completely. I wouldn't have thought floating it would make a difference, but I never thought to try that because it'll just screw up the pop-up even if it works. I don't think there's any way to float it and still have the pop-up work the way you want.Sent you a buck twenty. Thanks. ;DUpdated the page. Enjoy your burrito ;) |
