Teet Kalm

Email conversation

From	Teet Kalm
To	Me
Subject	How to create frames-like page using CSS?
Date	11 October 2006 23:17

Hello.

Thank You for this great site! It extended totally my understanding how to
create good homepage, using CSS and javascript wisely.

Problem. I know, frames are outdated stuff. But some people want to see
their homepages with always-visible top menu. At
[URL], there's an example, same page with different
technologies (do not let interfere himself from this cookie-warning :)).
First link points to "normal" page with no frames used, second link, same
page with real frames, third uses iframe-feature. Clicking on menuitem
"uudised" (news) opens longer page, bringing frames visible.

Here's point. How to create bottom-frame-like feature using CSS? Content
below menubar must become scrollable on long pages, but bottom border of
this bottom "frame" must always grab to browser bottom border. Normal
browser scrollbar shouldn't become visible. Page should act like using
frames.

I have tried to create such feature, but seems like there's problem
determining elements relative height or distance from  browser bottom window
using standard CSS/HTML tools. Iframe needs percentage height relative with
total page height, and may float lower than browser's border.

Here's small explanation, or summary:
TOP BOX,
MENUS,
BANNER.
ALWAYS VISIBLE
    total
height:
equals
with
browser's
window
page
height
BOTTOM
BOX WITH
SCROLLING
CONTENT



Thank You anyway for this great pure-style webpage. My english isn't maybe
excellent, but i hope all thoughts became clear.

With kind regards,
Teet Kalm

From	Me
To	Teet Kalm
Subject	Re: How to create frames-like page using CSS?
Date	12 October 2006 18:16

Teet,

> Here's point. How to create bottom-frame-like feature using CSS?

There are two easy ways to do this. Both of them need you to put the
navigation on every page, instead of a separate frame.

1. Use fixed positioning for the navigation, and a top margin on the main
content to push it below the navigation. This leaves a scrollbar on the
viewport, but this only affects the bottom content, and is better for
accessibility, since it does not break scrollwheel or mouse panning.

However, IE 6 does not support fixed positioning (IE 7 does). You can use my
workaround if needed (I have not used it in the example code below):
http://www.howtocreate.co.uk/fixedPosition.html

This is the general markup:
<style type="text/css">
html, body { margin: 0; padding: 0; }
#nav { position: fixed; top:0; left:0; width: 100%; height: 200px; }
#content { margin-top: 200px; }
</style>
...
<div id="nav">
  <ul>
    ...
  </ul>
</div>
<div id="content">
  ...
</div>

2. Use overflow to fake the inner frame. This has a slight problem that IE 6
will not stretch positioned elements correctly due to its shrinkwrap bug.
However, as long as you are not applying a background to the scrolling
element, that will not matter here, since it will correctly stretch when the
contents are big enough to make a scrollbar.

The scrollbar will be where it would have been for a real frame, but that
causes some browsers not to use the scrollwheel or panning properly.

The general markup is the same as in version 1, but the CSS changes to this:
html, body { margin: 0; padding: 0; overflow: hidden; }
#nav { position: absolute; top:0; left:0; width: 100%; height: 200px; }
#content {
  position: absolute; top: 200px; left:0; width: 100%; bottom: 0;
  overflow: auto;
}

Unfortunately IE 6 sucks. It does not respect top: and bottom: at the same
time. So it needs a hack :(

<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
#nav { position: absolute; top: 0; left: 0; width: 100%; height: 200px; }
#content {
  position: absolute; top: 200px; left: 0; width: 100%; bottom: 0;
  overflow: auto;
}
</style>
<!--[if IE 6]><style type="text/css">
#content {
  height: expression( ( document.documentElement.clientHeight - 200 ) + 'px');
}
</style><![endif]-->

(Note that you will need to use a DOCTYPE that triggers IE's strict mode).


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Teet Kalm
To	Me
Subject	Re: How to create frames-like page using CSS?
Date	14 October 2006 20:36

Thank You for this great help. I updated my test-page,
[URL], where can find test results.

This example did work good in Firefox and Opera, as expected. Little problem
were with Firefox, i had to discard rule "width:100%" for content div-tag,
because with using "padding: 1em" scrollbar did not appear, i used "right:0"
instead. I applied this rule for my iframe-example, it worked well with same
rules.

As i little expected, there were serious problems with IE. It noticed
overflow:none in body-tag, but not for content tag, it became
non-scrollable. <style>-expression-tag seems like did not work in IE. Maybe
there is some sort of source error.

My page were 100% validatable in w3.org. But after tricking with styles, i
added class-attribute for HTML, which forced IE always show page scrollbar
and use it like it were normal scrollable page (first CSS-link in page I
pointed), but Firefox and Opera maintained original page look. This
class-attribute in html-tag is wrong for w3-validator.

Oh, additionally, iframe-example did not work in IE with new rules.

Is there any hack for get this page working in IE?

Regards,
Teet.

From	Me
To	Teet Kalm
Subject	Re: How to create frames-like page using CSS?
Date	15 October 2006 21:31

Teet,

> i had to discard rule "width:100%" for content div-tag, because with using
> "padding: 1em" scrollbar did not appear, i used "right:0" instead.

IE 6 will not understand this. It cannot use left and right at the same
time. I recommend that instead, you use two divs, one inside the other. The
outer one has the position, left and width. The inner one has the padding.
Since the inner one is not positioned, it defaults to being the full width
of its parent, but without the padding causing problems.

Note also that when it comes to iframes, they also should not recognise both
left and right at the same time in standards compliant browsers like Opera
(Firefox gets this wrong). Although that feels wrong, it is actually stated
in the CSS spec (CSS 2.1 section 10.3.8.1 and 10.6.5.1) that they should not
respect both (as they are a replaced element). Using a positioned outer div,
and then putting the iframe inside that with width and height 100% should
work, I think.

Your page is giving me a 404 error now though, so I cannot check it for
myself, but I suggest you use this nested div approach.

From	Teet Kalm
To	Me
Subject	Re: How to create frames-like page using CSS?
Date	15 October 2006 22:26

> I recommend that instead, you use two divs, one inside the other.

I think i tried it before. Now i got it working. Before Firefox and Opera
refused for me to show content scrollbar. To get all separate versions
(frames etc) work at the same time on same CSS-file, there may slip in
syntax errors.

> Note also that when it comes to iframes, they also should not recognise
> both left and right at the same time in standards compliant browsers

Thank you for explaining CSS spec for position:absolute. Although this
example worked without "width:100%" well as in frames as on div-content, it
is better to use valid rules.

> Your page is giving me a 404 error now though

Sorry, there was one extra "a" in last word of address. I did not validated
this address by clicking on it :( Right address were in my first letter, it
is:
[URL]

Main window points to different versions of this page. For now, it matters
only last link, "Double DIV & Width=100%". It is easy to return to main page
by simply clicking on main logo of subpage. And as i noticed in first
letter, there opens longer article under menuitem "uudised", which brings
scrollbar in sight.

However, there is still problem with scrollbar/height in IE.

Feel free to copy this page and trick it, if You wish. I would be very
thankful for solution.

Regards,
Teet Kalm

From	Me
To	Teet Kalm
Subject	Re: How to create frames-like page using CSS?
Date	16 October 2006 09:47

Teet,

> However, there is still problem with scrollbar/height in IE.

You missed two of the things I said you needed to do :)

1. you need to use a DOCTYPE that triggers IE's strict mode. Right now, you
use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That triggers quirks mode. You need to use this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

2. In strict mode, the viewport scrollbar is controlled by the HTML element,
not the BODY element, so you will need to put this:

html { overflow: hidden; }

From	Teet Kalm
To	Me
Subject	Re: How to create frames-like page using CSS?
Date	16 October 2006 21:43

Thank you for the help. Now i got the page working in IE :) There was yet
one stupid error i made. This if-condition style-expression for IE,
height: expression( ( document.documentElement.clientHeight - 175 ) + 'px');
was designed for id #content, but i used in page a class for ".content".
After changing one char, my page started working in IE :) Working example is
available at [URL], if you're interested.

Thank you again. Now i understand better base rules to build web pages for.
And really, most simplest example based on "position:fixed", were really
elegant, in theory...

With best regards,
Teet Kalm.

From	Teet Kalm
To	Me
Subject	Adjusting banner flags to right in IE without table
Date	25 January 2007 22:22

Hello.
I have written here before. I have next problem, surprise! related with IE.
Best example is picture. Here's my example page:
[URL]
I want to use banner above of the page and order flags to right inside
banner-div-element. Naturally, this example works well in Firefox and Opera,
but not in IE. Can i "trick" somehow with HTML and avoid invisible table
containing two cells, one for banner image and second for flags, to get it
working with IE5/6?

With best regards,
Teet Kalm.

From	Me
To	Teet Kalm
Subject	Re: Adjusting banner flags to right in IE without table
Date	27 January 2007 11:11

Teet,

> I want to use banner above of the page and order flags to right inside
> banner-div-element

Instead of setting align="right" on the images, float their containing span
to the right:

.banner span { float: right; }


Tarquin

From	Teet Kalm
To	Me
Subject	Re: Adjusting banner flags to right in IE without table
Date	28 January 2007 21:52

Thank you very much! That is incredibly simple solution and leaves me
speechless, really!
Regards, Teet.

Teet Kalm

Navigation

Search

Site navigation

Email conversation