Page doesn't display anything when I include the DOCTYPE... my 100th question?

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 markup 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

Have you tried hard resetting your spacings at the top of your stylesheet (ie. html, body, div, span, p, img... etc) instead of using an asterisk? Not sure if that's the problem, but then again I'm not well versed yet in html5 quirks. — 65Fbef05, Apr 20 '11 at 22:13
no... I removed the universal selector and it didn't help. I also tried using Eric Meyer's CSS reset. didn't help — Hristo, Apr 20 '11 at 22:16
that didn't help either. ugh. thanks for your suggestions. I'm going to try going 1 by 1 — Hristo, Apr 20 '11 at 22:19
BTW, you have two html open tags in `new.txt` that you linked to. — 65Fbef05, Apr 20 '11 at 22:33
2 open html tags? I don't think so... the first line is the doctype declaration. — Hristo, Apr 20 '11 at 22:37
That's right, sorry. I eye-balled it too quickly; been at work for too long today. — 65Fbef05, Apr 20 '11 at 22:40
get out of work :D its about that time isn't it? anyway, check out Chris Lively's answer below. He identified the issue. Check out the comments to see the solution and make a comment, please :) — Hristo, Apr 20 '11 at 22:41
Yeah, I just read it. Good call @Chris Lively - I didn't spot the hidden overflow until you pointed it out. — 65Fbef05, Apr 20 '11 at 22:47

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

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.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 20 '11 at 22:13

NotMe

87,343
27
171
245

@Chris... you're right. I changed the positioning of `#foo` to `fixed` and it seems to achieve the same effect, but when I resize the window, the `min-width` property doesn't apply. Any suggestions? – Hristo Apr 20 '11 at 22:36
@Chris... actually, just changing `#wrapper` to have visible overflow fixed the problem, but do you think that is a good solution? – Hristo Apr 20 '11 at 22:40
@Hristo: That's a whole different problem. min-width appears to be working in the short sample I put together that only has the #everything, #wrapper, and #foo tags. – NotMe Apr 20 '11 at 22:41
@Hristo: I think you might want to figure out why #wrapper isn't doing what you want by wrapping the whole thing. – NotMe Apr 20 '11 at 22:43
Without fixed dimensions, hiding your overflow will always truncate and produce this result. – 65Fbef05 Apr 20 '11 at 22:43
@Chris... yeah I'll try to figure it out. I feel like this layout is a huge huge hack for what I'm trying to do. @65Fbef05... aren't my dimensions fixed, 1000px? – Hristo Apr 20 '11 at 22:51
Not for your `#wrapper` element - you have that set to a variable `100%`. – 65Fbef05 Apr 20 '11 at 22:53
@Hristo: the missing link was the #everything declaration. When it has a min-height set then it'll work. – NotMe Apr 20 '11 at 22:53
@Chris... giving `#everything` a `min-height:100%` doesn't seem to be helping. – Hristo Apr 20 '11 at 22:58
@Chris... got it! not `min-height`, but `height: 100%` haha. thanks! – Hristo Apr 20 '11 at 23:03

score 0 · Answer 2 · answered Apr 20 '11 at 22:09

0

Try <!DOCTYPE html> rather than <!doctype html>

answered Apr 20 '11 at 22:09

pickypg

22,034
5
72
84

Then, without seeing the HTML page, I'd assume it was this: `#symbols-block [class *="-symbols"] { display: none; }` If it's not that, then I'd follow Chris Lively's suggestion, but I'd probably start by just removing the CSS that sets `display: none;` – pickypg Apr 20 '11 at 22:17

Page doesn't display anything when I include the DOCTYPE... my 100th question?

UPDATE

2 Answers2