Re: using CSS instead of tables

dorayme wrote:

Here is one way that seems pleasant enough in all my browsers:

http://dorayme.890m.com/alt/twoBytwo.html

OK, the only thing that thios doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I'm certain that there are many things this does not do.

I'm sure you can, for example it doesn't make me breakfast, but I was
referring to the most obvious failing that was visible to me as far as
the effect I'm trying to obtain with CSS.

But instead or in addition, here is something and a bit more to tackle
some of your concerns:

http://dorayme.890m.com/alt/twoBytwo_faux.html

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Is there a way to ensure that both #nav and #content will always extend
to the bottom of the viewers screen? The obvious (to me) method is to
use a min-height on both that exceeds the pixel height of any display on
the market, but that seems clumsy and not very future proof.

Denis McMahon

In article <3MDek.75489$7v1.19745 (AT) newsfe30 (DOT) ams2>,
Denis McMahon <denis.mcmahon (AT) ntlworld (DOT) com> wrote:

dorayme wrote:

Here is one way that seems pleasant enough in all my browsers:

http://dorayme.890m.com/alt/twoBytwo.html

OK, the only thing that this doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I'm certain that there are many things this does not do.

... it doesn't make me breakfast, but I was
referring to the most obvious failing that was visible to me as far as
the effect I'm trying to obtain with CSS.

Yes, I know that was your primary concern and I was just saying that
there would be other effects you might understandably want that it does
not do.

You see, in these matters you can settle for a fully worked 'holy grail'
state of the art template without necessarily understanding what quite
is happening. You can get these from the work of clever and industrious
folk who have made their thinking available.

But it is hard for you to learn the ropes with one of these because even
if you study them and sort of see why they are so built at the time of
study, you can easily forget what everything is for later. And then it
will be hard to adapt it if you are not on top of things.

It also takes a lot of the fun out of having a go yourself if you rely
on fancy 'thought of most everything' templates. So I guess what I am
saying to you is, best for now to get something that you do understand
and is simple enough and does the job in hand.

But instead or in addition, here is something and a bit more to tackle
some of your concerns:

http://dorayme.890m.com/alt/twoBytwo_faux.html

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

--
dorayme

dorayme wrote:

http://dorayme.890m.com/alt/twoBytwo_faux.html

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I say "sort of" because the layout appears to work fine as far as
positioning and alignment is concerned, but I seem to be having a
background colour issue with this that I don't understand. Paragraphs in
div.footer within div.content don't seem to inherit the background of
div.content.

http://sined.servebeer.com/denis/css/footer_test.html

Amaya displays this as I expect it to, firefox 3 has the content
background finishing mid way down the footer para content, and ie 6 has
the content background finishing above the footer content (ie6 is the
latest version I have been able to install under linux with wine).

Incidentally, during this discussion I have also realised that my
thinking was being constrained by my table solution to the original
problem .... there's actually no reason that the #nav division should be
the same width as the logo image.

Denis McMahon

In article <ccFek.75497$7v1.13483 (AT) newsfe30 (DOT) ams2>,
Denis McMahon <denis.mcmahon (AT) ntlworld (DOT) com> wrote:

dorayme wrote:

http://dorayme.890m.com/alt/twoBytwo_faux.html

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

Well, I am not seeing such an effect even when the content contains
nothing at all or one word. So it would help to say what browser you are
using. Did you see the browsers I mentioned? Did you see your unwanted
effect in any of them on your machine? Perhaps I am getting a biased
view from my Mac browsers? Are you just going to the URL online or are
you reproducing it somehow on your local machine. If so, make sure you
download the crucial background image (a 1 x 1px purply gif)

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

An issue does not have to be great for it to be interesting to solve.
Nor is it unreasonable for you to want it. But you need to give details.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

....

http://sined.servebeer.com/denis/css/footer_test.html

....

Your url is showing a Not Found on my machine.

....

Incidentally, during this discussion I have also realised that my
thinking was being constrained by my table solution to the original
problem .... there's actually no reason that the #nav division should be
the same width as the logo image.

The image I put as an example is not the width of the nav column, take a
look. But I simply accepted you had a reason for wanting the space abobe
the nav col to be the same width as the nav column. Perhaps because you
wanted to put caption or other things or for other aesthetic purposes.
You can easily remove the appearance of a separate box top left by
changing the background colour of

#header {
....
background: #fcc;

to

#header {
....
background: #cfc;

at

<http://dorayme.890m.com/alt/twoBytwo_faux.html>

(I am getting the feeling you are looking with IE6? If so, if I have
time tomorrow, I will check with this browser, it is a big pita this
browser! <g>)

--
dorayme

In article <ccFek.75497$7v1.13483 (AT) newsfe30 (DOT) ams2>,
Denis McMahon <denis.mcmahon (AT) ntlworld (DOT) com> wrote:

dorayme wrote:

http://dorayme.890m.com/alt/twoBytwo_faux.html

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I modified something I've had around to make a footer as I imagine you
want (with floated list items):

<http://netweaver.com.au/alt/twoBytwo_faux_footer.html>

In Safari, there are no scrollbars vertical when "not needed" as one
would want. But in most other browsers there are and I have not quite
worked out why but I will look again harder!

You don't need to put in the star hack for IE6, you can use a
conditional to deliver a different style sheet for this instruction (I
left all styles in the head for your convenience).

Anyway, this page might be what you want? You can remove the header pic
and put your own in on the left as you want, you can stick text in the
header (in the markup you will see it there but commented out, you can
turn it back on)

--
dorayme

dorayme wrote:

In article <ccFek.75497$7v1.13483 (AT) newsfe30 (DOT) ams2>,
Denis McMahon <denis.mcmahon (AT) ntlworld (DOT) com> wrote:

dorayme wrote:

http://dorayme.890m.com/alt/twoBytwo_faux.html
Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.
Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.
That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I modified something I've had around to make a footer as I imagine you
want (with floated list items):

http://netweaver.com.au/alt/twoBytwo_faux_footer.html

In Safari, there are no scrollbars vertical when "not needed" as one
would want. But in most other browsers there are and I have not quite
worked out why but I will look again harder!

You don't need to put in the star hack for IE6, you can use a
conditional to deliver a different style sheet for this instruction (I
left all styles in the head for your convenience).

Anyway, this page might be what you want? You can remove the header pic
and put your own in on the left as you want, you can stick text in the
header (in the markup you will see it there but commented out, you can
turn it back on)

Thanks, it looks ideal. I'm still working my way through the css and
trying to understand the interactions and how it all goes together, but
I think it solves everything.

Thanks again

Denis McMahon (now puzzling over html 4.01, xhtml 1.0 and xhtml 1.1)

Denis McMahon wrote:

Denis McMahon (now puzzling over html 4.01, xhtml 1.0 and xhtml 1.1)

There is nothing to puzzle. If you want IE users on board html 4.01
strict. If you don't know the difference then there is nothing in xhtml
that you need.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

In article <Plrgk.26541$i37.17424 (AT) newsfe10 (DOT) ams2>,
Denis McMahon <denis.mcmahon (AT) ntlworld (DOT) com> wrote:

dorayme wrote:

http://netweaver.com.au/alt/twoBytwo_faux_footer.html


Thanks, it looks ideal. I'm still working my way through the css and
trying to understand the interactions and how it all goes together, but
I think it solves everything.

Thanks again

Hi Denis, subsequently I posted

<http://netweaver.com.au/alt/twoBytwo_faux_footer2.html>

where there is a way to be rid of pesky vert scrollbars on some browsers
when they are clearly not needed, (a min-height of 99.9% - rather than
100% - on one wrapper). I have still to look at this more closely. (Why
are there not more than 24 hrs in each day? <g>)

I think it is easy to adapt this to have the footer go the whole way
across if you ever want this.

--
dorayme