28 replies [Last post]
putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

The code :

.inspectionItemLabel
{
width:375px;
display:inline;
font-size:12px;
color:#333333;
}

.....

Policy Number :
Effective Date :

The question - how do I get the tags to obey a set width? Or is it not possible. I'm trying to get this form to look how I'd like it to (with all the labels being the same width and the inputs lining up next to them) but I'm also trying to use the proper tags for CSS-friendliness.

Any tricks or techniques to get this to work (and any advice for general formatting in the future)?

TIA

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

no 'display:inline'

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Please read the messages at

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

1. Describe as clearly as

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ed's point probably is its

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:


label text


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.

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

I work on an

I work on an Intranet.....thus, there is no link to provide Tongue 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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Web space is cheap enough to

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

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.

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

I have my own webspace but

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. Wink

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. Smile

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You don't need to publish

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. Wink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 22 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

putts wrote:3. Provide sight

putts wrote:
3. Provide sight of the code you are using pasted within <code> tags.
Done.

er, the rest of it might help.

Quote:
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.

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?

Quote:
Look....if you dont want to help me because I didn't follow apparently whatever you feel are the rules

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.

Quote:
because you make it as pain-stakingly as possible for whoever is actually out here posting for help.

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.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

putts wrote: but the help

putts wrote:

but the help that people like yourself and Pineapple provide is so polite

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

putts wrote: 3. Provide

putts wrote:

3. Provide sight of the code you are using pasted within <code> tags.
Done.

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?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 22 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Hugo wrote:putts wrote: but

Hugo wrote:
putts wrote:

but the help that people like yourself and Pineapple provide is so polite

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

Verschwindende wrote:
  • CSS doesn't make pies

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

...and the moral of the

...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 Smile

Life's a b*tch and then you die!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 22 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

roytheboy wrote:nothing but

roytheboy wrote:
nothing but the occasional thank you.

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

Verschwindende wrote:
  • CSS doesn't make pies

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

roytheboy wrote:...and the

roytheboy wrote:
...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 Smile

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.

[email protected] 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 Tongue But I do like to try as much as possible, which is why I'm here. Smile

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

Ed Seedhouse wrote:putts

Ed Seedhouse wrote:
putts wrote:

3. Provide sight of the code you are using pasted within <code> tags.
Done.

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 22 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Apologies, I'm in the

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

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

putts wrote: I worked in a

putts wrote:

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

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

Quote:

Very knowledgeable

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.

Quote:
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.

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...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Gentlemen - can we draw the

Gentlemen - can we draw the line there please Smile

Life's a b*tch and then you die!

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

kk...finally got rid of some

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

Policy Number: Sample Text

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 ;)

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

Actually.....let me see if I

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why wouldn't it be proper?

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 39 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

putts wrote:Here's the basis

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

Policy Number: Sample Text

.... 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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

putts - there is nothing

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 Wink

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.

Life's a b*tch and then you die!

putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

roytheboy wrote: PS: I've

roytheboy wrote:

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.

Laughing out loud

Thanks again.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Just too throw a spanner in

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.

pauldo
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2007-05-25
Posts: 1
Points: 0

my first post

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.

AttachmentSize
label-width.html.txt 2.03 KB
putts
putts's picture
Offline
Regular
Michigan
Last seen: 13 years 7 weeks ago
Michigan
Joined: 2007-04-30
Posts: 32
Points: 0

thx, Paul I'll be sure to

thx, Paul

I'll be sure to check it out Laughing out loud