Framing a window not working in Strict Doctype

[tshad]

I have a template screen that I use for all of my windows. I had set the
Doctype to Transitional. I then found that IE6 didn't handle some of the
tags correctly unless I set it to Strict.

Now my window framing doesn't work.

What I want to do is frame the window Top, Bottom and Left with
titles,footers and links. I want the bottom piece to always be on the
bottom of the screen (unless the content pushes it farther down). But at no
time to I want to footer to be in the center of the screen (looks
ridiculous).

It is (or was) easy to do:

http://www.payrollworkshop.com/samples/WindowFrameExample1.htm

If you change the size of the window, you should see the bottom row (footer)
move with you.

I have Doctype set to Transitional and it works great.

Now, if you look at:

http://www.payrollworkshop.com/samples/WindowFrameExample2.htm

You should see that bottom row is in the middle of the page.

The only thing different is that the Doctype is set to Strict.

How can I fix this?

Thanks,

Tom.

 

[Mark Parnell]

The only thing different is that the Doctype is set to Strict.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

 

[tshad]

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

That was confusing and doesn't really help me figure out which way to go.
The article appears to be from Jan/Feb 2003.

One of my problem was in using "vertical-align:baseline", which caused some
of the tables in IE to move out of position and under other tables if set to
Transitional. Switch to Strict and it worked fine. But if Set to Strict my
Page frame doesn't work, but does under Transitional.

Tom

 

[Oli Filth]

That was confusing and doesn't really help me figure out which way to go.
The article appears to be from Jan/Feb 2003.

One of my problem was in using "vertical-align:baseline", which caused some
of the tables in IE to move out of position and under other tables if set to
Transitional. Switch to Strict and it worked fine. But if Set to Strict my
Page frame doesn't work, but does under Transitional.

Basically, it's considered good practice to write all new webpages in
HTML 4.01 Strict, as this is a much less bloated version of HTML, where
all deprecated elements like <FONT> and <CENTER> are invalid, and forces
you to write neat, uncluttered semantic markup (which was what HTML was
always meant to be about). HTML Transitional is designed as a stepping
stone for authors who are modernising existing pages.

As for frames, it's generally considered bad practice to use frames in
modern webpages anyway. See
http://www.html-faq.com/htmlframes/?framesareevil and associated links
for reasons why, and how to adopt a more effective approach.

 

[Mark Parnell]

That was confusing

What was confusing? Try reading some of the other pages he links to at
the bottom of the page.

Alright, let me try and explain it to you. The reason your page displays
differently depending on the doctype you use is because of what is known
as "doctype switching" or "doctype sniffing". Basically, for certain
doctypes, browsers will mimic the bugs in older versions of the browser
(known as "quirks mode"), and for other doctypes it will display the
page (more) according to the standards (known as "standards mode").
Using a Transitional doctype (without the URL) triggers quirks mode in
most browsers. Using a Strict doctype (with or without the URL)
generally triggers standards mode.

and doesn't really help me figure out which way to go.

But it explains why you are observing the behaviour that you are.

The article appears to be from Jan/Feb 2003.

It is still relevant and correct.

But if Set to Strict my
Page frame doesn't work, but does under Transitional.

Then that part of your code is wrong. The behaviour under the Strict
doctype is correct.

You want to know which way to go? Use a Strict doctype, validate your
code, and test in a modern browser. Once it is all working correctly,
*then* test in IE, and add any hacks or workarounds necessary.

 

[tshad]

Basically, it's considered good practice to write all new webpages in HTML
4.01 Strict, as this is a much less bloated version of HTML, where all
deprecated elements like <FONT> and <CENTER> are invalid, and forces you
to write neat, uncluttered semantic markup (which was what HTML was always
meant to be about). HTML Transitional is designed as a stepping stone for
authors who are modernising existing pages.

As for frames, it's generally considered bad practice to use frames in
modern webpages anyway. See
http://www.html-faq.com/htmlframes/?framesareevil and associated links for
reasons why, and how to adopt a more effective approach.

I am not using frames. I agree that frames are a problem. I am just
talking about framing a page. If you look at my examples, you can see what
I am talking about.

I want to put our copywrite and other links on the bottom of the page
(Strict is putting the <tr> after the last content entry - which could be in
the middle of the page). Looks ridiculous.

Tom

 

[tshad]

What was confusing? Try reading some of the other pages he links to at
the bottom of the page.

Alright, let me try and explain it to you. The reason your page displays
differently depending on the doctype you use is because of what is known
as "doctype switching" or "doctype sniffing". Basically, for certain
doctypes, browsers will mimic the bugs in older versions of the browser
(known as "quirks mode"), and for other doctypes it will display the
page (more) according to the standards (known as "standards mode").
Using a Transitional doctype (without the URL) triggers quirks mode in
most browsers. Using a Strict doctype (with or without the URL)
generally triggers standards mode.


But it explains why you are observing the behaviour that you are.


It is still relevant and correct.


Then that part of your code is wrong. The behaviour under the Strict
doctype is correct.

You want to know which way to go? Use a Strict doctype, validate your
code, and test in a modern browser. Once it is all working correctly,
*then* test in IE, and add any hacks or workarounds necessary.

I agree. The problem is I can't figure out how to make this work. I can't
make it work correctly.

I am using the Strict Doctype, as you suggest, but how do I make the bottom
row go to the bottom of the screen. Height=100% used to do that.

Tom

 

[Oli Filth]

I am not using frames. I agree that frames are a problem. I am just
talking about framing a page. If you look at my examples, you can see what
I am talking about.

Bizarre! I've gone mad. I could've sworn when I first looked at your
HTML it was using frames, but that was obviously code I'd seen in
someone else's thread. Apologies!

 

[rf]

I am using the Strict Doctype, as you suggest, but how do I make the bottom
row go to the bottom of the screen. Height=100% used to do that.

You don't.

The emphasis is no longer on the viewport, and positioning things *on the
viewport*.

The emplasis is on the web document which may or may not be "viewed" by a
browser that even has a viewport. Yes, some browsers do not have a viewport.
Without a viewport there is no concept of the "height" of a document.

If you really *must* position something at the bottom of a viewport then
position: absolute can be used. However that always positions the something
at the bottom of the viewport, even if the document is "higher" than the
viewport and is, IMHO, a hack.

I would just accept the fact that your copyright notice goes at the *end of
the document*. If you cannot accept that then you are designing to the
transitional doctype[1], not the strict

The strict doctype does not just affect the HTML, it affects the design
possibilities as well.
You also can not open new windows (unless you defeat the strict philosophy
with javascript) just as you can not use frames (because there is no target
attribute).
You can not use depricated elements and attributes, simply because they are
not defined.

 

[tshad]

Bizarre! I've gone mad. I could've sworn when I first looked at your HTML
it was using frames, but that was obviously code I'd seen in someone
else's thread. Apologies!

That's OK. I have these brain-fades all the time

Tom

 

[tshad]

You don't.

I guessed that.

The emphasis is no longer on the viewport, and positioning things *on the
viewport*.

By viewport, I assume you mean the size of the window in the browser.

The emplasis is on the web document which may or may not be "viewed" by a
browser that even has a viewport. Yes, some browsers do not have a
viewport.
Without a viewport there is no concept of the "height" of a document.

If you really *must* position something at the bottom of a viewport then
position: absolute can be used. However that always positions the
something
at the bottom of the viewport, even if the document is "higher" than the
viewport and is, IMHO, a hack.

I don't quite now how you are going to use position:absolute, when you don't
know what the size of the window is going to be.

It is not a "must" to put the copywrite and links at the bottom of the
viewport. It will always be at the end of the document, which means it
could be below the viewport where you would see it when you scroll to the
bottom.

The problem is that if you have a small amount of content and have a
"framed" look to the window, you are saying this is impossible without using
Transitional. That was what I wanted to know.

I would not call this a hack as it was perfectly fine up until the switch to
Strict. Which is what usually happens when standards change ( or evolve ) -
some features get tossed.

Not always a bad thing, just a fact of life.

I would just accept the fact that your copyright notice goes at the *end
of
the document*. If you cannot accept that then you are designing to the
transitional doctype[1], not the strict

I either can use Strict so I can use baseline formatting or Transitional if
I want to do the above. I can't do both, apparently.

 

[Oli Filth]

I want to put our copywrite and other links on the bottom of the page
(Strict is putting the <tr> after the last content entry - which could be in
the middle of the page). Looks ridiculous.

Try adding the following to your CSS:

HTML, BODY
{
height: 100%;
margin: 0;
padding: 0;
}

 

[tshad]

Try adding the following to your CSS:

HTML, BODY
{
height: 100%;
margin: 0;
padding: 0;
}

THAT DID IT.

As you can see in
http://www.payrollworkshop.com/samples/WindowFrameExample3.htm, it does
work. It looks exactly as it is supposed to in Mozilla. In IE, the framing
is working, but the background color is only going halfway across. This is
fine - it is happening, I believe, because I only have the Background
defined for the first <td>. Easily dealt with. Just interesting that
Mozilla doesn't do the same.

Would I also have a "Body" tag as well as the "HTML, Body" tag? Or does it
cover both.

Why does this one work and with the HTML, it doesn't?

I was sure I was going to have to set up some workaround to make my 2
problems work.

Thanks,

Tom

 

[Oli Filth]

THAT DID IT.

Would I also have a "Body" tag as well as the "HTML, Body" tag? Or does it
cover both.

HTML, BODY means that the defined styles apply to both the HTML and the
BODY elements. To be honest, I've never really bothered to discover the
distinction between HTML and BODY in this respect, because this sort of
CSS has always worked fine for my pages. Someone else may be able to
answer this!


By the way, you have your td width set to "100" without any units. You
must specify units in HTML Strict, be they %, em, px, or pt. Not to
mention that the width attribute is invalid in Strict. AND your DOCTYPE
declaration is incorrect.

http://validator.w3.org/check?verbo...lworkshop.com/samples/WindowFrameExample3.htm.

 

[rf]

I don't quite now how you are going to use position:absolute, when you don't
know what the size of the window is going to be.

position: absolute; bottom: 0; positions the element with its bottom border
at the bottom the containing block. In the absence of any other containing
block the root of the DOM becomes the containing block. Cone would expect
this to be the document and the reccomendations imply this.

However most browsers, in varying manners, position such elements at the
bottom of the viewport.