PING CatNipped or other web gurus

Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

Here's my problem: a situation in which maybe (maybe?) tables are
necessary?

The effect I want is to have a form with two columns. The left will
all be labels for the right column, which will contain text fields.

I spent a good long while struggling for this effect using
stylesheets. I tried two separate DIVs and was able to produce
columns, but the labels didn't line up with the forms, even when I set
the input font to the same as the label font. So yes, I had two areas
next to one another, but they weren't proper columns in that line one
of the left "column" might not line up with line one of the right
"column."

I'm starting to think that in this case, tables are okay. But can I
get some confirmation? Or is this still wrong?

Assuming that tables are acceptable, my other problem is that one of the
text entries is actually a big long Textarea. So the label (which is in
the same TR as the Textarea) wants to go smack dab in the middle, and I
want it to align with the top of the Textarea. I've tried various CSS
properties on the TD element, but the only thing that's worked so far is
explicitly setting TD valign='top'. This irks me, as I want to rely
on stylesheets for formatting. Any suggestions on how to use a
style property to make the TD do my bidding?

I'm hung up on being standards-compliant, so if it only works in IE,
it's not much of a solution for me. I've already had to use some
javascript because IE doesn't respect hover on buttons. Grr!

--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

Monique Y. Mudama wrote:
Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

Here's my problem: a situation in which maybe (maybe?) tables are
necessary?

The effect I want is to have a form with two columns. The left will
all be labels for the right column, which will contain text fields.

I spent a good long while struggling for this effect using
stylesheets. I tried two separate DIVs and was able to produce
columns, but the labels didn't line up with the forms, even when I set
the input font to the same as the label font. So yes, I had two areas
next to one another, but they weren't proper columns in that line one
of the left "column" might not line up with line one of the right
"column."

I'm starting to think that in this case, tables are okay. But can I
get some confirmation? Or is this still wrong?


OK, I ain't no guru, I'm a learner at CSS too, so I could be about to
suggest a load of rubbish. But I find having a go at other peoples'
problems is a great way to learn stuff I wouldn't have tried otherwise
myself, and I'm sure someone more knowledgeable will critique my
approach and suggest more efficient ways.

I'd try using one DIV for the label a second for the text field, and
enclosing both of those in a third to keep the two grouped together.
Something like this:

DIV class=formitem
DIV class=label your label here/DIV
DIV class=response your text box here /DIV
/DIV

DIV class=formitem
DIV class=label your next label here/DIV
DIV class=response your next text box here /DIV
/DIV

etc

and your stylesheet entries would look something like:

DIV.formitem {float: none}

DIV.formitem DIV.label {float: left;
width: 25%;
text-align: right;
vertical-align: top}

DIV.formitem DIV.response {text-align: left;
vertical-align: top}


Blind leading the blind here though. We may not know where we're going,
but it'll be interesting there.




Assuming that tables are acceptable, my other problem is that one of the
text entries is actually a big long Textarea. So the label (which is in
the same TR as the Textarea) wants to go smack dab in the middle, and I
want it to align with the top of the Textarea. I've tried various CSS
properties on the TD element, but the only thing that's worked so far is
explicitly setting TD valign='top'. This irks me, as I want to rely
on stylesheets for formatting. Any suggestions on how to use a
style property to make the TD do my bidding?

I'm hung up on being standards-compliant, so if it only works in IE,
it's not much of a solution for me. I've already had to use some
javascript because IE doesn't respect hover on buttons. Grr!

"Monique Y. Mudama" wrote in message
...
Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

OK, I'll admit my web design skills are rusty, but I never learned that
tables are bad. Most of the websites I designed I used tables. They are
cross-browser compatible, and to me at least, there's no guesswork as to how
it's going to look.

What software are you using? If it's Dreamweaver, which is what I use(d)
and like, try the macromedia.dreamweaver group. They are usually pretty
helpful.

Honestly, if it were me, I would just use a table and use the CSS for the
font, color, etc. In Dreamweaver, you can make a template and then have all
pages of your site use the template in order to keep style consistent.

Disclaimer: My skills are a couple years old and I'm not all that advanced.

-Kelly

"Monique Y. Mudama" wrote in message
...
Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

Here's my problem: a situation in which maybe (maybe?) tables are
necessary?

The effect I want is to have a form with two columns. The left will
all be labels for the right column, which will contain text fields.

I spent a good long while struggling for this effect using
stylesheets. I tried two separate DIVs and was able to produce
columns, but the labels didn't line up with the forms, even when I set
the input font to the same as the label font. So yes, I had two areas
next to one another, but they weren't proper columns in that line one
of the left "column" might not line up with line one of the right
"column."

I'm starting to think that in this case, tables are okay. But can I
get some confirmation? Or is this still wrong?

Assuming that tables are acceptable, my other problem is that one of the
text entries is actually a big long Textarea. So the label (which is in
the same TR as the Textarea) wants to go smack dab in the middle, and I
want it to align with the top of the Textarea. I've tried various CSS
properties on the TD element, but the only thing that's worked so far is
explicitly setting TD valign='top'. This irks me, as I want to rely
on stylesheets for formatting. Any suggestions on how to use a
style property to make the TD do my bidding?

I'm hung up on being standards-compliant, so if it only works in IE,
it's not much of a solution for me. I've already had to use some
javascript because IE doesn't respect hover on buttons. Grr!

I use tables because, as you've found, DIV tags are often difficult to
position exactly (they tend to move depending on the browser you're using.
To ad style to the table do the following:

In the tag itself: td class="input"

In the stylesheet:

td.input {
vAlign: top;
}

Let me know if you need further help.

Hugs,

CatNipped


--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

On 2005-07-22, Snittens penned:

"Monique Y. Mudama" wrote in message
...
Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

OK, I'll admit my web design skills are rusty, but I never learned
that tables are bad. Most of the websites I designed I used tables.
They are cross-browser compatible, and to me at least, there's no
guesswork as to how it's going to look.

Actually, tables have always had browser compatibility issues.
Certain attributes only worked in certain browsers.

The problem with tables is that nesting tables to get the behavior you
want gets really ugly, and it won't necessarily work across all
browsers, though of course you have the same problem with stylesheets.
The other problem with tables is that dramatically changing the layout
requires completely ripping out and rewriting the tables, whereas (in
theory at least) a well-conceived use of stylesheets can allow you to
reformat the page using only your stylesheet. There's a site out
there somewhere that uses only stylesheets to reformat a site, and
it's freaking amazing ... Grr, of course now I can't find it.

Ahah! Found it!

http://www.csszengarden.com/

You can click on various stylesheet links and it re-renders the page,
*using the same html*, just different stylesheets. Pretty amazing to
me.

As a software engineer, elegance and reusability appeal to me. In the
end, using nested tables for formatting is a hack. I've used them for
years, but now I want to use what seems to me to be a more elegant
approach.

What software are you using? If it's Dreamweaver, which is what I
use(d) and like, try the macromedia.dreamweaver group. They are
usually pretty helpful.

vim. That is to say, a plain text editor.

Honestly, if it were me, I would just use a table and use the CSS
for the font, color, etc. In Dreamweaver, you can make a template
and then have all pages of your site use the template in order to
keep style consistent.

And then if you change the template, does it go through and fix
everything?

No, see, that just creates unreadable code. Maybe I'm the last
dinosaur who cares, but I want people to be able to look at the source
for my site and actually get some use out of it. I want my code to be
pretty.

Disclaimer: My skills are a couple years old and I'm not all that
advanced.

Me too, on both counts.

--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

On 2005-07-22, CatNipped penned:

I use tables because, as you've found, DIV tags are often difficult
to position exactly (they tend to move depending on the browser
you're using. To ad style to the table do the following:

In the tag itself: td class="input"

In the stylesheet:

td.input { vAlign: top; }

Let me know if you need further help.


Are you sure about this? It's not working for me in IE or Firefox,
and my text editor's syntax highlighting doesn't recognize vALign as a
keyword ...

--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

"Monique Y. Mudama" wrote in message
...
On 2005-07-22, CatNipped penned:

I use tables because, as you've found, DIV tags are often difficult
to position exactly (they tend to move depending on the browser
you're using. To ad style to the table do the following:

In the tag itself: td class="input"

In the stylesheet:

td.input { vAlign: top; }

Let me know if you need further help.


Are you sure about this? It's not working for me in IE or Firefox,
and my text editor's syntax highlighting doesn't recognize vALign as a
keyword ...

I'm sorry, I was using the inside the label tag, actually in the stylesheet
it would be "vertical-align: top;".

Hugs,

CatNipped

--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

"Monique Y. Mudama" wrote in message
...
On 2005-07-22, Snittens penned:

"Monique Y. Mudama" wrote in message
...
Well, I'm putting together a site for my little business, and being
the geek that I am, I'm trying to force myself to use CSS for the
layout, finally learning it and kicking the table-abuse habit.

OK, I'll admit my web design skills are rusty, but I never learned
that tables are bad. Most of the websites I designed I used tables.
They are cross-browser compatible, and to me at least, there's no
guesswork as to how it's going to look.

Actually, tables have always had browser compatibility issues.
Certain attributes only worked in certain browsers.

The problem with tables is that nesting tables to get the behavior you
want gets really ugly, and it won't necessarily work across all
browsers, though of course you have the same problem with stylesheets.
The other problem with tables is that dramatically changing the layout
requires completely ripping out and rewriting the tables, whereas (in
theory at least) a well-conceived use of stylesheets can allow you to
reformat the page using only your stylesheet. There's a site out
there somewhere that uses only stylesheets to reformat a site, and
it's freaking amazing ... Grr, of course now I can't find it.

Ahah! Found it!

http://www.csszengarden.com/

You can click on various stylesheet links and it re-renders the page,
*using the same html*, just different stylesheets. Pretty amazing to
me.

As a software engineer, elegance and reusability appeal to me. In the
end, using nested tables for formatting is a hack. I've used them for
years, but now I want to use what seems to me to be a more elegant
approach.

What software are you using? If it's Dreamweaver, which is what I
use(d) and like, try the macromedia.dreamweaver group. They are
usually pretty helpful.

vim. That is to say, a plain text editor.

Honestly, if it were me, I would just use a table and use the CSS
for the font, color, etc. In Dreamweaver, you can make a template
and then have all pages of your site use the template in order to
keep style consistent.

And then if you change the template, does it go through and fix
everything?

No, see, that just creates unreadable code. Maybe I'm the last
dinosaur who cares, but I want people to be able to look at the source
for my site and actually get some use out of it. I want my code to be
pretty.

Disclaimer: My skills are a couple years old and I'm not all that
advanced.

Me too, on both counts.

In this site, I let the user determine graphic colors, font, font size, font
color, and link color. Go to the bottom of the page of the page on the
right and click "Personalize" to play around with it. I do it with CSS,
cookies, and variables in ASP.

http://www.gcmensa.org/Home.asp

Hugs,

CatNipped


--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca

"Monique Y. Mudama" wrote

Actually, tables have always had browser compatibility issues.
Certain attributes only worked in certain browsers.

This is true. Most of the basic ones do though.

The problem with tables is that nesting tables to get the behavior you
want gets really ugly, and it won't necessarily work across all
browsers, though of course you have the same problem with stylesheets.
The other problem with tables is that dramatically changing the layout
requires completely ripping out and rewriting the tables, whereas (in
theory at least) a well-conceived use of stylesheets can allow you to
reformat the page using only your stylesheet. There's a site out
there somewhere that uses only stylesheets to reformat a site, and
it's freaking amazing ... Grr, of course now I can't find it.

Ahah! Found it!

http://www.csszengarden.com/

You can click on various stylesheet links and it re-renders the page,
*using the same html*, just different stylesheets. Pretty amazing to
me.

I'll have to check that out. When I was designing websites, CSS was just
getting popular, so I never really got into it except for stuff like fonts,
color, etc.



As a software engineer, elegance and reusability appeal to me. In the
end, using nested tables for formatting is a hack. I've used them for
years, but now I want to use what seems to me to be a more elegant
approach.


Oh yeah, people get stupid with nesting tables. I never do them too much,
maybe one or two on a page.



vim. That is to say, a plain text editor.

More power to ya!




And then if you change the template, does it go through and fix
everything?

No, see, that just creates unreadable code. Maybe I'm the last
dinosaur who cares, but I want people to be able to look at the source
for my site and actually get some use out of it. I want my code to be
pretty.


It does fix it most of the time. I admit I have had problems getting the
template to update all the pages and I have to go manually fix them. And
yes, DW can make some bloated code. I usually go through and delete
anything that's not needed.

You sound like my DH. He's also a software engineer, designs software for
medical testing equipment. He gets all anal about making his code pretty
and readable and complains when a certain co-worker of his writes sloppy
code.

-Kelly

On 2005-07-22, CatNipped penned:

I'm sorry, I was using the inside the label tag, actually in the
stylesheet it would be "vertical-align: top;".


Ah, yes, that works =) Thanks.

--
monique, who spoils Oscar unmercifully

pictures: http://www.bounceswoosh.org/rpca