Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Property: content

Reply
Thread Tools

CSS Property: content

 
 
Ari Heino
Guest
Posts: n/a
 
      03-11-2009
I want to add the › (&rsaquo symbol as the list item marker in
my inline style navigation list. Of course I can do that by writing

<ul id="navi">
<li>› <a href="cv.html">CV</a></li>
</ul>

in html and

#navi li {
display: inline;
}

in css. I'd like to insert the marker with something like

#navi li:before {
content: "The desired marker goes here";
}

in the css (alas, not supported by IE) to avoid the messy coding but

#navi li:before {
content: "›";
}

or similar doesn't work; it inserts the entity itself, not the symbol it
represents. Is there a way to make it work (without javascript)? I guess
it's not wise to type the actual symbol itself in the stylesheet.

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      03-11-2009
Ari Heino wrote:

> I want to add the › (&rsaquo symbol as the list item marker in
> my inline style navigation list.


That's not a particularly good idea, because that character is - at least
primarily - a quotation mark in some languages. There are many other
characters that can be used as list markers without such possibility of a
confusion.

> <li>› <a href="cv.html">CV</a></li>


That would be the practical approach, if you really wanted to use such
markers.

> I'd like to insert the marker with something like
>
> #navi li:before {
> content: "The desired marker goes here";
> }
>
> in the css (alas, not supported by IE) to avoid the messy coding but
>
> #navi li:before {
> content: "›";
> }
>
> or similar doesn't work; it inserts the entity itself, not the symbol
> it represents.


I don't think the HTML coding is messy, though it might be called a little
illogical. And as you say, the CSS method does not work on IE, so what would
be the point in practice?

> Is there a way to make it work (without javascript)? I
> guess it's not wise to type the actual symbol itself in the
> stylesheet.


There's no reason why you could not use the symbol itself if the encoding of
the document is properly chosen and declared.

But you can use the construct "\203A" in CSS. (Check CSS specs for details
on "\" escapes.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
 
Ari Heino
Guest
Posts: n/a
 
      03-11-2009
Jukka K. Korpela kirjoitti seuraavasti:
> Ari Heino wrote:
>
>> I want to add the › (&rsaquo symbol as the list item marker in
>> my inline style navigation list.

>
> That's not a particularly good idea, because that character is - at
> least primarily - a quotation mark in some languages.


Well, in many countries bullets are used to kill something - and still
they're the default list markers without any confusion (bad and a
very language-dependent joke)

> There are many
> other characters that can be used as list markers without such
> possibility of a confusion.


True, but they don't have quite the looks I want this time.

>> to avoid the messy coding

>
> I don't think the HTML coding is messy


Well the code isn't, but if you're looking at the page css turned of,
THEN it looks messy for sure: bullets AND the quotation signs together
aren't pretty. I want EITHER the new symbol OR the default - not both at
the same time.

> And as you say, the CSS method does not work on IE, so
> what would be the point in practice?


There is none - damn IE!

> There's no reason why you could not use the symbol itself if the
> encoding of the document is properly chosen and declared.


I'm not gonna even ask about this, would make me a total ass (which I
just did, but I don't mind - I'm just a self-taught amateur).

> But you can use the construct "\203A" in CSS. (Check CSS specs for
> details on "\" escapes.)


I'll stick with that, that's what I was looking for, thanks. Is there a
table of those constructs somewhere in your pages also?

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      03-11-2009
Ari Heino wrote:

>> I don't think the HTML coding is messy

>
> Well the code isn't, but if you're looking at the page css turned of,
> THEN it looks messy for sure: bullets AND the quotation signs together
> aren't pretty. I want EITHER the new symbol OR the default - not both
> at the same time.


Right, but you can (with the usual CSS caveats) achieve that by using
list-style-type: none
Alternatively, you could use markup other than list markup. This would not
be quite logical, but people commonly use constructs where a logical list is
marked up simply as sequence of <div> elements, or <span> elements, or <a>
elements, or something like that.

>> But you can use the construct "\203A" in CSS. (Check CSS specs for
>> details on "\" escapes.)

>
> I'll stick with that, that's what I was looking for, thanks. Is there
> a table of those constructs somewhere in your pages also?


Well, each formalism (or "formal language") tends to have its own syntax for
"character escapes", often resembling each other just enough to confuse us.
But I've tried to summarize some of them in the list at
http://www.cs.tut.fi/~jkorpela/chars.html#esc

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
+mrcakey
Guest
Posts: n/a
 
      03-11-2009
"Jukka K. Korpela" <(E-Mail Removed)> wrote in message
news:lRVtl.2191$(E-Mail Removed)...
> Ari Heino wrote:
>
>>> I don't think the HTML coding is messy

>>
>> Well the code isn't, but if you're looking at the page css turned of,
>> THEN it looks messy for sure: bullets AND the quotation signs together
>> aren't pretty. I want EITHER the new symbol OR the default - not both
>> at the same time.

>
> Right, but you can (with the usual CSS caveats) achieve that by using
> list-style-type: none


OP was making the point that if the user has stylesheets turned off, they'll
see both the default list markers and the HTML list marker so setting the
list-style-type won't have any effect in that scenario. Unless their user is
perverse enough to change their default stylesheet every time they visit his
site. In any case, the HTML approach rather goes against the grain of
separating structure and style doesn't it?

Unless there's some great reason to have the specific character encoded in
the document, would a more pragmatic solution not be to make a small GIF of
the character and use list-style: image?

--
+mrcakey
www.twitter.com/mrcakey



 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      03-11-2009
Jukka K. Korpela kirjoitti seuraavasti:
> Ari Heino wrote:
>> if you're looking at the page css turned of,


Did you miss that part accidentally?

>> bullets AND the quotation signs together
>> aren't pretty. I want EITHER the new symbol OR the default - not both
>> at the same time.

>
> Right, but you can (with the usual CSS caveats) achieve that by using
> list-style-type: none


I have this line. But if css is turned off, this wont obviously help.
But again, who surfs css turned off? Of course, there may be someone who
has forced the bullets on (it's possible, isn't it?), but then it'll be
his/her headache.
And other media than normal computers are a whole new thing, I guess.

> Alternatively, you could use markup other than list markup. This would
> not be quite logical, but people commonly use constructs where a logical
> list is marked up simply as sequence of <div> elements, or <span>
> elements, or <a> elements, or something like that.


That may soon sound more reasonable, although it loses the semantics of
being a navigation LIST. It somehow hurts, but what can you do.

> Well, each formalism (or "formal language") tends to have its own syntax
> for "character escapes", often resembling each other just enough to
> confuse us. But I've tried to summarize some of them in the list at
> http://www.cs.tut.fi/~jkorpela/chars.html#esc


I'll take a look.

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      03-11-2009
Thanks, you seemed to think what I was thinking

+mrcakey kirjoitti seuraavasti:
> Unless there's some great reason to have the specific character encoded in
> the document, would a more pragmatic solution not be to make a small GIF of
> the character and use list-style: image?


True, but being a perfectionist, I don't like the gifs being the same
size all the time if someone wants to zoom the text. I like the bullets
or whatever symbols to get bigger, also!

I make my world a hard place to live in...

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      03-11-2009
+mrcakey wrote:

> OP was making the point that if the user has stylesheets turned off,
> they'll see both the default list markers and the HTML list marker so
> setting the list-style-type won't have any effect in that scenario.


Right, sorry, I missed that part.

> In any case, the HTML
> approach rather goes against the grain of separating structure and
> style doesn't it?


In some sense yes. Although list bullets are comparable to sentence
punctuation, which we handle at character level and not markup, there is
much more stylistic variation in the shape of bullets than in periods,
commas, etc.

> Unless there's some great reason to have the specific character
> encoded in the document, would a more pragmatic solution not be to
> make a small GIF of the character and use list-style: image?


A pragmatic problem with that is it is very difficult if not impossible to
position the images properly then. Their placement is at the mercy of the
browser. Some people use background images instead (reserving some spacing
on the left of each item and using a non-repeating background image, for
which you can set the detailed position too), but they have some nasty
features - not rendered when image loading is off, not rendered when CSS is
off, not printed on paper (usually), not scaling according to font size,
etc.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-11-2009
In article <gp98g6$1ad7$(E-Mail Removed)>,
Ari Heino <(E-Mail Removed)> wrote:

> Well the code isn't, but if you're looking at the page css turned of,
> THEN it looks messy for sure: bullets AND the quotation signs together
> aren't pretty. I want EITHER the new symbol OR the default - not both at
> the same time.


Consider the strategy here, then, of using a table. And before jumping
to any conclusion, please consider:

Tables are nearly if not always the right and most suitable tool to
display lists when one wants to draw attention to relationships between
the list items in the different lists. In this last sentence, I use the
phrases "lists" and "list items" in their ordinary English meanings and
not in such a way that should spark anyone to leap up and down.

A single list can be displayed in a one col table containing, or not
containing because it is obvious, a TH to inform that the items below
are a list of things the husband, for example, must fetch*. Or with no
TH because it is too obvious from the context. A table is up to the
task. It is generally not the *best* tool for the job. But it is not an
*unsuitable* tool. In your case, it is perfect. No danger of the
limitations of ULs for lists exhibiting themselves.

-----------------
* A long time ago, I would visit a long married couple who lived in a
flat together but who had not talked to each other for 30 years. We kids
were absolutely delighted with this and we would eagerly agree to visit
just to see such an extraordinary thing. The hosts were always there at
the dining table and in the lounge with their visitors and we were
expressly forbidden to giggle or remark on the situation by our parents.
These days, they could be imagined to email each other for essential
communications!

--
dorayme
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      03-12-2009

Ari Heino wrote:
>
> But if css is turned off, this wont obviously help.
> But again, who surfs css turned off?


FYI, I disable CSS a lot more often than should be necessary. For me,
it's most often required to make dee-ziner sites usable, though even
that doesn't always work.

--
Berg
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
error: Only Content controls are allowed directly in a content page that contains Content controls. hazz ASP .Net 6 06-09-2010 01:54 PM
limit on number of content placeholders(which are editable in content pages) in master page nemesis.saurabh@gmail.com ASP .Net 0 05-25-2006 04:44 AM
Error: "Content controls can only be used in a content page" J.Edwards ASP .Net 0 01-20-2006 11:43 AM
[XML Schema] Content type of complex type definition with complex content Stanimir Stamenkov XML 2 10-25-2005 10:16 AM
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">? TheKeith HTML 20 10-29-2003 11:56 AM



Advertisments