CSS-Friendly tags with set widths

You can ignore the 'display:inline' that is in the class.

I was testing with a few display types and that was there when I copied it.

Please read the messages at the top of the forum message list. They are there to tell you what we need in order to be able to help you. You haven't given us what we need, so I am assuming you haven't read them. If you have read them, please read them again until you understand them.

1. Describe as clearly as possible the problem you are having.
Done....unless you are too simple to understand my problem.
2. Please describe what elements the problem appears on.
Done....unless you are too important to actually be bothered to read the code I've posted.
3. Provide sight of the code you are using pasted within <code> tags.
Done.

I realize you aren't going to answer my question now and I'm okay with that....I'll wait for someone else who actually cares with helping people....not just flaunting how much he knows about the subject.

There's NO way you cant get from the code I posted and my original question what my issue is.

Look....if you dont want to help me because I didn't follow apparently whatever you feel are the rules, then dont even bother posting. Reading this forum, my skin crawls everytime I read your posts because you make it as pain-stakingly as possible for whoever is actually out here posting for help.

Ed's point probably is its really helpful to provide a link. It doesn't have to be too a fancy page, just something that shows the problem. With browsers like FF its quite easy for someone to view your page, try out their solution using Firebug / Web Developer and then give you an answer.

A form with labels on the left and the control on the right?

Its a simple two column layout. The label text needs to be contained in an element separate from the control. Float the text left with a width and float the control right. Clear each set of elements.

My personal preference is:



An alternative is to use a LABEL in place of the DIV and a SPAN in place of the LABEL - doing away with the need for a "for" attribute. Note, the INPUT could be a TEXTAREA or a SELECT.

I work on an Intranet.....thus, there is no link to provide But, beyond that, I felt I obeyed the rules .... meh.

Thanks for the reply.

I usually do something similar to that where I, in essence, create a tag that serves the role of but I was hoping to find a way to get around the excess tagging. I say that because a simpler fix is to change the label to a div but then you lose that use of semantic-friendly tags. However, going with the div does make for a cleaner looking end product.

Let me ask this, then.......what if it was a more complex layout.....for instance....a 4 column look. Is there a good way to do that using only labels, inputs and some form of a containing tag or not really?

Thanks again for the answer to my question.

Web space is cheap enough to get your own domain and some hosting to play with

I have found that structure robust enough for lots of circumstances. For four column, clear every second div rather than every first. Yes, you can probably be more concise. It will take more time and won't be as flexible.

I have my own webspace but you'd be surprised how not-in-a-good-mood bosses can get if/when they find out that you have published code that they are basically paying you to write out to the public domain.

Not worth having to explain when I believe that the sample code was good enough as-is.

Also, as you can tell from my post there.....I have run into Ed's type before and they drive me up a wall and his reply was just enough to make me snap. Every post of his I've ever read almost makes me not want to come back to this forum but the help that people like yourself and Pineapple provide is so polite and accurate that I hate to ignore the whole forum because of the posts of one of its constituents. If he would have simply said "Do you have a link that you can provide to help me see what it is you're looking at", I could have told him exactly what I told you but his type of people never feel that they dont have to actually treat question-askers like people.....just idiots who dont know what they're talking about and can't follow rules.

I just wish some people in the Computer Science fields could be as socially saavy as they are computer saavy.....would make exchange forums like this much more effective.

*puts soapbox back on top of dryer and gets back to his code*

You don't need to publish the final page or anything like it. Just something that highlights the problem. I have a template and a scratch area. If I run into a problem or want to demo a solution its two minutes to put the key points into a template.

Your boss won't mind a bit if your productivity goes up.

er, the rest of it might help.

If you want people to help then GIVE THEM WHAT THEY BLOODY ASK FOR. You wouldn't take a steering wheel to a mechanic and ask them to fix your car, would you?

That's not what Ed "feels" are the rules. They ARE the bloody rules. That's why they've got a red icon, are BIG and at the top of EVERY FORUM.

Actually, what Ed is trying to do is get you to give us what we actually NEED to help you. Now either drop the attitude towards those who give up their time for free or take your business elsewhere, you silly twunt.

Actually, that's not the rule. The rule is we need to see all your code, both html and CSS. And you did not do that in the message I replied to. The rules are there to help you get the help you want.

Since you are asking for free help here, don't you think it would be a good idea to make our helping you as easy as possible?

Ooops, I must have missed that bit. Sorry Putts, I was having a funny day yesterday, all out of my system now.

...and the moral of the story is (putts): don't fly off the handle with tirades of abuse just because someone asks you (politely) to follow the rules of a forum. Ed may well have been a bit 'short' in his response, but he was not in the slightest bit insulting - unlike the extremely personal manner in which you fired off at him. Personally, I'm very surprised that Chris chose to help you after your post, but hey, some of us are more tolerant than others.

Read your third post again and ask yourself how you would feel if it was written by someone else aimed at you. Then consider the number of hours that Ed devotes to helping others for nothing but the occasional thank you.

Ed - keep up the good work

I'd say it's less than occasional. Rare maybe? Thanks are like gold-dust round these parts

Read your third post again and ask yourself how you would feel if it was written by someone else aimed at you. Then consider the number of hours that Ed devotes to helping others for nothing but the occasional thank you.

Ed - keep up the good work

I worked in a similar position to you all for many years and had a "colleague" very similar to Ed there.

Very knowledgeable and always logged on and answering questsions but also very short with everyone and often treated people as if they were complete idiots just because they weren't as smart as he was in the way of HTML.

He treated the rest of the mod team just fine because he saw us as peers, but he also made our job more painful because we would often have to quell feuds between members and him. Reading Ed's posts reminds me so much of him.

Read Ed's post again......dont you think he could have made it much clearer what, exactly, he was needing from me? Sure he could have. Why didn't he? I'll let you answer that for yourself. I actually "read the rules" (again) to make sure before I "flew off the handle" and had no idea what he was going on about.

Anyhow....@ Chris....what I would have been willing to upload to a webpage was what I pasted here in <code> view. Not worth risking my job over trying to make pages fully CSS compliant in an environment where all we use is MS IE anyhow But I do like to try as much as possible, which is why I'm here.

Actually, that's not the rule. The rule is we need to see all your code, both html and CSS. And you did not do that in the message I replied to. The rules are there to help you get the help you want.

Since you are asking for free help here, don't you think it would be a good idea to make our helping you as easy as possible?

What was in my reply was copied/pasted from the rules.

If you want to see more than that, then an edit to the rules stating would be more helpful.

Thank you for clearing up what you feel I was doing wrong.

Apologies, I'm in the process of editing the stickies to make them a bit clearer and more unified.

You apparently had a colleague who was very similar to what you have concluded I am like on the basis of a single message!

Well that lets me out right there. Most of the gurus on this system know far, far more than I do, and in comparison to them I only know a little. But I do know how to read fairly well.

And yet I have somehow managed to get elected by acclamation several times as President of the local Union. These Library folks must be rather odd...

Gentlemen - can we draw the line there please

kk...finally got rid of some nagging issues with other stuff laying about and was able to get back to this and realized that the previously given solution might not really work.

Here's the basis of what I'm doing right now

I've kept everything in style attributes so it's easy to see what I'm doing.

Now, this works assuming certain widths of the content.
However, let's say that my Policy Number is 400 characters long.....well that creates and obvious problem with my 200 pixel width I had designated to this box.

Basically, here's what I'm wanting to do:
I want to set the width on my first label so that I can assure myself that those will always be the same size (there are more than just Policy Number.....it's just 1 field for my example) and then let the other label take up as much space as is available.

This, however, brings me back to the fact that I shouldn't be setting a fixed width on a label tag (I dont believe) so do I contain the label tag inside something else to enforce this or am I basically over-complicating something that should be done via either a table or a 3-div-row layout*?

*My 3-div-rows looking something like



YAY for tableless tables ;)

Actually.....let me see if I can just get an answer on one thing...

How "CSS Proper" is it to define widths on elements such as divs or labels?

Width isn't necessarily a proper attribute of those 2 tags but I guess that doesn't necessarily mean that it's a CSS faux paux to use it on them.

For now, I'm just going to define a class on my first label that defines a width which will keep all my field name labels in a straight column and will allow me the flexibility I'm looking for in the data (second) labels.

Why wouldn't it be proper? defining width is fine if that is what is required.

.... am I basically over-complicating something that should be done via either a table or a 3-div-row layout*?

You know, that code looks VERY much like a table structure, and the data looks just like something I would put in table.

If you find you NEED to put something in both columns and rows, where the rows of cells all have related meaning, and the columns have related definitions, THAT'S a TABLE.

TABLE-LESS LAYOUT is just that. Don't use tables to make a site look pretty. But where it adds definition to content, table away.

putts - there is nothing wrong with giving a div a width, in fact if you float the div then you need to give it a width and a height to avoid x-browser problems (correct me if I'm wrong someone). Just float a label div left with a fixed width, then float a text div left (with a small left margin if you like, to keep the two apart) so that the text lines up next to the label. CT is correct to suggest using tables if you are displaying tabulated data, but to me it looks like you're making more of an aligned list than tabulated data (not that it's a life-or-death decision or anything

PS: I've just noticed that you're using actual label elements as opposed to div elements with labels in (as in descriptive text). Why? Just use pairs of fixed-width divs and forget about wrapping them inside another div.

In this case, the div was the containing object for the 2 labels.

CT, it's not tabular data as much as it is a part of a form.
The field put in the example is a read only field whereas some of the other pieces of data will be in an input tag. The label, read-only example is just cleaner.

I think I have the answer to my question though:
Q : Is it "CSS Proper" to define widths on any/all tags?
A : Yes. Setting a width on tags such as labels breaks no fundamental law of CSS and can be used whenever necessary.

Thanks again.

Just to throw a spanner in ....

Two column forms may look good. They do suffer from problems, e.g. when changing font-size alters the carefully allocated width for labels or with multilingual sites where the number of glyphs in the label may vary significantly from language to language.

It would be much easier all round if the designer is aware of that, so they produce designs which have labels above controls.

Hi Putts,

Being plagued with the same problem as you e.g. setting a fixed width for a label tag, I embarked on my google quest for a solution.

Coming across your post I thought great! someone with exactly the same problem as me, but as it seemed you was getting nowhere fast (looking at the responses), I went back to my google results for a solution.

Not really a full solution to my problem, but interesting enough I came across a forum post advising that label tags are inline, and that the width property doesn't apply to this type of tag (makes sense) - see http://archivist.incutio.com/viewlist/css-discuss/62479.

With my little ol' brain churning I decided to change the display property for label to "block", and surprise! I can now set the width. I ended up linking the label and input tags using "label for...." within an unordered list, within a fieldset. I've attached the html/css code for you to check out and I hope this helps.

Kind Regards

Paul
Newbie

P.S. I've debugged this in FF2, IE6, IE7, Opera 9.20, NS 8.13 on a windows platform and all seems to display fine.

thx, Paul

I'll be sure to check it out