Oh I am sure this is not a scam. This is just another typical example of me thinking the world should revolve around the common sense view I have of how machines made of software should work. Of course, there are no laws of nature unbroken by every aspect of cosmos that apply to how software should work. Animation with gravity operating in reverse is just as easy and correct in software as running gravity running in its natural direction outside of software. My problem is when I see gravity running backward in animation, my first response is wrong, because I reflexively consider the backward gravity animation as wrong. Then I make mess by holding onto my views of what is right instead of going with the flow. I am not ready to stop, and today I was assaulted by CSS software doing exactly as it is supposed to, but I am sure what it is supposed to do is where there is an error. The same people that brought us the Floating Div Scam left another cow paddy. The cow paddy makes mess of what I use for blank pages, a starting point when I need to make a web page for just about any purpose. The blank looks like this: Better, take look at it here (LINK to "blank"). I did not just throw this blank together. I am sure it earns criticism and no praise, and I don't care about that . What I do care about is what happens when I commit the reasonable act of placing an h1 tag at the top of blank page. I don't expect the h1 tag to break the blank. It looks like this: Answer A is 100% correct, but it should not be. If you don't care about Answer B, that sucks. If you think Answer B is wrong, please, that is what this thread is for. Here is a closeup of the gap. I will dig out what I have on the Floating Div Scam. I finally got an explanation of why it supposedly is not a scam. The explanation failed the common sense requirement. And here it is in video HTML/CSS Specimens: Broken for no good reason: https://legacy-systems.biz/demos/cssScams/nametempwithheld/ Blank, not broken. https://legacy-systems.biz/demos/cssScams/nametempwithheld_groundreference/ Negotiated Resolution: https://legacy-systems.biz/demos/cssScams/negotiated_resolution/
My guess is that the browser has default CSS settings for elements that are missing a style, and that the default setting includes some unwanted padding. I was able to reproduce the problem without including the stylesheets on your blank page here: http://www.kirstenbolda.com/blog_old/h1-test-gap.html What leads me to this theory is the greyed out settings at the bottom of my inspector. None of those settings are in my webpage and yet here they are showing up as part of the css for my page. I couldn't yet match the gap on the screen with the greyed out css, but that is part of the mystery I've yet to unravel. The key is to override the default browser settings with some settings of my own. It doesn't really matter what they are, even a 1 px padding setting will remove the gap. I added 10px to the top, and poof! No more gap! Oddly enough, for my solution though a gap now appears at the bottom of my page. http://www.kirstenbolda.com/blog_old/h1-test.html The solution might be to clear out all the default browser settings before beginning. My next question would be about the purpose of default browser settings, if they are a nuisance that must be cleared out before creating a proper web page? An exampled of a master stylesheet from this article would look like this: Code: /* Global Defaults */ html, body { margin: 0px; padding: 0px; border: 0px; } body { font: 1em/1.25 Arial, Helvetica, sans-serif; } /* Headlines */ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } /* Text Styles */ p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea { margin: 0; padding: 0; font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif; } blockquote { margin: 1.25em; padding: 1.25em } q { font-style: italic; } acronym, abbr { cursor: help; border-bottom: 1px dashed; } small { font-size:.85em; } big { font-size:1.2em; } /* Links and Images */ a, a:link, a:visited, a:active, a:hover { text-decoration: underline; } img { border: none; } /* Tables */ table { margin: 0; padding: 0; border: none; } /* Forms */ form { margin: 0; padding: 0; display: inline; } label { cursor: pointer; } /* Common Classes */ .clear { clear: both; } .floatLeft { float: left; } .floatRight { float: right; } .textLeft { text-align: left; } .textRight { text-align: right; } .textCenter { text-align: center; } .textJustify { text-align: justify; } .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */ .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .noindent { margin-left: 0; padding-left: 0; } .nomargin { margin: 0; } .nopadding { padding: 0; } .nobullet { list-style: none; list-style-image: none; } I will give adding this master stylesheet to my pages a shot tomorrow.
Pasting this into the style section fixed my test page right up.: http://www.kirstenbolda.com/blog_old/h1-text-fix.html Further reading provided this short rule to zero out all margins and padding: Code: * { margin: 0; padding: 0; } What I'm still trying to figure out: 1. Can I find these default browser values somewhere in the inspector to verify that they are what is being applied to your h1 tag? 2. Are none of the style sheets you have on your blank page styling the padding and margin for the h1 tag?
This might be where the scam is hiding. Mostly what I'm finding is recommendations to reset all the values to avoid the various default settings (since they're all different and subject to change). Determining what the default settings actually are on any given browser with a particular web page, like your blank, eludes me for the time being.
Thank you for such a great great response!!!!! So many perfect things about your response,especiallty the total natural, graceful way that it's rooted in live examples you made. Add to that your insight and Kirsten,, this response is treasure. Viewing yiu examples on my phone, I did not see the gap. Where you reproduced it. I will see what I get on my desktop. I am so glad you brought up a starter sheet for neutralizing browser styles. I will join you in that. My css has some qualities I love, mostly it contains what I need to bring styles to heel. I am so grateful to have had an opportunity to get a handle on css which use to baffle me and make me furious and fearful. It still does, but hardly at all by comparison. I think I am ready now to take a more serious stab at organizing and packaging it so that students/associates can receive a package the will find useful for years and which they might use for developing their own style bundle. It seems almost obvious that something to neutralize browser styles is about the smartest place there is to start. Do you know what a web kit is? How is it that Chrome on a Mac is recorded as windows NT user agent?those are rhetorical questions. As for the scam itself, I don't think I have yet brought to life the sleezy manner that creates the gap. I cannot draw on my phone too much, consider, if my bank has a div that matches its top edge to the top of the viewport (aka window, pane, page).... This is the div with the offwhite background. If it's tip edge matches the top of the page, why does putting an h1 inside that div cause the tip edge to drop away from the top of the page? It happens by the collusion of if the h tag and the div scam artists. The h1 has a huge top margin (or padding, I can't remember which) that determines how far the h1 is going to be from the top of the page. That right there is wrong. Its margin and padding should all be relative to the div that contains not the page as a whole it, but it is worse than that. So the h1 takes its position on the page while it also enforces its position with the div and as a result of that forces the div that contains it down away. From the top. None of that makes sense. To fix it, I put a div inside the div with the background, gave that the space I expected from the h1, then put the h1 in that away from top so it couldn't push the div down to make the gap. Why the h1 is contained by the div instead of shoving its way to the page top I don't know.
Thank you for such a great great response!!!!! So many perfect things about your response, especiallty the totally natural, graceful way it's rooted in live examples made expressly for this thread. Add your special brand of fresh air insight, and Kirsten, this response is treasure. Viewing your examples on my phone, I did not see the gap where you reproduced it. I will see what I get on my desktop. I am so glad you brought up a starter sheet for neutralizing browser styles. I will follow and join you in that. My css has some qualities I love, mostly it contains what I need to bring styles to heel to the extent I know how. I am so grateful to have had an opportunity to get some sort of handle on css which use to baffle me and make me furious and fearful. It still does, but hardly at all by comparison. I think I am ready now to take a more serious stab at organizing and packaging and combining with what you are developing so that students/associates can receive a package they will find useful for years and which they might use for developing their own style bundle. It seems almost obvious that something to neutralize browser styles is about the smartest place to start but that doesn't mean I had thought of that until yiu mentioned it. Do you know what a web kit is? How is it that Chrome on a Mac is appears to a server with the term WINNT as the type of briwser/user agent? Those are rhetorical questions. As for the scam itself, I don't think I have yet brought to life the sleezy manner that creates the gap. I cannot draw on my phone too much, consider, if my blank has a div that matches its top edge to the top of the viewport (aka window, pane, page).... This is the div with the offwhite background. If it's top edge matches the top of the page, why does putting an h1 inside that div cause the tip edge to drop away from the top of the page? Everything inside a div should have no affect and unaffected by everything outside that div. I guess I herited (cascading) styles dictate otherwise, but there is nothing about in common sense that says you should expect an h tag to move its container down from the top edge of the page. Instead the hard tag should take the position within its container without moving the container. It doesn't come across convincingly. The best job I have seen done on how these kinds of things should work is Microsoft PowerPoint and the way they have the same software built into Word. It happens by the collusion of the h tag and the div scam artists. The h1 has huge top margin (or padding, I can't remember which) that determines how far the h1 is going to be from the top of the page. That right there is wrong. Its margin and padding should all be relative to the div that contains not the page as a whole it, but it is worse than that. So the h1 takes its position on the page while it also enforces its position with the div and as a result of that forces the div that contains it down away. From the top. None of that makes sense. To fix it, I put a div inside the div with the background, gave that the space I expected from the h1, then put the h1 in that away from top so it couldn't push the div down to make the gap. Why the h1 is contained by the div instead of shoving its way to the page top I don't know.
This may be a really old issue. I've noticed HTML editors, going back 20 years or more, like to add a blank line (actually a paragraph tag) into default documents, which gets stuck at the top, and the only way to be rid of it is to kill it manually.
