By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,085 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

col element in table not working

P: n/a
I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #1
Share this Question
Share on Google+
25 Replies


P: n/a
Haines Brown <br****@teufel.hartford-hwp.com> wrote:
I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.


Depends on the properties, there are only a few properties that are
allowed to be defined for columns, and text-align is not one of them:
http://www.w3.org/TR/CSS2/tables.html#q4

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a


Haines Brown wrote:
I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.


See
http://www.w3.org/TR/CSS2/tables.html#q4
on which CSS properties can be applied to table columns, only border,
background, width, visibility.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #3

P: n/a
On Sun, 14 Dec 2003 11:42:39 GMT, Haines Brown
<br****@teufel.hartford-hwp.com> wrote:
I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.


'text-align' is not supported in columns and column-groups. Only a few CSS
properties can be set for columns.

See
http://www.w3.org/TR/CSS21/tables.html#q4
and
http://ln.hixie.ch/?start=1070385285&count=1
--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you won't get any
real work done. - J.Nielsen
Jul 20 '05 #4

P: n/a
Rijk van Geijtenbeek <ri**@opera.com> writes:
On Sun, 14 Dec 2003 11:42:39 GMT, Haines Brown
<br****@teufel.hartford-hwp.com> wrote:
I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.


'text-align' is not supported in columns and column-groups. Only a few
CSS properties can be set for columns.

See
http://www.w3.org/TR/CSS21/tables.html#q4
and
http://ln.hixie.ch/?start=1070385285&count=1


Rijk and the others who so kindly corrected my mistake.

In reading the documents referenced here, I gather that what I'm
trying to do represents a problem not yet resolved. If so, then do I
have simply to define each cell for which I want text to align left as
members of a class having the property of text-align: left? If so,
that is easy, but not as elegant as I would have hoped.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #5

P: n/a
Haines Brown wrote:
Rijk van Geijtenbeek <ri**@opera.com> writes:

On Sun, 14 Dec 2003 11:42:39 GMT, Haines Brown
<br****@teufel.hartford-hwp.com> wrote:

I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.


'text-align' is not supported in columns and column-groups. Only a few
CSS properties can be set for columns.

See
http://www.w3.org/TR/CSS21/tables.html#q4
and
http://ln.hixie.ch/?start=1070385285&count=1

Rijk and the others who so kindly corrected my mistake.

In reading the documents referenced here, I gather that what I'm
trying to do represents a problem not yet resolved. If so, then do I
have simply to define each cell for which I want text to align left as
members of a class having the property of text-align: left? If so,
that is easy, but not as elegant as I would have hoped.


Correct. The W3C is currently looking into a solution for this (and
other) problems, maybe you can come up with something ;-). Applying a
'class' is the only way to go :-(

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #6

P: n/a
On Mon, 15 Dec 2003 11:26:34 +0100, Anne van Kesteren
<ma**@annevankesteren.nl> wrote:
Haines Brown wrote:
...
trying to do represents a problem not yet resolved. If so, then do I
have simply to define each cell for which I want text to align left as
members of a class having the property of text-align: left? If so,
that is easy, but not as elegant as I would have hoped.

Correct. The W3C is currently looking into a solution for this (and
other) problems, maybe you can come up with something ;-). Applying a
'class' is the only way to go :-(


The other option is using TR > TD + TD to select each second cell in a
row, but it depends on your content if that is feasable, and it isn't
supported by MSIE.

Or if you just want to set horizontal alignment, you use <col
align=right>, which is not even deprecated...

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you won't get any
real work done. - J.Nielsen
Jul 20 '05 #7

P: n/a
*Haines Brown* <br****@teufel.hartford-hwp.com>:

I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#leftcol { text-align: left; }
IIRC it works in IE, although it shouldn't, because the cells are not
descendants of the columns but the rows.
By the way: IDs are case-sensitive and it's not good style to include the
element's name in the class or id name.
<table id="testTable">
<col id="leftCol" />
<col span="2" />


#testTable td {text-align: right}
#testTable td:first-child {text-align: left}

is very close to applying left alignment to the first column only. It's
problematic when 'colspan' and 'rowspan' come into play, though.

--
"You can only find truth with logic
if you have already found truth without it."
G.K. Chesterton
Jul 20 '05 #8

P: n/a
Christoph Paeper <cr***********@gmx.net> writes:
#leftcol { text-align: left; }


By the way. . .it's not good style to include the element's name in
the class or id name.


Perhaps a little philosophical and OT, but would you explain your
point? The element's name is "col," while I've assigned the ID of
"leftCol." Apparently it is this to which you refer, but I wonder what
is the basis for your objection.
--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #9

P: n/a
*Haines Brown* <br****@teufel.hartford-hwp.com>:
Christoph Paeper <cr***********@gmx.net> writes:
By the way. . .it's not good style to include the element's name in
the class or id name.
Perhaps a little philosophical and OT,


Philosophical maybe, but IMO not off-topic.
The element's name is "col," while I've assigned the ID of "leftCol."


Who says, the style will always only be applied to documents with a 'col'
element? And will it always be "left"? Such changes more often happen with
classes over time than with ids, but why not be consistent?
E.g. #first or col#header would be more general and appropriate.

--
"It is not worth an intelligent man's time to be in the majority.
By definition, there are already enough people to do that."
G. H. Hardy
Jul 20 '05 #10

P: n/a
Christoph Paeper <cr***********@gmx.net> writes:
*Haines Brown* <br****@teufel.hartford-hwp.com>:
Christoph Paeper <cr***********@gmx.net> writes:
Such changes more often happen with classes over time than with ids,
but why not be consistent?


Not to be argumentative, but why be consistent? I think of ID as
something specific to this particular document and a unique instance,
while class is generic and employed for multiple instances. So if they
are opposite in purpose, why should they be consistent in form?

That's why I tend to be very ad hoc when it comes to the ID
("SecondParagraphPadding-top," "indent2em", etc.), hinting its
specific location or purpose (well, not as ugly as the examples). I
don't want to be generic here.

I'm all in favor of consistency, but not when it comes to things that
refer to unique instances. What do you think?

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #11

P: n/a
Haines Brown wrote:
[snip] Not to be argumentative, but why be consistent? I think of ID as
something specific to this particular document
So wrong, CSS is invented to be applied to multiple documents. Each
document can have the _same_ ID attirbute.
So if they are opposite in purpose, why should they be consistent in form?

They should have a name that describes the elements content. It is about
markup, not about styling.
That's why I tend to be very ad hoc when it comes to the ID
("SecondParagraphPadding-top," "indent2em", etc.), hinting its
specific location or purpose (well, not as ugly as the examples). I
don't want to be generic here.


That is stupid. What if your boss wants <p id="green"/> to be 'yellow'?
You will have to change the markup in such a case, where it would be
better to just describe the content.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #12

P: n/a
Anne van Kesteren <ma**@annevankesteren.nl> writes:
Haines Brown wrote:
Not to be argumentative, but why be consistent? I think of ID as
something specific to this particular document
So wrong, CSS is invented to be applied to multiple documents. Each
document can have the _same_ ID attirbute.


Well, yes, it is true that two different documents might use the same
ID name, but each ID must still refer to a specific instance, as far
as I know.
They should have a name that describes the elements content. It is
about markup, not about styling.
I understand what you are saying. CSS is intended to define the format
of functional elements within a document, and so attributes are
associated with functional identifiers. For example, the functional
identifier of a main heading is <h1> and so we apply attributes to h1,
not to the text that happens to be enclosed by <h1></h1>.

However, not everyingthing has a function, and so how do we accomodate
CSS to other needs, such as aesthetics?

If I want some text to be green, say, for aesthetic reasons without
having green text mean anything, then then I'm faced with defining
format (or "style" as you put it) of the text itself. That may not be
the strength and basic purpose of CSS, but CSS does the job.

It may be that you are talking about principle, and I'm talking about
some practical needs that are hard to reconcile with the principle.
That is stupid. What if your boss wants <p id="green"/> to be
'yellow'? You will have to change the markup in such a case, where
it would be better to just describe the content.


That's true. But does it not presume the paragraph here has a
specific function? In otherwords, what would you substitute for the
word "green" if you knew nothing about the paragraph in question? If
my concern were merely format or aesthetics, then I must somehow ask
CSS to provide the needed service.

In principle, I suppose, I could do something like <span
class="Z1">this</span>.

#Z1 {color: green;}

Here I'm not using a name that has any meaning in relation to the span
content, but is abstract, for the text has no particular function. Am
I better off using an abstract name like Z1 than something that is
meaningful to me, such as <span id="SecondExample">this</span>?

I hope all this does not seem too trivial to worry much about.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #13

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
If I want some text to be green, say, for aesthetic reasons without
having green text mean anything, then then I'm faced with defining
format (or "style" as you put it) of the text itself. That may not be
the strength and basic purpose of CSS, but CSS does the job.
Why do you want the text green? What is significant about the text? I think
Anne is saying that you should try to make names reflect the content, not
the style, so that you don't confuse yourself later.

For overall good design, making text green should be done for more of a
reason than "I felt like it" - perhaps "this text is showing the price of
something on sale, so I want it green" is more accurate. Or "this paragraph
is a sick joke and should be green in color." So your class or id ought to
be "saleprice" or "sickjoke." That way, down the road if the colors ought to
change, you're not stuck having your "green" elements being yellow or olive.
In otherwords, what would you substitute for the
word "green" if you knew nothing about the paragraph in question?


If I didn't know the function, I shouldn't be screwing with the colors,
that's what I gather. Anne's point seems to be that the HTML markup should
not be tied to the visually artistic part of design. If you change font or
add color or whatnot, you should be doing it to differentiate the content
you're marking from content that's marked differently, not because you want
a pretty color.

I'm not saying I agree 100%, but that seems to be Anne's point, and it's a
well-reasoned one.

Jul 20 '05 #14

P: n/a
On Wed, 17 Dec 2003, Haines Brown wrote:
So wrong, CSS is invented to be applied to multiple documents. Each
document can have the _same_ ID attirbute.
Well, yes, it is true that two different documents might use the same
ID name, but each ID must still refer to a specific instance, as far
as I know.


Web pages tend to have quite a lot in common. There's no point in
inventing a new name for every banner head, for every navigation area,
for every copyright notice. And by keeping consistent, you can keep
the site looking consistent, and make consistent changes with minimum
effort. But you know this already, right?

Sure, there will also be items on pages that are not typical of
anything found on other pages, but that doesn't stop one from being
consistent when it's possible to be consistent.
If I want some text to be green, say, for aesthetic reasons without
having green text mean anything, then then I'm faced with defining
format (or "style" as you put it) of the text itself.
If you've no other reason than "aesthetic reasons", then surely it's
just as likely to change at some other time, maybe to reflect autumn
gold rather than spring green? You might as well name the style as
something meaningless, say "cairngorm" or "fishpaste" or whatever, as
call it "green" and risk it being inappropriate when there's a change.
That is stupid. What if your boss wants <p id="green"/> to be
'yellow'? You will have to change the markup in such a case, where
it would be better to just describe the content.


That's true. But does it not presume the paragraph here has a
specific function?


I don't think so. Even bosses have been known to have an inexplicable
fad for a colour change, without any specific function ;-)
I hope all this does not seem too trivial to worry much about.


Welcome to usenet ;-))
Jul 20 '05 #15

P: n/a
Thanks for the comments. Again, I'm carrying this on not to be
insistant, but to explore more deeply an issue that I find a bit
unclear.

"Neal" <ne**@spamrcn.com> writes:
If I want some text to be green, say, for aesthetic reasons
without having green text mean anything, then then I'm faced with
defining format (or "style" as you put it) of the text
itself. That may not be the strength and basic purpose of CSS, but
CSS does the job.
Why do you want the text green?


As I said, for aesthetic reasons, but your example below leads me to
think maybe I can find more appropriate names.

Here are two examples.

Suppose I have an object that casts a shadow. The shadow graphic must
be placed carefully in relation to the object that casts it, but the
shadow has no function in relation to the body content. Suppose I'm
writing an advertisement for avocados, and so want the text to be
avacado green, and I want some other text to be orange because that's
nice color combination.

But you suggest:
For overall good design, making text green should be done for more
of a reason than "I felt like it" - perhaps "this text is showing
the price of something on sale, so I want it green" is more
accurate. Or "this paragraph is a sick joke and should be green in
color." So your class or id ought to be "saleprice" or "sickjoke."
That way, down the road if the colors ought to change, you're not
stuck having your "green" elements being yellow or olive.


OK, so the name you would recommend in the above example would be
id="avocado", and so then I'm free to alter the color of avocados as
I will. Or <img id="shadow /> Or id="PrettyText" perhaps.

But let me raise a practical question. Suppose I have something lke
this, whic is a list of links prefaced by an arrow graphic:

<p class="links" id="child">
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-a.html">child a</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-b.html">child b</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-1.html">child 1</a>
</p>

Now, let's assume there's a categorical distinction between the child
links that are listed alphabetically, and the one listed numerically,
and so a want to insert, say 0.4em; padding between the second and
third link. What would you recommend? This actually lies behind why I
raised the issue in the first place.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #16

P: n/a
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> writes:
On Wed, 17 Dec 2003, Haines Brown wrote:
So wrong, CSS is invented to be applied to multiple
documents. Each document can have the _same_ ID attirbute.


Well, yes, it is true that two different documents might use the
same ID name, but each ID must still refer to a specific instance,
as far as I know.


Web pages tend to have quite a lot in common. There's no point in
inventing a new name for every banner head, for every navigation
area, for every copyright notice. And by keeping consistent, you
can keep the site looking consistent, and make consistent changes
with minimum effort. But you know this already, right?

Sure, there will also be items on pages that are not typical of
anything found on other pages, but that doesn't stop one from being
consistent when it's possible to be consistent.


You jump at this point to discuss the subject I just debated in my
previous mewssage, so won't burden you with it here. I think I
concluded that in principle one should use names that refer to the
function or identification of the content rather than its format, so
Anne is probably right. If I cook up a strange example where that is
not true, I can certainly use an abstract identifier (id="Z1") that at
least does not violate the principle.

However, your point above seems to be left hanging. Yes, one should
try to be consistent. However, how is one consistent in dealing with
something unique? For example, we try to make our pages uniform, but
often I've made pages that have little in common with anything else,
and which do not have many repeated elements in them. This is where
id= comes in.

But I'm having difficulty understanding how one can be consistent
about what is unique. I can think of one or more answers to this
question, but wonder what you had in mind.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #17

P: n/a
*Haines Brown*:

whic is a list of links prefaced by an arrow graphic:
It's not, at least in HTML terms.
<p class="links" id="child">
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-a.html">child a</a><br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-b.html">child b</a><br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-1.html">child 1</a>
</p>

Now, let's assume there's a categorical distinction between the child
links that are listed alphabetically, and the one listed numerically,
and so a want to insert, say 0.4em; padding between the second and
third link. What would you recommend?


<ol class="links" id="child">
<li><a href="doc-a.html">child a</a></li>
<li><a href="doc-b.html">child b</a></li>
</ol><ol class="links">
<li><a href="doc-1.html">child 1</a></li>
</ol>

.links {list-style: disc url("../bin/arrow.png");
margin: 0; padding: 0.2em 0}

--
"Opportunity is missed by most people
because it is dressed in overalls and looks like work."
Thomas Alva Edison
Jul 20 '05 #18

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
But let me raise a practical question. Suppose I have something lke
this, whic is a list of links prefaced by an arrow graphic:

<p class="links" id="child">
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-a.html">child a</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-b.html">child b</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-1.html">child 1</a>
</p>
Well, there is:

list-style-image: url(URI);

where URI is the location of an image that serves as a bullet.
Now, let's assume there's a categorical distinction between the child
links that are listed alphabetically,
What is that distinction? I'll use "one" and "two" as placeholders.
and the one listed numerically,
and so a want to insert, say 0.4em; padding between the second and
third link. What would you recommend? This actually lies behind why I
raised the issue in the first place.


li.one, li.two {
list-style-image: url(arrow.png);
padding: 1em;
}

li.two {
padding-top: 1.4em;
padding-bottom: 1.4em;
}

<ul>
<li class="one"><a href="doc-a.html">child a</a></li>
<li class="one"><a href="doc-b.html">child b</a></li>
<li class="two"><a href="doc-1.html">child 1</a></li>
</ul>

Or, you could do two ul's in a row, and set the ul padding .4 em larger than
the padding between li's. Actually, I think that might be better.
Jul 20 '05 #19

P: n/a
Yes, you and Neal provided obvious answers, but only by changing the
parameters of the question. I was avoiding a "list" in HTML terms, but
instread created one in terms of its format. My example used lines
separated by <br /> because such lines are not contained in an element
that can be identified.

I could also have divided my example list into separate paragraphs,
identify one of them, and then play with their spacing. You and Neal
divide my list into two lists, and so can identify them with the names
"child" and "links". Both are functional names, which satisfies the
naming convention. But note that all the list items are simultaneously
a child and a link, and so I suppose child-a and child-b is their
equivalent. Neal does this with link-1 and link-2.

These names are essentially abstract distinctions among links and
therefore not much different from my purely abstract example of
"Z1". Such a name satisfies the recommendation that names _not_
reflect format, but fail to satisfy the recommendation that names do
_distinguish_ function or content.

Why I offered an example with lines separated by <br /> is that the
lines have no container that can be so identified. I've found through
playing that I can do something like this

#vspace { line-height: 2em; }

Line 1
<br />
Line 2
<br id="vspace" />
Line 3

This creates extra space between Line 1 and Line 2. However, I've
never used this because I'm not sure all browsers will associate the
<br /> with Line 2 and so give their shared line the extra height
instead oif Line 3. But the question is, the name "vspace" here does
in a sense refer to a kind of content, although also format, just as
<br /> itself does. So is "vspace" acceptable as a name? This may be
the same as my <img id="shadow"... /> example.

Again, sorry to pursue a picky question at such length, but I find
that issues that are not driven into the ground have a way of biting
me in the butt when I'm not looking.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #20

P: n/a
Neal,

Somewhat OT, but the thought occured to me.

"Neal" <ne**@spamrcn.com> writes:
li.one, li.two {
list-style-image: url(arrow.png);
padding: 1em;
}

li.two {
padding-top: 1.4em;
padding-bottom: 1.4em;
}

<ul>
<li class="one"><a href="doc-a.html">child a</a></li>
<li class="one"><a href="doc-b.html">child b</a></li>
<li class="two"><a href="doc-1.html">child 1</a></li>
</ul>


What would you do if you needed to name "arrow.png" in order to
specify its size or relative position?

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #21

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
What would you do if you needed to name "arrow.png" in order to
specify its size or relative position?


More classes pointing to other sizes, perhaps.
Jul 20 '05 #22

P: n/a
"Neal" <ne**@spamrcn.com> writes:
"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
What would you do if you needed to name "arrow.png" in order to
specify its size or relative position?


More classes pointing to other sizes, perhaps.


?? My intent was to ask how such a class would be applied to the list
item marker. Here's a simple example:
li.list {
list-style-image: url(arrow.png);
padding: 1em;
}

<ul>
<li class="list"><a href="doc-a.html">document a</a></li>
<li class="list"><a href="doc-b.html">document b</a></li>
</ul>

Now, suppose I want to shift the relative position of marker
"arrow.png" in relation to the lines of text in the list, such as
shifting it up a bit? Or perhaps I might want to reduce its size. I
assume that to do this, "arrow.png" must somehow be assigned a class
or ID, but I don't see how.

This is why I created an artificial "list" by using <br /> to separate
ordinary lines that began with a graphic to serve as markers for the
lines.

--
Haines Brown
Jul 20 '05 #23

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87***************@teufel.hartford-hwp.com...
?? My intent was to ask how such a class would be applied to the list
item marker. Here's a simple example:
li.list {
list-style-image: url(arrow.png);
padding: 1em;
}

<ul>
<li class="list"><a href="doc-a.html">document a</a></li>
<li class="list"><a href="doc-b.html">document b</a></li>
</ul>

Now, suppose I want to shift the relative position of marker
"arrow.png" in relation to the lines of text in the list, such as
shifting it up a bit? Or perhaps I might want to reduce its size. I
assume that to do this, "arrow.png" must somehow be assigned a class
or ID, but I don't see how.


Easiest solution (for me anyway) is to recreate the bullet graphic a little
higher or lower (higharrow.png, lowarrow.png, or what have you) and create a
class for that one.

See, basically if you want to have the item look different in the viewport,
it must therefore have a different meaning in the context of the page. So
you want to class it differently anyway. Decide what different types of
items you want in the list. Assign class based on that, then define the
class.

Why do you want different bullet styles anyway? What's the meaning you're
trying to send to the user by doing this?
Jul 20 '05 #24

P: n/a
I think you are telling me that there's no way to assign a class or id
to a list marker, but rather I should redesign the graphic so that it
has the desired attributes.

You ask why I would want to mess with the qualities of the marker
anyway. Well, the reason is that I needed to adjust the height of the
marker in relation to the line it marks. I find that when I try to
change the relative position of the line, it includes the marker. So I
have to so something really ugly:

li {
list-style-image: url(arrow.png);
height: 1.4em;
}
.listLine {
position: relative;
top: -0.3em;
}

<ul>
<li><a href="doc-a.html">
<span class="listLine">child a</span></a>
</li>
<li><a href="doc-b.html">
<span class="listLine">child b</span></a>
</li>
</ul>

I don't know that this is any improvement over my original approach,
which was simply to start new lines in a paragraph with a <br /> and
an image to consruct the appearance of an HTML list (I used the height
attribute to bring the lines closer together than 1 em, so don't know
why the value 1.4 works in practice.)

Here was my original approach:

<p class="links">
<img class="arrow" src="arrow.png" />
<a href="doc-a.html">child a</a>
<br />
...

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #25

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
I think you are telling me that there's no way to assign a class or id
to a list marker, but rather I should redesign the graphic so that it
has the desired attributes.
Well, what I'm trying to say is that the bullets on lists are supposed to
function in a particular way. The only sure and meaningful way to defeat
that is to specify a different bullet.
You ask why I would want to mess with the qualities of the marker
anyway. Well, the reason is that I needed to adjust the height of the
marker in relation to the line it marks.
My next question: why do you need to change the relative position of a line?
What I'm driving at is there must be some meaning to the user as to why
you're doing this. What's the context in terms of the content that's being
presented?
I find that when I try to
change the relative position of the line, it includes the marker.
? In IE and Opera list items have their positions changed but the bullet
stays put. As some of your list items need to be positioned high, and some
regular, do this.

li.normal {
list-style-image: url(arrow.png);
height: 1.4em;
}
li.special {
position: relative;
top: -0.3em;
list-style-image: url(higharrow.png);
}

and the image matches. We're talking bullets here, not terribly wasteful of
bandwidth. You could have a dozen different ones and it would be noticed
only on the poorest of connections.
So I
have to so something really ugly:
It is a little ugly, but you are trying to do something totally
I don't know that this is any improvement over my original approach,
which was simply to start new lines in a paragraph with a <br /> and
an image to consruct the appearance of an HTML list (I used the height
attribute to bring the lines closer together than 1 em, so don't know
why the value 1.4 works in practice.)
The improvement is that this actually is a list. If you can mark up your
text as what it actually is, and not resort to HTML witchcraft to achieve a
visual effect which should be done in the CSS, it's an improvement. And
since there's some contextual purpose for adjusting the height of a line AND
its bullet, and since a bullet is not moved with its text in the user agent,
the only option to preserve meaningful markup and create the desired visual
effect is to supply a bullet that is pre-adjusted to your visual effect. The
only ugly part is that you need to design a class for each separate type of
position modfication you plan to do - but since each element is being
positioned for a basic contextual reason, it's actually not ugly, it's
meaningful and worthwhile.

If you're not aiming toward visual layout to enhance meaning, but simply
taking a Dadaist approach to the page layout without respect to matching
design to communication of the text, then I cannot help you.
Here was my original approach:

<p class="links">
<img class="arrow" src="arrow.png" />
<a href="doc-a.html">child a</a>
<br />

Jul 20 '05 #26

This discussion thread is closed

Replies have been disabled for this discussion.