Re: [css-d] what font is being called?

2011-01-14 Thread Richard Mason 

On Fri, 14 Jan 2011, Alan Gresley wrote

I am not a programmer and I wouldn't know the first thing about 
building a UA since I not even sure what web language or languages are 
involved in the process.


C++

--
Richard Mason
http://www.emdpi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Styling Image Links

2011-01-14 Thread Gates, Jeff 
I have applied a style to my links with this css:

   #right a:link {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:visited {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:hover {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:active {text-decoration: none;
border-bottom: dotted 1px #666;}

This puts a nice dotted line under each link. This looks nice for text but I 
don't want it showing under my image links. I've tried all sorts of ways of 
styling image links without the border-bottom but the dotted line always shows 
up.

The class of one subset of image links is download-file. I've tried styling 
that like this:
.download-file {text-decoration: none;  border-bottom: none; } and various 
variants like:
.download-file a {text-decoration: none;  border-bottom: none;} plus others. 
But none seem to override the #right a styles.

Here's the code that surrounds such an image (this code is being generated by 
the cms from a database):
div class=item-file image-jpega class=download-file 
href=/omeka/files/download/52/fullsize /
/a/div

I'd love to have a style for all linked images that eliminate the border-bottom 
dotted line. Any

Jeff


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling Image Links

2011-01-14 Thread Jukka K. Korpela 

Gates, Jeff wrote:


I have applied a style to my links with this css:

  #right a:link {text-decoration: none;
   border-bottom: dotted 1px #666;}

[...]

This puts a nice dotted line under each link.


Interesting, though it might be confused, by some visitors, with dotted 
underline of abbreviations or acronyms.



This looks nice for
text but I don't want it showing under my image links.


There's no way in CSS, as currently defined and implemented, to define a 
selector that selects elements on the basis of their content - like those 
link elements that contain an img element. So need a workaround that 
overrides the settings on the basis of a class set on the link elements (or 
their parents). And that seems to be what you're doing...:



The class of one subset of image links is download-file. I've tried
styling that like this: .download-file {text-decoration: none;
border-bottom: none; } and various variants like: .download-file a
{text-decoration: none;  border-bottom: none;} plus others. But none
seem to override the #right a styles.


A URL would help, but it seems that your selectors are not specific enough. 
The selector

#right a:link
is more specific than
.download-file
or even
.download-file a
and therefore runs over them when there is a conflict.

The clean approach is to use selectors that are more specific than those in 
rules that are to be overridden. E.g.

#right a.download-file:link { border-bottom: none; }

A simpler but somewhat rude way is to use !important:
.download-file:link { border-bottom: none !important; }

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


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling Image Links

2011-01-14 Thread Germán Martínez 
Hi Jeff,

it's not working because the selector #right a  has a higher specificity than 
.download-file.
I'm assuming that those images are also inside the #right element, then you 
should use:

#right a.download-file  {
border-bottom: none;
}

Hope that helps

On Jan 14, 2011, at 9:35 AM, Gates, Jeff wrote:

 I have applied a style to my links with this css:
 
   #right a:link {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:visited {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:hover {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:active {text-decoration: none;
border-bottom: dotted 1px #666;}
 
 This puts a nice dotted line under each link. This looks nice for text but I 
 don't want it showing under my image links. I've tried all sorts of ways of 
 styling image links without the border-bottom but the dotted line always 
 shows up.
 
 The class of one subset of image links is download-file. I've tried styling 
 that like this:
 .download-file {text-decoration: none;  border-bottom: none; } and various 
 variants like:
 .download-file a {text-decoration: none;  border-bottom: none;} plus others. 
 But none seem to override the #right a styles.
 
 Here's the code that surrounds such an image (this code is being generated by 
 the cms from a database):
 div class=item-file image-jpega class=download-file 
 href=/omeka/files/download/52/fullsize /
 /a/div
 
 I'd love to have a style for all linked images that eliminate the 
 border-bottom dotted line. Any
 
 Jeff
 
 
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



Germán Martínez, UX Designer

http://martinez.pe



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling Image Links

2011-01-14 Thread Gates, Jeff 
On 1/14/11 10:07 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:

The clean approach is to use selectors that are more specific than those in
rules that are to be overridden. E.g.
#right a.download-file:link { border-bottom: none; }

On 1/14/11 10:11 AM, Germán Martínez ger...@martinez.pe wrote:

it's not working because the selector #right a  has a higher specificity than 
.download-file.
I'm assuming that those images are also inside the #right element, then you 
should use:

#right a.download-file  {
border-bottom: none;
}


Thanks to both of you. That worked.

One of the variants I used was the more specific syntax using the #right id. 
However, my syntax was wrong. I had

#right download-file a {
border-bottom: none;
}

Jeff
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling Image Links

2011-01-14 Thread Shawn Lawler 


On 1/14/2011 9:13 AM, Gates, Jeff wrote:

On 1/14/11 10:07 AM, Jukka K. Korpelajkorp...@cs.tut.fi  wrote:

The clean approach is to use selectors that are more specific than those in
rules that are to be overridden. E.g.
#right a.download-file:link { border-bottom: none; }

On 1/14/11 10:11 AM, Germán Martínezger...@martinez.pe  wrote:

it's not working because the selector #right a  has a higher specificity than 
.download-file.
I'm assuming that those images are also inside the #right element, then you 
should use:

#right a.download-file  {
border-bottom: none;
}


Thanks to both of you. That worked.

One of the variants I used was the more specific syntax using the #right id. 
However, my syntax was wrong. I had

#right download-file a {
border-bottom: none;
}

Jeff


If you're interested in some further information on specificity this 
might be an appropriate jumping off point:


http://meyerweb.com/eric/css/link-specificity.html

Shawn
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] slight layout change: center numbers in circles.

2011-01-14 Thread Bob Rosenberg 
At 08:17 +0200 on 01/11/2011, Jukka K. Korpela wrote about Re: 
[css-d] slight layout change: center numbers in circles:



Bob Rosenberg wrote:


You can also just use the numbers in the U+2776-U+2793 range which
will give you 1-10 as Serif numbers in black or white circles as well
as Sans-Serif 1-10 in black circles. Why fool around when the
characters exist in your fonts?


On the theoretical side: because these characters are dingbats, 
i.e. specific graphics encoded as characters in a technical sense 
but not true text characters.


On the practical side: because they mostly _don't_ exist in fonts. 
See the short font list at

http://www.fileformat.info/info/unicode/char/2776/fontsupport.htm
People's computers may have other fonts containing dingbats, but a) 
the appearances may be surprising and b) those fonts may have 
non-Unicode encodings.


You are looking at the situation backwards. Admittedly the characters 
do not exist in every font. This does not however prevent them from 
being displayed. So long as the font-family that is active when the 
#x; entry is encountered AND one of the fonts listed exists on 
the user's system, the character SHOULD be displayed. I am not sure 
what the rules are when the first selected font does not contain the 
character but a subsequent one does (ie: Will it search the 
subsequent fonts for the character or just give up since it has found 
a prior font that is usable). The best solution is to ONLY list fonts 
that contain the needed character. Also make sure that for each 
platform (Mac, Windows, Linux) you list a system font with the 
character (ie: Those Fonts that are common to more than one platform 
or are always installed on a platform).


For Windows and Macintosh listing Arial Unicode MS, ITC Zapf 
Dingbats, and Zapf Dingbats should insure that you will always find 
at least one available font on the user's system. I am not sure what 
font to use for Linux but I think that a Zapf Dingbats font exists 
there and will be installed.


Note the to insure that the first available font is used, you should 
declare a CSS class (such as dingbat) that lists ONLY the fonts with 
the characters and code the #x; as span 
class=dingbat#x;/span.


I hope  this helps and explains my suggestion.



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


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/