Beginners woes with cross-browser CSS

[Marian Aldenhövel]

Hi,

I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).

However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...

I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.

What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.

I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.

http://www.marian-aldenhoevel.de/css/

Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).

My problems in particular are:

- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?

- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?

Pointers to any recommended reading on the web are also
appreciated.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Els]

Marian Aldenhövel wrote:

Hi,

I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).

However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...

I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.

What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.
It looks like it works in Firefox, but consider this:
you have the left bar 'clipped'. This means that anything
there which might be higher than the user's window won't be
accessible. If you make it not clipped, i.e. visible, the
same will happen as is happening already in IE: Make your
window small enough to get a scrollbar on the right, then
scroll: the footer will go up with the scrollbar, making one
ugly page.

There recently was a thread about footers at the bottom of
the window instead of the page. I suggest you read that
thread before you decide to stick with this layout you're
working on.
http://www.google.com/gr************...ing.google.com

Then, here's a link about how to get a 3 column layout with
a footer at the bottom of the _page_:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
also:
http://www.positioniseverything.net/piefecta-rigid.html
I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.

http://www.marian-aldenhoevel.de/css/

Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
It's in my brain now too ;-)
My problems in particular are:

- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?
IE does have a problem with four corners absolute positioning.
- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?
img{float:left;}
#page-header{text-align:center;line-height:3.7em;}
I put 3.7em there, while it should really be the height of
the div, but you should think about people enlarging the
font, and the line-height _and_ the div should resize
accordingly.
Pointers to any recommended reading on the web are also
appreciated.

Too much to choose from ;-)
http://locusmeus.com/list.html
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

Hi,

I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).

However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...

I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.

What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.
It looks like it works in Firefox, but consider this:
you have the left bar 'clipped'. This means that anything
there which might be higher than the user's window won't be
accessible. If you make it not clipped, i.e. visible, the
same will happen as is happening already in IE: Make your
window small enough to get a scrollbar on the right, then
scroll: the footer will go up with the scrollbar, making one
ugly page.

There recently was a thread about footers at the bottom of
the window instead of the page. I suggest you read that
thread before you decide to stick with this layout you're
working on.
http://www.google.com/gr************...ing.google.com

Then, here's a link about how to get a 3 column layout with
a footer at the bottom of the _page_:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
also:
http://www.positioniseverything.net/piefecta-rigid.html
I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.

http://www.marian-aldenhoevel.de/css/

Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
It's in my brain now too ;-)
My problems in particular are:

- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?
IE does have a problem with four corners absolute positioning.
- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?
img{float:left;}
#page-header{text-align:center;line-height:3.7em;}
I put 3.7em there, while it should really be the height of
the div, but you should think about people enlarging the
font, and the line-height _and_ the div should resize
accordingly.
Pointers to any recommended reading on the web are also
appreciated.

Too much to choose from ;-)
http://locusmeus.com/list.html
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Marian Aldenhövel]

Hi,

It looks like it works in Firefox, but consider this:
you have the left bar 'clipped'. This means that anything there which
might be higher than the user's window won't be accessible.
That would be acceptable in my case as the left bar will host a
menu of at most a handful of items. "Intended usage" is to run
the browser window maximized so I don't think that would be much
of a problem. Should it turn out to be, I could always add
an optional scrollbar to the menu, couldn't I?

The application I am building targets a controlled audience of
franchise partners, so I can make some assumptions. But to learn
the stuff properly I'd rather not.
If you make it not clipped, i.e. visible, the same will happen as is
happening already in IE: Make your window small enough to get a
scrollbar on the right, then scroll: the footer will go up with the
scrollbar, making one ugly page.
Ah, I see what you mean.

The main problem on IE that I am struggling with at the time is
not the scrollbar on the browser-window, though. It is the fact
that the main content does not display at all while the bars on
the left and right do not extend to the full height of the
window.

Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).

It's in my brain now too ;-)

They fade, trust me.
#page-header{text-align:center;line-height:3.7em;}

Ah. line-height. Never thought of that.

Pointers to any recommended reading on the web are also
appreciated.

Too much to choose from ;-)
http://locusmeus.com/list.html

In addition to the pile of dead trees here this will keep me
busy for a few weeks. Thank you very much.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

It looks like it works in Firefox, but consider this:
you have the left bar 'clipped'. This means that anything there which
might be higher than the user's window won't be accessible.
That would be acceptable in my case as the left bar will host a
menu of at most a handful of items. "Intended usage" is to run
the browser window maximized so I don't think that would be much
of a problem. Should it turn out to be, I could always add
an optional scrollbar to the menu, couldn't I?

The application I am building targets a controlled audience of
franchise partners, so I can make some assumptions. But to learn
the stuff properly I'd rather not.
If you make it not clipped, i.e. visible, the same will happen as is
happening already in IE: Make your window small enough to get a
scrollbar on the right, then scroll: the footer will go up with the
scrollbar, making one ugly page.
Ah, I see what you mean.

The main problem on IE that I am struggling with at the time is
not the scrollbar on the browser-window, though. It is the fact
that the main content does not display at all while the bars on
the left and right do not extend to the full height of the
window.

Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).

It's in my brain now too ;-)

They fade, trust me.
#page-header{text-align:center;line-height:3.7em;}

Ah. line-height. Never thought of that.

Pointers to any recommended reading on the web are also
appreciated.

Too much to choose from ;-)
http://locusmeus.com/list.html

In addition to the pile of dead trees here this will keep me
busy for a few weeks. Thank you very much.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Els]

Marian Aldenhövel wrote:

pile of dead trees here
Huh?
Thank you very much.

You're welcome.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

pile of dead trees here
Huh?
Thank you very much.

You're welcome.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

[http://www.marian-aldenhoevel.de/css/]

The main problem on IE that I am struggling with at the time is
not the scrollbar on the browser-window, though. It is the fact
that the main content does not display at all while the bars on
the left and right do not extend to the full height of the
window.

Haven't figured it out completely, but the #page-content has
the overflow property set to hidden, if you change this to
visible, you'll see that there is some content, but the div
#page-content doesn't have any height, so with
overflow:hidden, you don't see what's in it.
Also, you have various div's with position:absolute inside
other divs which also have position:absolute.
From experience I know that doesn't work out right
(cross-browser wise).
Especially Opera 6 has problems with that.
http://locusmeus.com/temp/Marian.png

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

[http://www.marian-aldenhoevel.de/css/]

The main problem on IE that I am struggling with at the time is
not the scrollbar on the browser-window, though. It is the fact
that the main content does not display at all while the bars on
the left and right do not extend to the full height of the
window.

Haven't figured it out completely, but the #page-content has
the overflow property set to hidden, if you change this to
visible, you'll see that there is some content, but the div
#page-content doesn't have any height, so with
overflow:hidden, you don't see what's in it.
Also, you have various div's with position:absolute inside
other divs which also have position:absolute.
From experience I know that doesn't work out right
(cross-browser wise).
Especially Opera 6 has problems with that.
http://locusmeus.com/temp/Marian.png

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Marian Aldenhövel]

Hi,

pile of dead trees here

Books printed on actual paper. Good for reading where no
computers are allowed, like in the bath or when on holiday
with the wife.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

pile of dead trees here

Books printed on actual paper. Good for reading where no
computers are allowed, like in the bath or when on holiday
with the wife.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

the div #page-content doesn't have any height, so with overflow:hidden,
you don't see what's in it.
I still don't get it.

First of all: _Why_ doesn't it have any height? I specified a position
with four numbers and from that a height should follow. OK, this
propably has something to do with the
IE does have a problem with four corners absolute positioning.
you mentioned.

But the other thing bothers me more:

If I put "overflow: visible" I can see my content, complete with the
background-colors. I assigned the colors to the <div>-elements. So what
I am seeing is the size of the <div>s.

If I put "overflow: hidden" there is nothing.

I thought that "overflow:" specifies what is to happen to content that
overflows the space given. So changing it should not change the size
of that space, and only affect the parts that do not fit.

What I am seeing in IE is that the value of "overflow:" makes a big
difference in the size of the <div>-elements. Either it's zero or
"just big enough".

Quantum Stylesheets, I might say. Looks like there is a lot more
to learn here.
Also, you have various div's with position:absolute inside other divs
which also have position:absolute.
From experience I know that doesn't work out right (cross-browser
wise).
Especially Opera 6 has problems with that.

Hmpf. I tried Opera 7, it works there.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

the div #page-content doesn't have any height, so with overflow:hidden,
you don't see what's in it.
I still don't get it.

First of all: _Why_ doesn't it have any height? I specified a position
with four numbers and from that a height should follow. OK, this
propably has something to do with the
IE does have a problem with four corners absolute positioning.
you mentioned.

But the other thing bothers me more:

If I put "overflow: visible" I can see my content, complete with the
background-colors. I assigned the colors to the <div>-elements. So what
I am seeing is the size of the <div>s.

If I put "overflow: hidden" there is nothing.

I thought that "overflow:" specifies what is to happen to content that
overflows the space given. So changing it should not change the size
of that space, and only affect the parts that do not fit.

What I am seeing in IE is that the value of "overflow:" makes a big
difference in the size of the <div>-elements. Either it's zero or
"just big enough".

Quantum Stylesheets, I might say. Looks like there is a lot more
to learn here.
Also, you have various div's with position:absolute inside other divs
which also have position:absolute.
From experience I know that doesn't work out right (cross-browser
wise).
Especially Opera 6 has problems with that.

Hmpf. I tried Opera 7, it works there.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Andrew Thompson]

On Sun, 25 Apr 2004 14:08:41 +0200, Marian Aldenhövel wrote:

pile of dead trees here

Books printed on actual paper.

Those 'Tree Spirits' will come back to haunt you..
...Good for reading where no
computers are allowed, like in the bath...
They are getting pretty good at making
electric kiddy toys that are water-immersible.
...or when on holiday
with the wife.

What, she does not even have a lap-top?

Divorce her _immediately_! ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Andrew Thompson]

On Sun, 25 Apr 2004 14:08:41 +0200, Marian Aldenhövel wrote:

pile of dead trees here

Books printed on actual paper.

Those 'Tree Spirits' will come back to haunt you..
...Good for reading where no
computers are allowed, like in the bath...
They are getting pretty good at making
electric kiddy toys that are water-immersible.
...or when on holiday
with the wife.

What, she does not even have a lap-top?

Divorce her _immediately_! ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Els]

Marian Aldenhövel wrote:

First of all: _Why_ doesn't it have any height? I specified a position
with four numbers and from that a height should follow. OK, this
propably has something to do with the

> IE does have a problem with four corners absolute positioning.
you mentioned.

Yep.
But the other thing bothers me more:

If I put "overflow: visible" I can see my content, complete with the
background-colors. I assigned the colors to the <div>-elements. So what
I am seeing is the size of the <div>s.
The divs #content-header, #content-body and #content-footer.
Not #page-content.
If I put "overflow: hidden" there is nothing.
Correct. Cause where there is no box, there can't be
anything in it.
I thought that "overflow:" specifies what is to happen to content that
overflows the space given. So changing it should not change the size
of that space, and only affect the parts that do not fit.
True. The box has a height of 0. So _everything_ in it is
affected, as _nothing_ fits inside 0px width/height.
What I am seeing in IE is that the value of "overflow:" makes a big
difference in the size of the <div>-elements. Either it's zero or
"just big enough".
No, when you use overflow:visible, you see the contents,
which are _all_ outside the box (#page-content).
#page-content doesn't get any bigger because of
overflow:visible. It just shows the overflow, which
overflowed, outside the box.

Tip: When you are writing your CSS, use
*{border:1px solid red;} temporarily on the first line. You
will see exactly where all the boxes are while you're coding.
Quantum Stylesheets, I might say. Looks like there is a lot more
to learn here.

Welcome to CSS ;-)

> Also, you have various div's with position:absolute inside other divs
> which also have position:absolute.
> From experience I know that doesn't work out right (cross-browser
> wise).
> Especially Opera 6 has problems with that.

Hmpf. I tried Opera 7, it works there.

Are you designing for Opera 7? Or do you want cross-browser
design as your subject line states?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

First of all: _Why_ doesn't it have any height? I specified a position
with four numbers and from that a height should follow. OK, this
propably has something to do with the

> IE does have a problem with four corners absolute positioning.
you mentioned.

Yep.
But the other thing bothers me more:

If I put "overflow: visible" I can see my content, complete with the
background-colors. I assigned the colors to the <div>-elements. So what
I am seeing is the size of the <div>s.
The divs #content-header, #content-body and #content-footer.
Not #page-content.
If I put "overflow: hidden" there is nothing.
Correct. Cause where there is no box, there can't be
anything in it.
I thought that "overflow:" specifies what is to happen to content that
overflows the space given. So changing it should not change the size
of that space, and only affect the parts that do not fit.
True. The box has a height of 0. So _everything_ in it is
affected, as _nothing_ fits inside 0px width/height.
What I am seeing in IE is that the value of "overflow:" makes a big
difference in the size of the <div>-elements. Either it's zero or
"just big enough".
No, when you use overflow:visible, you see the contents,
which are _all_ outside the box (#page-content).
#page-content doesn't get any bigger because of
overflow:visible. It just shows the overflow, which
overflowed, outside the box.

Tip: When you are writing your CSS, use
*{border:1px solid red;} temporarily on the first line. You
will see exactly where all the boxes are while you're coding.
Quantum Stylesheets, I might say. Looks like there is a lot more
to learn here.

Welcome to CSS ;-)

> Also, you have various div's with position:absolute inside other divs
> which also have position:absolute.
> From experience I know that doesn't work out right (cross-browser
> wise).
> Especially Opera 6 has problems with that.

Hmpf. I tried Opera 7, it works there.

Are you designing for Opera 7? Or do you want cross-browser
design as your subject line states?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Beauregard T. Shagnasty]

Quoth the raven named Marian Aldenhövel:

... "Intended usage" is to run the browser window maximized so I
don't think that would be much of a problem.
As you have no control over the visitor's viewport size, you should
not consider this.

http://www.allmyfaqs.com/faq.pl?AnySizeDesign
Should it turn out to be, I could always add an optional scrollbar
to the menu, couldn't I?

If your menu does not have a fixed height, no scrollbar is needed. Be
sure to test this by changing the font size in your browser.

--
-bts
-This space intentionally left blank.

[Beauregard T. Shagnasty]

Quoth the raven named Marian Aldenhövel:

... "Intended usage" is to run the browser window maximized so I
don't think that would be much of a problem.
As you have no control over the visitor's viewport size, you should
not consider this.

http://www.allmyfaqs.com/faq.pl?AnySizeDesign
Should it turn out to be, I could always add an optional scrollbar
to the menu, couldn't I?

If your menu does not have a fixed height, no scrollbar is needed. Be
sure to test this by changing the font size in your browser.

--
-bts
-This space intentionally left blank.

[Marian Aldenhövel]

Hi,

The divs #content-header, #content-body and #content-footer.
Not #page-content.
Ah. Will play with that.
Tip: When you are writing your CSS, use
*{border:1px solid red;} temporarily on the first line.
I "invented" that trick independently myself when playing around
with the header-div. Now I will apply it to the main pane.

Thank you.
Are you designing for Opera 7?
Not really. I just happened to have Opera7, IE 6 and Firefox
installed on this here system.
Or do you want cross-browser design as your subject line
states?

In theory yes, in practice I will propably restrict myself to
some random selection. I actually have to conflicting goals:
One is to build my application, which I have enough time to do,
and the other is to learn, understand and apply CSS.

The "hmpf" was not meant as "I do not care for Opera 6"
but as "I tried Opera, what a pity it was the wrong version".

Thank you all for your help.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

The divs #content-header, #content-body and #content-footer.
Not #page-content.
Ah. Will play with that.
Tip: When you are writing your CSS, use
*{border:1px solid red;} temporarily on the first line.
I "invented" that trick independently myself when playing around
with the header-div. Now I will apply it to the main pane.

Thank you.
Are you designing for Opera 7?
Not really. I just happened to have Opera7, IE 6 and Firefox
installed on this here system.
Or do you want cross-browser design as your subject line
states?

In theory yes, in practice I will propably restrict myself to
some random selection. I actually have to conflicting goals:
One is to build my application, which I have enough time to do,
and the other is to learn, understand and apply CSS.

The "hmpf" was not meant as "I do not care for Opera 6"
but as "I tried Opera, what a pity it was the wrong version".

Thank you all for your help.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

... "Intended usage" is to run the browser window maximized so I don't
think that would be much of a problem.

As you have no control over the visitor's viewport size, you should not
consider this.

I was not at all planning to design for a specific pixel-size. What I
really meant to say was that I am quite confident that the menu will
fit.

In extreme cases that assumption may fail but then the application will
be unusable anyway. The menu will be the last to go. Plus I am not
adressing the general public so I am not turning away unknown users
but will hear from those that cannot use it properly.

Should it turn out to be, I could always add an optional scrollbar
to the menu, couldn't I?

If your menu does not have a fixed height, no scrollbar is needed.

The content inside the menu does not have a fixed height. It changes
with context. The menubar I was planning to display is also not
fixed in size, I wanted to have it grow and shrink in size with the
viewport.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

... "Intended usage" is to run the browser window maximized so I don't
think that would be much of a problem.

As you have no control over the visitor's viewport size, you should not
consider this.

I was not at all planning to design for a specific pixel-size. What I
really meant to say was that I am quite confident that the menu will
fit.

In extreme cases that assumption may fail but then the application will
be unusable anyway. The menu will be the last to go. Plus I am not
adressing the general public so I am not turning away unknown users
but will hear from those that cannot use it properly.

Should it turn out to be, I could always add an optional scrollbar
to the menu, couldn't I?

If your menu does not have a fixed height, no scrollbar is needed.

The content inside the menu does not have a fixed height. It changes
with context. The menubar I was planning to display is also not
fixed in size, I wanted to have it grow and shrink in size with the
viewport.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Marian Aldenhövel]

Hi,

There recently was a thread about footers at the bottom of the window
instead of the page. I suggest you read that thread before you decide to
stick with this layout you're working on.
http://www.google.com/gr************...ing.google.com
I have read that thread now and followed some of the links mentioned
there. While I did not understand everything I stumbled over Steve Pughs
posting that says:
Heights in CSS don't work like that. There is no way of saying
height: "everything that's left".

Is that entirely true? All the documentation I have read so far
leads me to believe that specifying "position: absolute", and
the left, top, right and height properties will give me just that:
A box that keeps a fixed distance from it's absolute ancestor on
the left, right and top, making it stretch to cover the remaining
space horizontally.

The way Opera7 and Firefox render what I wrote seems to support
that understanding. The fact does IE renders it completely different
may rightly be called a bug then?

Unfortunately I can not really ban IE :-).

Suppose for a moment that I am not yet ready to let go of my planned
design. I can still build it with tables, or maybe even Frames (yuk):

http://www.marian-aldenhoevel.de/css/test_tables.html

(No Stylesheet yet)

Is there a way to integrate the three-part on-demand-scrolling
center pane from

http://www.marian-aldenhoevel.de/css/test.html

in there?

I could not make the <div id="page-content"> or any of the content-*
divs position in relation to the <TD> that I would have to stuff
them in.

Thank you for your patience.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Els]

Marian Aldenhövel wrote:

Hi,

There recently was a thread about footers at the bottom of the window
instead of the page. I suggest you read that thread before you decide
to stick with this layout you're working on.
http://www.google.com/gr************...ing.google.com
I have read that thread now and followed some of the links mentioned
there. While I did not understand everything I stumbled over Steve Pughs
posting that says:

> Heights in CSS don't work like that. There is no way of saying
> height: "everything that's left".

Is that entirely true? All the documentation I have read so far
leads me to believe that specifying "position: absolute", and
the left, top, right and height properties will give me just that:
A box that keeps a fixed distance from it's absolute ancestor on
the left, right and top, making it stretch to cover the remaining
space horizontally.

Even if that would work: there still is no way of saying
"height:'everything that's left'". Only with frames. (forget
I said that ;-) )
The way Opera7 and Firefox render what I wrote seems to support
that understanding. The fact does IE renders it completely different
may rightly be called a bug then?
I wouldn't call it a bug, I think it's called 'not standards
compliant' or something.
Unfortunately I can not really ban IE :-).

Suppose for a moment that I am not yet ready to let go of my planned
design. I can still build it with tables, or maybe even Frames (yuk):

http://www.marian-aldenhoevel.de/css/test_tables.html

(No Stylesheet yet)

Is there a way to integrate the three-part on-demand-scrolling
center pane from

http://www.marian-aldenhoevel.de/css/test.html

in there?
Don't know, really.
If you give the div inside that td 100% height, it gives a
scrollbar in IE, but not in NS7.1. (well, it does, but not
on the div, only on the window)
If you give it less than 100%, let's say 90%, it gives
double scrollbars in NS7.1. (99% does the same as 100%)
I could not make the <div id="page-content"> or any of the content-*
divs position in relation to the <TD> that I would have to stuff
them in.

I think table-based layouts use nested tables, not divs
inside td's?

Maybe someone else knows how to do it, or even if it's
possible, as I'm not a table-design-wizard.. (nor any kind
of wizard, but table-based layout was before my time ;-) )

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Marian Aldenhövel wrote:

The "hmpf" was not meant as "I do not care for Opera 6"
but as "I tried Opera, what a pity it was the wrong version".

I thought it might mean something like that.
I think the local expression for it is grmbl ;-)

Btw, Opera 7 isn't the wrong version. Most Opera users
upgrade regularly. It's just that Mac users don't have a
version 7 yet :-(

(correct me if I'm wrong, anyone)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Marian Aldenhövel]

Hi,

I think table-based layouts use nested tables, not divs inside td's?

I think so too. But after all I was setting out to use CSS...

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Els]

Marian Aldenhövel wrote:

Hi,

I think table-based layouts use nested tables, not divs inside td's?

I think so too. But after all I was setting out to use CSS...

CSS is best for flexible design, don't use absolute
pixel-positioning. It is normal to have the footer below the
bottom of the window if the page is long, or way above the
bottom of the window if the page is short.
Well, you know that, you've read the thread :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Spartanicus]

Els <el*********@tiscali.nl> wrote:

It's just that Mac users don't have a
version 7 yet :-(

(correct me if I'm wrong, anyone)

There's one coming (7.5), currently available as a beta.

--
Spartanicus

[Els]

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:

It's just that Mac users don't have a
version 7 yet :-(

(correct me if I'm wrong, anyone)

There's one coming (7.5), currently available as a beta.

Can it be used on older Mac OS's too? (I have no idea about
compatibility of browsers on Macs)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Spartanicus]

Els <el*********@tiscali.nl> wrote:

It's just that Mac users don't have a
version 7 yet :-(

(correct me if I'm wrong, anyone)

There's one coming (7.5), currently available as a beta.

Can it be used on older Mac OS's too? (I have no idea about
compatibility of browsers on Macs)

Neither do I, but I've no reason to assume that it doesn't.

--
Spartanicus

[Marian Aldenhövel]

Hi,

CSS is best for flexible design, don't use absolute pixel-positioning.

I guess this is where I was misled.

I was under the impression that CSS would be - among other good
things - a replacement for the table-based layout. Leaving tables
for tabular data while still allowing for pixelwise positioning.

But it's not so much the pixel-accuracy that I am after, I do
not really care wether an element is 25, 30 or 60 pixels in any
dimension. What makes me unhappy is the fact that my design
obviously cannot reliably be implemented at all although it
does not at all feel unreasonable to me.

What makes me even more unhappy is that it seemed to work out
OK in two of the three browsers I tried. _And_ it was easy and
fun composing it. _And_ the code looked good to me. But then
it failed miserably on the third browser of the lot. Unfortunately
the most important one.

Right now I feel I will have to go tables and use CSS "only" to
concentrate things like fonts and colors in a single place. That's
an improvement over the old ways, no doubt. But not what I had
hoped for.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long

[Els]

Marian Aldenhövel wrote:

Hi,

CSS is best for flexible design, don't use absolute pixel-positioning.
I guess this is where I was misled.

I was under the impression that CSS would be - among other good
things - a replacement for the table-based layout. Leaving tables
for tabular data while still allowing for pixelwise positioning.

But it's not so much the pixel-accuracy that I am after, I do
not really care wether an element is 25, 30 or 60 pixels in any
dimension. What makes me unhappy is the fact that my design
obviously cannot reliably be implemented at all although it
does not at all feel unreasonable to me.

Only unreasonable part imho is the footer not going below
the bottom of the window. The rest looked clearly possible
to me.
What makes me even more unhappy is that it seemed to work out
OK in two of the three browsers I tried. _And_ it was easy and
fun composing it. _And_ the code looked good to me. But then
it failed miserably on the third browser of the lot. Unfortunately
the most important one.
Yep :-(
Right now I feel I will have to go tables and use CSS "only" to
concentrate things like fonts and colors in a single place. That's
an improvement over the old ways, no doubt. But not what I had
hoped for.

An improvement, maybe, but I'd say you can get much more out
of this, if you _only_ accept the bottom of the page being
below the viewport and accessible by scrolling the entire page.

Is that really a bad option for you? Given the fact that
even with table-based layout you might not be able to
achieve cross-browser what you want (scrollable middle part)?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Rijk van Geijtenbeek]

On Mon, 26 Apr 2004 09:37:40 +0100, Spartanicus <[e-mail]> wrote:

Els <el*********@tiscali.nl> wrote:

It's just that Mac users don't have a
version 7 yet :-(

(correct me if I'm wrong, anyone)

There's one coming (7.5), currently available as a beta.

Can it be used on older Mac OS's too? (I have no idea about
compatibility of browsers on Macs)

Neither do I, but I've no reason to assume that it doesn't.

Opera 7.5 for Mac requires OS X 10.1 or later. There are currently no
plans to port to MacOS 9.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

[Marian Aldenhövel]

Hi,

An improvement, maybe, but I'd say you can get much more out of this, if
you _only_ accept the bottom of the page being below the viewport and
accessible by scrolling the entire page.

Is that really a bad option for you?

Absolutely not. I will try to make that work, even if it's just to
convince myself that I can do it.

Whether I will be using it in my application I am not yet sure.

Ciao, MM
--
Marian Aldenhövel, Rosenhain 23, 53123 Bonn.
Fon [phone], Fax [phone].
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long