God I miss tables-help needed!

[Paul Watt]

Hi again,
Ok so I've got two new problems with this layout
http://www.paulwatt.info/test/turn/

1) When I increase the width of the Maincontent Div from 73% to 74% to line
it up with the right hand side of the page, the whole div drops to below the
level of the leftcell div. put it back to 73% and it goes back to its
correct posistion.

2) It looks fine in IE but a absolute dogs dinner in FF. whys this?

Thanks once again for all your help! This would be soooooo easy to do with
the good old <table> tag!

Paul

http://www.paulwatt.info

 

[GreyWyvern]

And lo, Paul Watt didst speak in
alt.html,alt.www.webmaster,comp.infosystems.www.authoring.stylesheets:

Hi again,
Ok so I've got two new problems with this layout
http://www.paulwatt.info/test/turn/

1) When I increase the width of the Maincontent Div from 73% to 74% to
line
it up with the right hand side of the page, the whole div drops to below
the
level of the leftcell div. put it back to 73% and it goes back to its
correct posistion.

2) It looks fine in IE but a absolute dogs dinner in FF. whys this?

Thanks once again for all your help! This would be soooooo easy to do
with the good old <table> tag!

Paul, you are taking the table-layout mode of thought and trying to force
it upon CSS and expecting it to comply. These blocks are still "cells" to
you, which is likely why you feel the need to over-specify properties on
them. Relax, and remember that the more CSS you have, the harder it is to
debug. Keep things simple, the default styles on the block elements you
are using already provide for most of what you are trying to do.

First, remove the width property from the .maincontent rule entirely.
<div>'s expand to fit all available horizontal space by default, so the
margin-left property is the only width-limiting style you require here.

To change how far the .maincontent div sits apart from the menu, just
change the value of the margin-left property. That's it.

Grey

 

[Richard]

Grey,

Am I correct in inferring from this thread that tables are being
superceded by divs for layout. Could you point me to some website(s)
that discuss this evolution?

Many thanks,
Richard

 

[Karl Groves]

Grey,

Am I correct in inferring from this thread that tables are being
superceded by divs for layout. Could you point me to some website(s)
that discuss this evolution?

http://w3.org



--
Karl Groves
http://karlcore.com
http://chevelle.karlcore.com

Accessibility Discussion List: http://smallerurl.com/?id=6p764du

 

[kchayka]

Hi again,
Ok so I've got two new problems with this layout

Why don't you go find yourself a nice CSS book? Need I mention that you
should read it, too?

While you're at it, get a few well-tested, ready-made templates to
study, and learn from them. You can start here:
<URL:http://css-discuss.incutio.com/>

And make use of google groups for the 1 thing it is good at: a
searchable archive of usenet posts. You aren't doing anything that
hasn't been done countless times before, you know.

Learn to help yourself first. Come here when you get stuck, but don't
come here first, eh? This isn't a help desk, you know.

 

[Nik Coughlin]

Grey,

Am I correct in inferring from this thread that tables are being
superceded by divs for layout. Could you point me to some website(s)
that discuss this evolution?

Many thanks,
Richard

Not so much replaced as divs as replaced by semantic markup with
presentation controlled with CSS.

A good place to start:
http://www.hotdesign.com/seybold/

Others:
http://alistapart.com/
http://benmeadowcroft.com/webdev/
http://csszengarden.com/
http://glish.com/css/
http://internalysis.com/css.html
http://mezzoblue.com/archives/css/
http://porjes.com/example_css.html
http://positioniseverything.net/
http://thenoodleincident.com/tutorials/css/index.html
http://tjkdesign.com/articles/
http://tobyinkster.co.uk/web
http://www.fu2k.org/alex/css/
http://www.spartanicus.utvinternet.ie/index.htm

 

[Tony]

Grey,

Am I correct in inferring from this thread that tables are being
superceded by divs for layout. Could you point me to some website(s)
that discuss this evolution?

I don't mean to sound rude, but you are WAY behind the times on this.

Study up on CSS - that will give you at least a basis to start from. The
tutorial at w3schools is a decent start.

 

[Richard]

Hi Karl,

http://w3.org

Good point. I found a good "con" article there. I'll look at the site
further.

Thanks for you guidance. I guess I could have thought of that myself,
but I wanted to see the best places to look.

Regards,
Richard

 

[Richard]

Hi Nik,

Not so much replaced as divs as replaced by semantic markup with

presentation controlled with CSS.

At first glance, it sounds like a good idea.

A good place to start:

http://www.hotdesign.com/seybold/

That was a good place to start! I get the idea now and follow their
guidelines to see how it turns out on stuff I'm working on now.

Others:

Thanks for the list. I'll take a look at them from time to time.

Regards,
Richard

 

[Schraalhans Keukenmeester]

I don't mean to sound rude, but you are WAY behind the times on this.

Study up on CSS - that will give you at least a basis to start from. The
tutorial at w3schools is a decent start.

I think you and many others are confusing content and markup.
If the data to be displayed is tabular, I'd choose tables over div,
simply coz' I want the page to be legible unstyled as well.
I never read the table tag is being deprecated or obsolete. But then
again, there's so many things I haven't read yet.

I'd advise to start a page design by properly choosing the right html
tags for the page elements. Then use CSS to make a nice(r) layout.
Add divs where needed, but at all cost avoid the omnipresent div soup.
Some folks just replaced all their former tag soup for a different soup
flavour.

If your page looks like faeces when viewed unstyled, there's a good
chance you have started the wrong way. And I am willing to admit I
created enough examples of 'the wrong way' myself.

Did I grasp correctly this is the point Richard was trying to make?

Sh.

 

[Richard]

Hi Tony,

I don't mean to sound rude, but you are WAY behind the times on this.

You got that right! I'm just starting to put up a technical
presentation on a web server, so I'm interested in applying the best
techniques while ensuring I get the job done in a timely fashion. So
I've employed some CSS stuff, some Table stuff, some site navigation.
And I've trolled Google Groups once in while to get current ideas about
this stuff. The idea in this thread, crudely stated, seemed to be
Tables:bad, CSS:good. I wanted to get some sense of this now, long
before I become a CSS guru. Hence my question, which elicited some
good ideas that I'll start applying pronto.

So, no offense taken ... because I surely am "WAY behind the times on
this".

Regards,
Richard

 

[Ed Jay]

Richard scribed:

Hi Tony,


You got that right! I'm just starting to put up a technical
presentation on a web server, so I'm interested in applying the best
techniques while ensuring I get the job done in a timely fashion. So
I've employed some CSS stuff, some Table stuff, some site navigation.
And I've trolled Google Groups once in while to get current ideas about
this stuff. The idea in this thread, crudely stated, seemed to be
Tables:bad, CSS:good.

No. Tables have their proper place...presenting tabular data.

 

[Richard]

Hi Schraalhans,

Did I grasp correctly this is the point Richard was trying to make?

You certainly did. Of all the responses I've gotten, Tony has been
closest to providing suggestions about sites relevant to my question,
which I'll be referencing from time to time to improve my practices.

I agree with your assessment that manure, no matter how decoratively
presented, still reeks. And with thoughless tagging leads to an
unmanageble mess.

Regards,
Richard

 

[Richard]

Hi Ed,

No. Tables have their proper place...presenting tabular data.

Right. I got this clearly spelled out in the first reference Tony
pointed me to.

Thanks,
Richard

 

[Nik Coughlin]

Hi Ed,


Right. I got this clearly spelled out in the first reference Tony
pointed me to.

Thanks,
Richard

Nik, Tony, it's all the same

 

[JDS]

2) It looks fine in IE but a absolute dogs dinner in FF. whys this?

I haven't looked yet. Here is a suggestion anyways, based on the fact
that in actuality, FF (and Opera, and, to some extent, Safari/Konqueror)
renders CSS much more "correctly" than MSIE.

When trying to develop a CSS layout, make it work in FF or other "good"
CSS browser FIRST. *Then* tweak it to make it look right in MSIE. This
will save you time and headaches, IMO. It is much easier to develop a CSS
layout when the CSS works in the browser as expected, and without CSS bugs
or unsupported CSS features.

 

[JDS]

You got that right! I'm just starting to put up a technical
presentation on a web server, so I'm interested in applying the best
techniques while ensuring I get the job done in a timely fashion. So
I've employed some CSS stuff, some Table stuff, some site navigation.

For layouts, use *either* CSS *OR* tables[1], but please not both. Unless
a table is being used as intended: for tabular data (and a lot of things
fall into that category).

In general, for a CSS layout, my "best practices" are as follows:

1) Start with a plain vanilla HTML 4.01 strict page which has absolutely
zero author-imposed layou or design characteristics. USE SEMANTICALLY
CORRECT HTML!! That is to say, a pargraph uses a <P> tag and a list of
items uses <UL> or <OL> and <LI> tags, etc. DO NOT USE <DIV>s FOR
EVERYTHIGN!!!!!!!!!!!!!!!!!!!!

2) Give classes and/or Id's to every element. Remeber, an element can
have more than one class. Also, each ID must be unique!

3) Take an image of what you want the layout to look like and start
applying CSS layout rules. This last bit is the tricky part, of course.
Also, you can start to add a smattering of <DIV>s here and there to force
the layout how you want it. But use pure <DIV>s sparingly!!

Why the warnings against DIVs? A <DIV> has no real semantic meaning and
using only <DIV>s will create a (valid, yes) HTML page that is not search
optimizable, not "508" accessible, and ultimately not as flexible as one
that uses "proper" HTML markup as HTML was intended to be used.

later...




[1] Some will say "never use tables anymore for layout" but I don't
completely agree, for a few reasons. For myself, though, I have stopped
using tables for layout.

 

[axlq]

Richard wrote:
A good place to start:
http://www.hotdesign.com/seybold/

You're right, that's nice. They don't take the hard-line religious
viewpoint that all layout MUST be done in CSS. They do agree that
tables have uses in layout.

I do disagree with their recommendation to eliminate <b> and replace
it with <strong> -- why waste the extra bytes?

One thing I've discovered that forces me into a table layout is
the fact that I have tabular data to display within the layout. I
learned that if I use CSS layout and then try to display a table,
the CSS box boundaries don't necessarily follow or contain the
table boundaries -- especially if the table uses % widths. Or I
get nonsensical repositioning of my CSS elements that contain the
table. And the behavior isn't consistent across browsers. This
is unacceptable. Using a simple 2-column table for layout allows
me to display actual tabular data in each column without blowing
the box boundaries, and I use CSS for controlling the appearance of
everything else.

-A

 

[Tony]

Hi Tony,



You got that right! I'm just starting to put up a technical
presentation on a web server, so I'm interested in applying the best
techniques while ensuring I get the job done in a timely fashion. So
I've employed some CSS stuff, some Table stuff, some site navigation.
And I've trolled Google Groups once in while to get current ideas about
this stuff. The idea in this thread, crudely stated, seemed to be
Tables:bad, CSS:good. I wanted to get some sense of this now, long
before I become a CSS guru. Hence my question, which elicited some
good ideas that I'll start applying pronto.

Good way to approach it.

I think that, as you apply more CSS and move away from tables, you will
find that CSS provides greater flexibility in many ways, and is actually
far more powerful for rendering a solidly designed site - once you know
your way around it.

And I'll freely admit that there are still times that I find a simple
table works better to accomplish my design goals. I do try to stay away
from that, but you work with what you're given

So, no offense taken ... because I surely am "WAY behind the times on
this".

I appreciate that you took my comment as intended. Good luck with your
learning!

 

[Tony]

Nik, Tony, it's all the same

I should probably stop talking to myself, then