http://tiny.cc/2DXgq It's kinda hard to explain but I think you'll see what I mean if you check out the site. There is that extra space below the flash and above where it says "test". It seems like it has something to do with the <p>'s around the word test because when I remove them the problem goes away. I'm just wondering how it got there and how I can fix it. I have never ran across this problem before. Thanks a lot, Nick
In most, if not all, browsers, the <p> element has a default margin of 1em top and bottom. If you don't want it, set p {margin: 0;}. BTW, making a flash based page is a sure way to failure. //edit: Be sure to Google margin collapse. Meyer has an excellent article, "Uncollapsing Margins". cheers, gary
I know <p> has a default margin that's why I am using it there... My question is: how is the margin going outside the top of the div that has the white background? It's making that space between the bottom of the flash and top of the white div. However, when I remove the <p> element everything goes back to normal. lol as for the flash and that extra little comment you decided to throw in, thanks anyway, but it's not my site. Otherwise if it was my site the flash wouldn't there.
It is curious that the p's margin is causing spacing between #content and its surroundings. I figure all bets are off when a browser has to render a non-validating page: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftruematchlive.com%2F.
I think this is correct as IE and FF have differing spaces at the top and bottom of the test paragraph. This is a symptom of two different browsers having two different defaults and the solution to this is to always be explicit so that they can't disagree and use their own defaults ??? Maybe it's no good for search engines but I never heard of it being a sure way to failure. This is only the case where you have one paragraph over top of the other, which is not the case here. When one <p> is on top of another, the browser measures the bottom margin of the top paragraph and the top margin of the bottom paragraph and it throws one of the values out. This is because a paragraph often needs both a top and bottom margin in it's first and last paragraphs, but doesn't need the space between the middle paragraphs to be double from the bottom of the previous paragraph and the top of the current paragraph, so it will collapse the margin of one of them, and it will throw out the smaller value. Ex. all paragraphs set for margin: 10px; first paragraph has 10px on top and 10px on bottom. Next paragraph has 10px on top which combines with the 10px bottom margin of the paragraph on top of it, causing a 20px gap between the two paragraphs when you only want 10px. In order to accomplish the desired 10px space between paragraphs, the browser collapses (ignores) one of the margin values, either the bottom margin of the top paragraph, or the top margin of the bottom paragraph, whichever is smaller. If both values are identical, if memory serves me correctly, it ignores the top margin of the bottom paragraph and uses the margin that it already has from the bottom of the top paragraph.
That's why I went back to add the comment about collapsing margins. The <p>'s margin collapses through the container; despite the misunderstanding of margin collapse illustrated by arnold9000's comment. Do find Meyer's article. It will explain the phenomenon very clearly. You might also look for Ingo Chao's article on hasLayout, which, iirc, discusses IE's mis-handling of the same. Yeah, my sympathies. Sometimes people just insist on messing things up trying to be cool. cheers, gary
Two paragraphs on top of each other do not collapse in between each other? That's the whole purpose for the margin collapse and it's only on the <p> tag, right? This is according to "CSS mastery" by Andy Budd. Are you sure you read what I said correctly? What, exactly, was wrong with what I said? Nothing personal, but isn't that a little bit of a snobby statement? I know people who have done websites for hollywood stars and they use flash extensively. I don't use it myself as I prefer leanness, but that doesn't mean it's inherently wrong. As long as the proper error checking is done, then it depends upon what you are trying to achieve. There are things done in flash that simply cannot be done at all or at least not as effectively using dhtml. Look at the website of most major restaurant chains. Almost all use Flash on the front page. Are these high paid, professional web firms and marketing people ALL wrong and you are right? Maybe so, but that would surprise me a little. Doesn't it sound like a bold statement to assume they're all wrong and you've got it right?
Well, you said this: I'm not disagreeing that two p element vertical margins will collapse. But, it's not just p elements. It happens between nearly all abutted vertical margins in all block level elements. There are specific exceptions, but that's beyond the scope of this thread. The part you missed on is that an element's vertical margin will collapse with its parent's margin. And that, my friend, is at issue here. For example, a p with 1em top margin in a div with no margin will collapse, leaving an effective top margin on the div and no top margin on the p. I'll attach a demo. See Meyer on Uncollapsing Margins. There's the link, since you apparently haven't looked it up yourself. In re my attitudinal statement about flash based pages: OK, straight up? Any soi-disant web developer who would sell and deliver a flash based web-site is an amateur hack. And, yes. I am right about this and they are wrong. Flash is a medium for delivering optional content, on a par with wmp, quicktime, &c.. What it is not, at this time or the foreseeable future is accessible. A page that depends on flash menus for navigation cannot be read by search bots or assistive technologies, or by people who surf without flash or with it disabled. People with motive disabilities that preclude using a mouse or other pointing device cannot navigate a flash page by the keyboard. Flash adds a considerable bandwidth penalty. People with slow connections must suffer long download times. A significant portion will leave without waiting. The html specs do provide for alternative content where flash can't run, but (don't get ahead of me, now) IE doesn't support it; meaning that no one bothers. There is little, if any, benefit to the visitor provided by a flash based site or page. To the extent that any part of the page helps the visitor to succeed at whatever he's trying to do on that page, it's a Good Thing. To the extent that any part impedes the visitor, it fails. Flash as the page fails utterly. gary
kk5st: thanks for the link i'll take a closer look at it! Hopefully this will fix or at least enlighten me about the problem. Also I do need to get my doctype and everything in there as well so I can make sure I get the page to be valid. I was just messing around and noticed the problem with the <p> and stopped there. It's still really weird to me!! Thanks so far, Nick