Page doesn't display anything when I include the DOCTYPE... my 100th question?
UPDATE
I started going line by line and this was the first CSS style that let the browser show things. In particular, the absolute positioning seems to be screwing things up... I don't know why. If I remove it, or change it to relative, then things show up, but obviously not in the right place.
#foo {
height: auto;
width: auto;
margin-left: -500px;
padding-top: 300px;
position: absolute;
bottom: 0px;
left: 50%;
top: 0px;
}
As requested, you can view the HTML mark开发者_C百科up here. Note, however, that there is a lot of dynamic HTML being generated during page load that is not in the HTML markup linked here.
I'm not quite sure why, but when I include the HTML 5 doctype <!doctype html> at the top of my .html file, nothing displays. However, inspecting the source using Chrome's Developer Tools shows that everything is in the DOM and all the CSS properties are applied.
Huh!? Weird.
I started investigating and found that when I remove my stylesheet, i.e. when I remove this line...
<link type="text/css" rel="stylesheet" href="css/new.css" />
... things show up on the page, but obviously the styling is not applied. The full css file can be found here.
Any ideas as to why this is happening; suggestions on fixes? I'm pretty sure my CSS is all valid but from what I've heard, the W3C CSS Validator doesn't validate CSS3 very well
Start by using a very limited css file. Meaning a blank one.
Then start adding the selectors back in until it breaks. Once that happens you should be able to find the problem.
UPDATE:
foo is overflowing wrapper. Because of this it is completely hidden.
If you add "border: solid 1px blue;" to the #wrapper tag you'll see what I mean.
For more information see: Percentage Height HTML 5/CSS
Basically, the min-height setting on the #wrapper tag isn't doing anything because it's parent (#everything) doesn't have a height set. The only way % heights work is if the parent elements define an actual height.
In this case you'd have to add the following:
html { height: 100%;}
body { height: 100%;}
#everything { height: 100%; ... }
Then your wrapper will start wrapping and you can go back to the way you had it.
Which leads us to the original question: Why does this work when the doctype is yanked out?
The answer is that the browser was falling back into quirks mode which took care of expanding those divs for you.
Try <!DOCTYPE html> rather than <!doctype html>
加载中,请稍侯......
精彩评论