XHTML 1.1 Doctype and height: 100% in Moz [Archive]

View Full Version : XHTML 1.1 Doctype and height: 100% in Moz

hzr

28.10.2002, 12:08

Yea, the subject says the most. I have the following doctype. Without it, it works good in both moz (1.2b) and IE6. With it it works good just in IE and if I remove the <?xml... line, height: 100% will not work in any of the two browsers. What's the problem?

Here's the doctype:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

-- David

Brian Nickel

28.10.2002, 12:13

When a w3c doctype is used, CSS is kicked into standards mode, which does not support height:%

>++++++++[<++++++++>-]<++.>++++++[<++++++++>-]<.[>+>+<<-]>---------.--------.>----.

hzr

28.10.2002, 12:28

Ahh, ok, didn't have a clue.
Thanks for the answer :)
Is percent going to be used in CSS3?

-- David

hzr

28.10.2002, 12:32

(Since I can't edit I had to pst a new reply)
------
And by the way, why isn't the validator saying anything when I use percent?

-- David

Brian Nickel

28.10.2002, 17:15

I guess the validator was designed in a generic nature.

It seems like CSS3 will support height:%
http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-ltlengthgt

>++++++++[<++++++++>-]<++.>++++++[<++++++++>-]<.[>+>+<<-]>---------.--------.>----.

simu

28.10.2002, 17:40

hey tim,
one post left and you reach 2000! first ever...

---
Simon Käser
admin@endlessX.com
http://endlessX.com

Brian Nickel

28.10.2002, 17:51

Drat, I was trying to get to 1000 before you got to 2000. :(

>++++++++[<++++++++>-]<++.>++++++[<++++++++>-]<.[>+>+<<-]>---------.--------.>----.

hzr

28.10.2002, 19:33

Yea, actually, I tried with an HTML 4 doctype too but that won't work either. Both moz and IE displays it wrong.

-- David

hzr

28.10.2002, 19:59

I have not given any position to the element.

-- David

Brian Nickel

28.10.2002, 21:49

I believe that any w3c doctype will send it into chaos.
You are stuck in the position where inferiority works better than standards.

>++++++++[<++++++++>-]<++.>++++++[<++++++++>-]<.[>+>+<<-]>---------.--------.>----.

mad hatter

29.10.2002, 01:54

% is fine for CSS2, not sure what SG was talking about. The problem usually stems from not setting with width/height of the html element. I usually do something like this:

[code:wey5s2geih]html, body {
width : 100%;
height : 100%;
margin : 0;
overflow : hidden;
}

body {
overflow : auto;
}[/code:wey5s2geih]

That usually does the trick.

- D.S.
< [url="http://www.stilleye.com"]stilleye[/url:wey5s2geih] | [url="http://www.stilleye.com/scripts/marginfix"]IE Margin Fix[/url:wey5s2geih] >

Brian Nickel

29.10.2002, 02:13

My bad, I was going off false memories (associating CSS1 memories with my memories of rewriting for IE6).
Sorry for the confusion.

Thanks for pointing out my falicy.

>++++++++[<++++++++>-]<++.>++++++[<++++++++>-]<.[>+>+<<-]>---------.--------.>----.

hzr

29.10.2002, 06:27

ok, I included:[code:6d04j7zg8b]
html, body {
width : 100%;
height : 100%;
overflow : hidden;
}[/code:6d04j7zg8b]
There were no need for the overflow: auto part BTW.

Anyway, that solved the problem, it seems to work fine now with *all* doctypes. Thanks David and you too, Brian and Tim.

I've ran into another problem though. I have your disable stylesheets bookmarklet in the page, David, so I can switch easily. When I click it, mozilla shuts down. When I remove the overflow: hidden it works good though. It also works good in IE with the overflow part left but I remember I've had problems with overflow in moz earlier. Anyone knows the problem. My version og mozilla is 1.2b. Maybe it's not stable because of the beta?
I can upload a page so you can see it if you want.

-- David

Garrett Smith

31.10.2002, 21:53

<blockquote id="quote">quote:<hr id="quote">
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block

The height of the initial containing block may be specified with the 'height' property for the root element. If this property has the value 'auto', the containing block height will grow to accommodate the document's content.
<hr id="quote"></blockquote id="quote">

You shouldn't (according to spec) have to use html{ height: 100% }; a value of 'auto' is the initial value.

http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property

[url="http://dhtmlkitchen.com/"]Garrett needs a job[/url:45q29i3owl]

mad hatter

01.11.2002, 05:32

But, if you don't set the height to be 100%, it won't fill up the whole browser window, which causes problems when you do things like bottom positioning.

- D.S.
< [url="http://www.stilleye.com"]stilleye[/url:7df6baus0p] | [url="http://www.stilleye.com/scripts/marginfix"]IE Margin Fix[/url:7df6baus0p] >

Garrett Smith

01.11.2002, 12:42

Oh, you're right. I see, I was confused with width, which does grow to accomodate the viewport:

<blockquote id="quote">quote:<hr id="quote">
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block

The width of the initial containing block may be specified with the 'width' property for the root element. If this property has the value 'auto', the user agent supplies the initial width (e.g., the user agent uses the current width of the viewport).
<hr id="quote"></blockquote id="quote">

I should have read the snippet I pasted earlier more carefully.

[url="http://dhtmlkitchen.com/"]Garrett needs a job[/url:lf4uin2h49]