CSS Vanishing trick

piersk

Ok, I've started working on a template for my support software thingie (now thats technical for you 😉 )

I of course want to be able to validate my page, but when I add the doctype at the top of the page, it changes the size of my main box and therefore hides the submenu. Can anyone figure out why?

Page with strict doctype
Page with loose doctype
Page with no doctype

And for the record, here's my style sheet.

Muchos gracias in advance...

jebster

In IE6 the box does shrink but it does not hide the submenu for me. But it does in Mozilla 1.6. I have had similar problems but never did figure it out!

pyro

With no DOCTYPE, the page is rendered in quirks mode, and for some funky reason, the html and body element are (apparently) set to 100% rather than auto (which would only take up the space it needs to - depending on the amount of content, basically).

Luckily, the fix is simple. You just need to set the height on the html and body elements to be 100%, and all should be good, as "The percentage is calculated with respect to the height of the generated box's containing block." (http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property)

html, body {
    height: 100%;
}

Moonglobe

quirks mode in firebird/mozilla? that's something i didn't know about :rolleyes:

but seriously, im running firebird 0.7 (0.8 out yet?) and only the no-doctype one works... no clue as to why. have you tried it with XHTML 1.1 (or 1.0 strict)?

LordShryku

Originally posted by Moonglobe
im running firebird 0.7 (0.8 out yet?)

Tomorrow

pyro

Originally posted by Moonglobe
quirks mode in firebird/mozilla? that's something i didn't know about :rolleyes:

What did you think happended when you didn't specify a DOCTYPE or specified an invalid one?

Moonglobe

you know, i never really thought about it becuase i never do that 😉

but really, i wouldnt have thought gecko would have a "quirks" mode... that's something IE does. woulda thought it would just run as 4.01 Transitional...

pyro

The concept of the DOCTYPE was originally proposed by Todd Fahrner in a W3C mailing list. I didn't take much time to try to find it, or I'd give you a link. Anyway, here's the concept:

In the presence of a DOCTYPE, odds are the developer knows what he's doing, and is attempting to create his documents in according to standards. Browsers are to parse the pages against the specified specs.

If the DOCTYPE has been omitted, browsers assume that the developer doesn't know what he's doing, and also that the developer sucks (well, maybe they don't assume the latter - who knows... :p), and will render the pages in a backward compatible fashion, and trust me, you'll get some funky results.

drawmack

look into min-height, max-height and height, warning IE treats height like it's supposed to treat min-height

http://www.w3schools.com/css

piersk

I wondered what it meant here (under the loose description)

pyro

The part about including the URI in the DOCTYPE?

piersk

Yeah

[edit] Your suggestion worked pyro. ta muchly[/edit]

pyro

Browsers that use DOCTYPE switching look for complete DOCTYPES, including the URI. If they are incomplete, they use quirks mode. And, just for sh*ts and giggles, IE uses standards mode (or it's interpretation of it) with any XHTML DOCTYPE, whether you give it the URI or not.

goldbug

Don't forget, however, even if you have a nice valid DOCTYPE at the top of your page, IE might still revert to quirks mode if you also have an XML prolog.

piersk

Thats ok cos I don't 🙂

goldbug

For anyone's reference:
http://www.webstandards.org/learn/reference/prolog_problems.html