Re: [css-d] Font-face, alignment issue similar to images

[Nancy Seeger]

On Jan 11, 2011, at 6:29 AM, css-d-requ...@lists.css-discuss.org wrote:
From: Andrew Cunningham 

Nancy, you are mixing encodings within a document. If you do want to
use a character rather than an image, you should use the appropriate
Unicode character, considering the website is UTF-8: U+260E
* * * * * * * * * 

Hi Andrew, this took a bit to find out, the web font is based on ASCII, should 
be readable by all unless I am misunderstanding but I double checked with the 
vendor and it's not Unicode based.


* * * * * * * * * 
Look for a font that has this character. It will also allow browsers
on various operating systems to sue font fallback mechanisms if the
browser can't use web fonts.
* * * * * * * * * 

That would be great. Unfortunately after some research, Wingdings uses a "(" 
for the phone character which is not the same character as "t" for 
CombiSymbols1 for producing the phone. I'm not sure if the character is the 
same for each operating system also for Wingdings? It looks like Ubuntu has a 
comment box instead for "(". 

With this web font, it is the letter "t" which renders a phone with 
CombiSymbols1, which as a fall back if the font were not to load, makes some 
relational sense since it is for the purposes of highlighting a phone number.

I would have loved to have gone with an image, but IE6 was my issue on this one 
can would render most alpha transparency pngs except when included in an "li" 
tag with unitpngfix.js assistance. Its a great script, but with all of the 
WordPress ID + Class combos inherit in the default theme, I didn't want to 
spend more time on just a phone graphic. I was assuming the combination of ID + 
Class was too much for IE6 to handle. Web fonts in this case is a life saver - 
thanks all for helping me find a means to getting it to align.

Many thanks,
Nancy

__
css-discuss [cs...@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] what font is being called?

[Richard Mason]

On Wed, 12 Jan 2011, Philippe Wittenbergh wrote
Both services will give you an idea of how the aspect-ratio of the 
fallback font will relate to the first-choice font. That is the point. 
Without using font-size adjust, it doesn't matter much beyond that (and 
even with font-size-adjust, it doesn't really matter).


OK, so next time instead of:
If you want/need to know the aspect ratio of a font, this service can 
help


You could say:
"If you want/need to know the aspect ratio of a font, both services can 
help you get the completely false idea of how the aspect-ratio of the 
fallback font will relate to the first-choice font, but it doesn't 
matter so I wouldn't bother anyway."


Interesting :-)

--
Richard Mason
http://www.emdpi.com
__
css-discuss [cs...@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] what font is being called?

[Rory Bernstein]

> On Jan 12, 2011, at 11:32 AM, Richard Mason wrote:
> 
>> On Wed, 12 Jan 2011, Philippe Wittenbergh wrote
>> 
>>> If you want/need to know the aspect ratio of a font, this service can help 
>>> (for fonts installed on your local drives):
>>> http://fontdeck.com/font-size-adjust.html
>>> or this page:
>>> http://brunildo.org/test/fontlist3.html
>> 
>> Both wrong because the aspect ratio of a font is not fixed but varies with 
>> font size.
>> At http://www.emdpi.com/cssfontsizeadjust.html I have a download with graphs 
>> of aspect ratio v font size (10px to 50px) for a number of fonts.
> 
> Both services will give you an idea of how the aspect-ratio of the fallback 
> font will relate to the first-choice font. That is the point. Without using 
> font-size adjust, it doesn't matter much beyond that (and even with 
> font-size-adjust, it doesn't really matter).
> 
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/

Thank you everyone for all the info about fallback fonts, aspect-ratios and 
lots of stuff that overwhelms me! I will look into those firebug add-ons. I 
appreciate all the feedback about my font issue.
Rory

__
css-discuss [cs...@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] what font is being called?

[Philippe Wittenbergh]

On Jan 12, 2011, at 11:32 AM, Richard Mason wrote:

> On Wed, 12 Jan 2011, Philippe Wittenbergh wrote
> 
>> If you want/need to know the aspect ratio of a font, this service can help 
>> (for fonts installed on your local drives):
>> http://fontdeck.com/font-size-adjust.html
>> or this page:
>> http://brunildo.org/test/fontlist3.html
> 
> Both wrong because the aspect ratio of a font is not fixed but varies with 
> font size.
> At http://www.emdpi.com/cssfontsizeadjust.html I have a download with graphs 
> of aspect ratio v font size (10px to 50px) for a number of fonts.

Both services will give you an idea of how the aspect-ratio of the fallback 
font will relate to the first-choice font. That is the point. Without using 
font-size adjust, it doesn't matter much beyond that (and even with 
font-size-adjust, it doesn't really matter).

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] what font is being called?

[Richard Mason]

On Wed, 12 Jan 2011, Philippe Wittenbergh wrote

If you want/need to know the aspect ratio of a font, this service can 
help (for fonts installed on your local drives):

http://fontdeck.com/font-size-adjust.html
or this page:
http://brunildo.org/test/fontlist3.html


Both wrong because the aspect ratio of a font is not fixed but varies 
with font size.
At http://www.emdpi.com/cssfontsizeadjust.html I have a download with 
graphs of aspect ratio v font size (10px to 50px) for a number of fonts.


--
Richard Mason
http://www.emdpi.com
__
css-discuss [cs...@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] what font is being called?

[Duncan Hill]

On Tue, 11 Jan 2011 19:32:31 -, Rory Bernstein  
 wrote:



Hello,

When I have a series of fonts being called in a font-family rule, how do  
I know which one is the one being chosen?


On this page:
http://mcgivney.ehclients.com/locations/

The font should be the Titillium for the whole page, but of course it  
gets complicated when there are browsers that cannot show this font and  
it falls back to the next font in the stack, which is Tahoma, then Arial.


How do I know which one the browser is giving me?


'FireFontFamily' [1] addon for the Firebug [2] extension with FireFox

[1] https://addons.mozilla.org/en-US/firefox/addon/111672/
[2] https://addons.mozilla.org/en-US/firefox/addon/1843/

Duncan
__
css-discuss [cs...@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] what font is being called?

[Philippe Wittenbergh]

On Jan 12, 2011, at 4:32 AM, Rory Bernstein wrote:

> On this page: 
> http://mcgivney.ehclients.com/locations/
> 
> The font should be the Titillium for the whole page, but of course it gets 
> complicated when there are browsers that cannot show this font and it falls 
> back to the next font in the stack, which is Tahoma, then Arial. 
> 
> How do I know which one the browser is giving me? 

Why do you worry so hard about the font the browser will actually see ? As 
Philip noted, Css is a bout suggestions…

The best you can do is provide adequate fall-back fonts; ideally, you'd use a 
fall-back font with similar metrics (esp aspect-ratio) – insuring a similar 
flow of text on the page. If you want/need to know the aspect ratio of a font, 
this service can help (for fonts installed on your local drives):
http://fontdeck.com/font-size-adjust.html
or this page:
http://brunildo.org/test/fontlist3.html

The second one needs Flash installed. Best, most accurate results with a Gecko 
1.9.0 or newer browser in both cases. Opera returns bogus results last I 
checked.

For fonts not installed locally, the font-squirel generator informs you of the 
aspect-ratio of the fonts when uploading:
http://www.fontsquirrel.com/fontface/generator

PS - Titillium displays quite poorly on windows XP computers with ClearType 
turned off.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] form/ul layout weird in IE

[David Laakso]

On 1/11/11 6:02 PM, Rich M wrote:
I've revamped some forms in my application, but the display is 
unexpected in IE8 / Windows 7 for me. I assume it's equally weird on 
other OS and probably IE versions.


Thanks,
Rich



Post uri to list. Thanks. ~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [cs...@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] form/ul layout weird in IE

[Philip Taylor (Webmaster, Ret'd)]

Rich M wrote:

Hi,

I've revamped some forms in my application, but the display is
unexpected in IE8 / Windows 7 for me. I assume it's equally weird on
other OS and probably IE versions.



Would that be :

https://www.moremagicpoints.com/ ?

If so, Seamonkey doesn't like its certificate, so I'm afraid
I can't look at it to see if I can help.

Philip Taylor
__
css-discuss [cs...@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] form/ul layout weird in IE

[Rich M]

Hi,

I've revamped some forms in my application, but the display is 
unexpected in IE8 / Windows 7 for me. I assume it's equally weird on 
other OS and probably IE versions.


If you view the page in FireFox, you should see what I expected. A form 
with a layout specified by margin-left and margin-right being 20%. The 
then  fill the width of this area. The label in firefox is rounded 
for best visual appeal, but the overhang is intention across browsers.


In IE it seems that the right margin isn't exactly accounted for? or 
something along those lines. The width is not what I expected. Also, I 
don't think my method of lining up the submit buttons on the bottom of 
the form works very well if at all.


The HTML validates pretty well minus one hacky error.

Any advice would be much appreciated.

Thanks,
Rich
__
css-discuss [cs...@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] very small font size on small devices

[Sandy]

The OperaMini "simulator" is quite good.

Re: [css-d] iframes and CSS

[Gabriele Romanato]

For overflow, try to give IE the declarations overflow-x/overflow-y.  
They should work. Also, first turn the iframe into a block level  
element with 'display: block'. Iframes are inline-block elements by  
default. :-)



http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [cs...@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] very small font size on small devices

[David Laakso]

On 1/11/11 4:30 PM, Sandy wrote:




The OperaMini "simulator" is quite good.

Re: [css-d] very small font size on small devices

[Sandy]

So - few questions.
Are there simulators out there that are more reliable in showing what
shows up on the various devices?



The OperaMini "simulator" is quite good.
Viewing the page in a small window

in Safari and WebKit is very helpful. Same in Opera.
shrinking the window down in Safari 5.0.2 seems to get the small_devices 
style sheet going, but not in Opera 6.0.3



Simulators are handy but they really do
not offer direct user experience with functionality, usability, and
readability
really true. I thought everything was fine 'til a friend with an iphone 
checked it out and let me know about the tiny text.


will check out your media queries link and try and see if mine is right.

thanks again,
S.
__
css-discuss [cs...@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] very small font size on small devices

[David Laakso]

On 1/11/11 2:48 PM, Sandy wrote:
I am trying to come up with a style sheet for a site I am working on 
that addresses small devices.


Here is a typical page:
http://cantoraccess.com/aboutus/aboutus.html

Here are style sheets:
http://cantoraccess.com/css/ca.css
http://cantoraccess.com/css/menu.css
http://cantoraccess.com/css/small_device.css

it looks fine on the simulators I've tried:
http://iphonetester.com/
http://app.protofluid.com/

but when I use browsercam to take screen shots on most devices the 
font size gets really, really small.




I signed up with up a browsercam  group for the same reason and, 
frankly, this has proven to be a waste of money and a grave disappointment.






http://www.browsercam.com/public.aspx?proj_id=539598

So - few questions.
Are there simulators out there that are more reliable in showing what 
shows up on the various devices?



The OperaMini "simulator" is quite good. 
Viewing the page in a small window 
in Safari and WebKit is very helpful. Same in Opera. Best is to ask 
friends and or on the various lists to check the site live in whatever 
device they may have available .  Simulators are handy but they really 
do not offer direct user experience with functionality, usability, and 
readability






Why is the type so small?

How can I fix it?



Use media queries and set no font smaller than default [100%].






thanks all,
Sandy


Best,
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [cs...@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] help for rendering pages correctly on differents browsers

[Jonny Stephens]

On 11 Jan 2011, at 10:46, olivia antonin wrote:
> I have a real problem with my web pages, basically They don't render the same 
> in Safari and firefox. The padding-bottom of the div information in the 
> "home" page doesn't render the same in firefox as in Safari, and the same 
> problem occur for the "about us" page too: the padding bottom of the div 
> bonus has a white space.  What do you think may be the issue. Please help 
> me...I'm pretty new in using CSS and need some help.
> 
> here are the link for the home page: 
> http://www.expressionofmind.com/home.html about us 
> page:http://www.expressionofmind.com/about.html and the link for the css 
> files: http://www.expressionofmind.com/css.html

[supplied links fixed]

I'm afraid the problem lies in your expectations. Consistent alignment of the 
bottom of elements whose content is variable, in this case text in two columns, 
by use of padding or margins is not attainable. Not only do different browsers 
render fonts at different heights and widths, but you have no control over the 
base size. Zooming Safari in Zoom Text Only mode will show that the columns do 
not survive resizing even in that browser.

A simple way to provide a background on the right column that continues to the 
footerwould be the "Faux Column" method. This involves creating a background 
image and applying it to vertically repeat on the element containing both main 
content and sidebar, in this case #wrappercolum .

The image would need to be 800px wide and, because repeating, only 10px or so 
high, coloured white for the first 510px and #0D2557 for the remaining 290px.

The css would be

#wrappercolum { background: #fff url(path/to/image.png) repeat-y; }

To maintain a 10px white space between the divs in the sidebar you could use a 
border on the upper div. e.g.

#team {
   background-color: #558D96;
   border-bottom: 10px solid #FF; /* added */
   line-height: 18px;
   padding-top: 10px;
}

Hope this helps.

Jonny
__
css-discuss [cs...@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] what font is being called?

[David Laakso]

On 1/11/11 3:10 PM, Rory Bernstein wrote:

On Jan 11, 2011, at 3:08 PM, David Laakso wrote:


On 1/11/11 2:32 PM, Rory Bernstein wrote:

Hello,

When I have a series of fonts being called in a font-family rule, how do I know 
which one is the one being chosen?

On this page:
http://mcgivney.ehclients.com/locations/

The font should be the Titillium for the whole page, but of course it gets 
complicated when there are browsers that cannot show this font and it falls 
back to the next font in the stack, which is Tahoma, then Arial.

How do I know which one the browser is giving me?

Are there any places on the above URL where it is NOT showing Titillium?

Thanks!
Rory



Titillium has easily distinguishable glyphs that are easily distinguishable 
from Tahoma/Arial-- it sometimes helps to use +2 font-scaling if you have set 
the fonts smaller than default. @fontface is well supported [assuming you have 
set it correctly ] in IE 6/7/8 and among the current versions of compliant 
browsers, including IE9. @fontface is not supported in Camino -- but then you 
already new that -- nor, in earlier versions of browsers prior to the 
introduction of the CSS @fontface module.

Titillium


Best,
~d


David, can you tell me how to use +2 font scaling? What does that mean? Thanks 
for your reply, very  helpful as always.
Rory



It means make the type bigger so that you can see it and read it more 
easily [ and so that you can play god and break nearly every site on the 
Web when doing so:-) ].

Fron the keyboard:
PC
Press the ctrl key and bang the +[plus] key 2 or 3 times
Mac
Press the apple key and bang the +[plus] key 2 or 3 times
IE
Depends on version, IE6 is:
View>Text Size>Largest

Best,
~d






--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [cs...@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] what font is being called?

[David Laakso]

On 1/11/11 2:32 PM, Rory Bernstein wrote:

Hello,

When I have a series of fonts being called in a font-family rule, how do I know 
which one is the one being chosen?

On this page:
http://mcgivney.ehclients.com/locations/

The font should be the Titillium for the whole page, but of course it gets 
complicated when there are browsers that cannot show this font and it falls 
back to the next font in the stack, which is Tahoma, then Arial.

How do I know which one the browser is giving me?

Are there any places on the above URL where it is NOT showing Titillium?

Thanks!
Rory




Titillium has easily distinguishable glyphs that are easily distinguishable 
from Tahoma/Arial-- it sometimes helps to use +2 font-scaling if you have set 
the fonts smaller than default. @fontface is well supported [assuming you have 
set it correctly ] in IE 6/7/8 and among the current versions of compliant 
browsers, including IE9. @fontface is not supported in Camino -- but then you 
already new that -- nor, in earlier versions of browsers prior to the 
introduction of the CSS @fontface module.

Titillium


Best,
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [cs...@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] very small font size on small devices

[Sandy]

I am trying to come up with a style sheet for a site I am working on 
that addresses small devices.


Here is a typical page:
http://cantoraccess.com/aboutus/aboutus.html

Here are style sheets:
http://cantoraccess.com/css/ca.css
http://cantoraccess.com/css/menu.css
http://cantoraccess.com/css/small_device.css

it looks fine on the simulators I've tried:
http://iphonetester.com/
http://app.protofluid.com/

but when I use browsercam to take screen shots on most devices the font 
size gets really, really small.


http://www.browsercam.com/public.aspx?proj_id=539598

So - few questions.
Are there simulators out there that are more reliable in showing what 
shows up on the various devices?


Why is the type so small?

How can I fix it?

thanks all,
Sandy
__
css-discuss [cs...@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] font size on pc screen vs mobile phone

[David Laakso]

On 1/11/11 2:00 PM, bho...@aol.com wrote:

Hi.  I'm trying to write something in a div that measures 400px  wide.  It
looks fine on my computer screen, but on an iPhone, the text  exceeds the
div.  It looks fine on the Droid.  Is there anything I can  do?
Thanks,
Bruce




Desktop and handsets read the media query. Set nothing smaller than 
default [100%].


@media only screen and (max-width:480px),only screen and 
(max-device-width:480px)

{html, body{font:100%/1.4 Helvetica,Arial,sans-serif;}
#your_division {width: 100%;}
#your_division p {font-size: 100%}
}



Best,
~d

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [cs...@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] iframes and CSS

[Germán Martínez]

Thanks Gabriele!

For overflow, I'm having problems with IE6, 7 and 8. (but I don't really care 
about IE6 :P)

On Jan 11, 2011, at 1:49 PM, Gabriele Romanato wrote:

> Hi!
> You should use:
> 
> border="0" which is valid. For overflow, which version of IE are you using?
> 
> Bye
> 
> http://www.css-zibaldone.com
> http://www.css-zibaldone.com/test/  (English)
> http://www.css-zibaldone.com/articles/  (English)
> http://onwebdev.blogspot.com/  (English)
> 
> 
> 
> 
> 
> 
> 
> 



Germán Martínez, UX Designer

http://martinez.pe



__
css-discuss [cs...@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] what font is being called?

[Philip Taylor (Webmaster, Ret'd)]

Rory Bernstein wrote:


When I have a series of fonts being called in a font-family rule, how do I know 
which one is the one being chosen?


You don't, unless JavaScript can tell you (see below).


On this page:
http://mcgivney.ehclients.com/locations/

The font should be the Titillium for the whole page, but of course it gets 
complicated when there are browsers that cannot show this font and it falls 
back to the next font in the stack, which is Tahoma, then Arial.

How do I know which one the browser is giving me?


Unless JavaScript can disclose the answer, I fear that you can't.


Are there any places on the above URL where it is NOT showing Titillium?


In some browser, under some operating system, when the moon is
in the ascendant and Jupiter aligns with Mars, almost certainly.
In my browser, under Win/XP;SP3, I still don't know, since
I don't know what Titillium looks like and I don't know if
I'd be able to visually differentiate between it and
a substitute.  I'll be very happy to send you a screenshot
(or a PDF) if you think that might help, but my honest
suggestion is "stop worrying".  CSS is about suggestions,
not rules.

Philip Taylor
__
css-discuss [cs...@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] what font is being called?

[Rory Bernstein]

Hello,

When I have a series of fonts being called in a font-family rule, how do I know 
which one is the one being chosen?

On this page: 
http://mcgivney.ehclients.com/locations/

The font should be the Titillium for the whole page, but of course it gets 
complicated when there are browsers that cannot show this font and it falls 
back to the next font in the stack, which is Tahoma, then Arial. 

How do I know which one the browser is giving me? 

Are there any places on the above URL where it is NOT showing Titillium?

Thanks!
Rory



__
css-discuss [cs...@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] font size on pc screen vs mobile phone

[Felix Miata]

On 2011/01/11 14:00 (GMT-0500) bho...@aol.com composed:


Hi.  I'm trying to write something in a div that measures 400px  wide.  It
looks fine on my computer screen, but on an iPhone, the text  exceeds the
div.  It looks fine on the Droid.  Is there anything I can  do?


Set widths in em instead of px. You have no idea how big a px is, while it is 
all but certain that an em relates to a suitably legible font size. e.g., set 
that 400px width instead to 25 em, and it will nevertheless be displayed 
400px wide in most desktop browsers, while considerably less wide on most 
handheld toys. A side benefit is that it will be wider than 400px when it 
needs to be, such as on TV and other high resolution screens.

--
"How much better to get wisdom than gold, to choose
understanding rather than silver." Proverbs 16:16 NKJV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [cs...@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] font size on pc screen vs mobile phone

[BHomis]

Hi.  I'm trying to write something in a div that measures 400px  wide.  It 
looks fine on my computer screen, but on an iPhone, the text  exceeds the 
div.  It looks fine on the Droid.  Is there anything I can  do?
Thanks,
Bruce
__
css-discuss [cs...@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] iframes and CSS

[Gabriele Romanato]

Hi!
You should use:

border="0" which is valid. For overflow, which version of IE are you  
using?


Bye

http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [cs...@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] iframes and CSS

[Germán Martínez]

Hi,
I'm having some problems styling iframes, I'm using Facebook & Twitter sharing 
functions and as always IE is ignoring my iframe {border: none; overflow: 
hidden;}.
Right now I'm using frameborder="0" scrolling="no" but that makes my HTML not 
valid.
Any ideas?
Thanks

Germán Martínez, UX Designer
http://martinez.pe



__
css-discuss [cs...@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] Fixed background image

[Chetan Crasta]

On Tue, Jan 11, 2011 at 11:00 PM, Anne Pennington
 wrote:
> Hi Chetan
>
> Thank you so much for this. I guess if I add more space to the right of the
> image more of his head will appear?
>
> Works fine and thank you again.
>
> All best
>
> Annie

Happy to help.
To make more of the head appear (horizontally), remove some of the
space to the left (in the image).

I have CCd your email to the list to inform them that the issue is solved.

~Chetan
__
css-discuss [cs...@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] Textured Background Not Lining Up

[Chetan Crasta]

On Tue, Jan 11, 2011 at 10:53 PM, John Franks  wrote:
> Thanks Chetan, I applied a background:transparent to the #wrapper and
> removed the background image from the #introPanel and all works perfectly
> now thanks. John.
>

Sending your email to the list so that everyone knows that you found
the solution.

~Chetan
__
css-discuss [cs...@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] Fixed background image

[Chetan Crasta]

On Tue, Jan 11, 2011 at 7:02 PM, Anne Pennington
 wrote:

> The site in progress is :
>
> http://www.mauricerowdon.org/site/
>
> and an example of the page which requires fixed  div is
>
> http://www.mauricerowdon.org/site/fiction.htm
>

> But as you will be able to see, the image position is fine vertical, but the
> horizontal position relates to the page, not the div, so moves when you
> resize the page.
>

Hi Annie,

I think I have implemented the behavior you described, see:
http://roughtech.com/t/maurice.html

I put a large empty space on the left of the image and then aligned
the background image horizontally center.
#content {
  background: url("mr_big.jpg") no-repeat fixed center bottom transparent;
}

Cheers,
~Chetan
__
css-discuss [cs...@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] Fixed background image

[David Postill]

On Tue, 11 Jan 2011 13:32:38 +, Anne Pennington wrote:

| I have just returned to the list after a break of about 10 months and  
| immediately have a question to ask.
| 
| I am working on a site that required a fixed background image in a  
| div, as well as one on the page background - the page background is  
| not so important.
| 
| The site in progress is :
| 
| http://www.mauricerowdon.org/site/
| 
| and an example of the page which requires fixed  div is
| 
| http://www.mauricerowdon.org/site/fiction.htm
| 
| I am using :
| 
| 
| 
| #content {
| background: url(images/mr_big.png);
| background-position:bottom right;
| background-repeat: no-repeat;
| background-attachment:fixed;
| min-height:700px;
| height:auto !important;
| }
| 
| 
| 
| But as you will be able to see, the image position is fine vertical,  
| but the horizontal position relates to the page, not the div, so moves  
| when you resize the page.

Seems only to be broken in IE.

I used a variation of http://www.howtocreate.co.uk/fixedBackground.html to
get this working on my website.
-- 
David Postill
Dance your Life - Biodanza in Holland - 
__
css-discuss [cs...@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] Fixed background image

[Anne Pennington]

I have just returned to the list after a break of about 10 months and  
immediately have a question to ask.


I am working on a site that required a fixed background image in a  
div, as well as one on the page background - the page background is  
not so important.


The site in progress is :

http://www.mauricerowdon.org/site/

and an example of the page which requires fixed  div is

http://www.mauricerowdon.org/site/fiction.htm

I am using :



#content {
background: url(images/mr_big.png);
background-position:bottom right;
background-repeat: no-repeat;
background-attachment:fixed;
min-height:700px;
height:auto !important;
}



But as you will be able to see, the image position is fine vertical,  
but the horizontal position relates to the page, not the div, so moves  
when you resize the page.


Any help would be appreciated, I am on the digest so please reply  
directly as well.


Annie

Anne Pennington | Web Design
Digitalplot
e: an...@digitalplot.co.uk
w:  http://www.digitalplot.co.uk
tw: http://twitter.com/digitalplotter




__
css-discuss [cs...@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] Textured Background Not Lining Up

[Chetan Crasta]

> On Tue, Jan 11, 2011 at 4:23 PM, John Franks  wrote:
>>.. Everything lines up great in Internet Explorer (7 & 8 only which is all I 
>>need) and Opera. But if you view the website through Chrome, Firefox and 
>>Safari the lines in the textured background do not line up at the join 
>>between the main donut and the website background.

The cause of the misalignment is the 2px bottom border on div#header.
Another possible fix for the problem is:
#introPanel { margin-top:-2px;padding-top:2px}

Cheers,
~Chetan
__
css-discuss [cs...@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] help for rendering pages correctly on differents browsers

[David Postill]

On Tue, 11 Jan 2011 11:46:55 +0100, olivia antonin wrote:

| 
| Hi there
| I have a real problem with my web pages, basically They don't render the same 
in Safari and firefox. The padding-bottom of the div information in the "home" 
page doesn't render the same in firefox as in Safari, and the same problem 
occur for the "about us" page too: the padding bottom of the div bonus has a 
white space.  What do you think may be the issue. Please help me...I'm pretty 
new in using CSS and need some help.
| 
| here are the link for the home page: 
http://www.expressionofmind.com/home.htmlabout us page: 
http://www.expressionofmind.com/about.htmland the link for the css files: 
http://www.expressionofmind.com/css.html

Your links are broken.

Your html is also broken
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.expressionofmind.com%2Fhome.html
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.expressionofmind.com%2Fabout.htm
-- 
David Postill
Dance your Life - Biodanza in Holland - 
__
css-discuss [cs...@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] Textured Background Not Lining Up

[Chetan Crasta]

On Tue, Jan 11, 2011 at 4:23 PM, John Franks  wrote:
>.. Everything lines up great in Internet Explorer (7 & 8 only which is all I 
>need) and Opera. But if you view the website through Chrome, Firefox and 
>Safari the lines in the textured background do not line up at the join between 
>the main donut and the website background.

Try this
#introPanel {
 /*   background: url("../images/introPanelBackground.gif") no-repeat
scroll left top transparent; */
}
#wrapper
{
background: url("../images/introPanelBackground.gif") no-repeat
scroll left top transparent;
}

Didn't investigate what was causing the misalignment, but the above
CSS seems to fix it :)

Cheers,
~Chetan
__
css-discuss [cs...@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] Textured Background Not Lining Up

[John Franks]

I am building a new website here http://www.danabrahams.com.

Currently I am working on the grey textured background below the dark header.

As you will see I have applied a background image to the  which is 5px 
wide by 802px high, and repeated it along the x axis. My CSS for this is as 
follows:
body.main { background:url(../images/bodyMainBackground.jpg); 
background-repeat:repeat-x; }

I have then tried to continue the textured background into the main intro 
panel, by use of a large background image. My CSS for this is as follows:
#introPanel { background:url(../images/introPanelBackground.gif) left top 
no-repeat; width:960px; height:500px; }

This is all very basic I know. But here is my problem... Everything lines up 
great in Internet Explorer (7 & 8 only which is all I need) and Opera. But if 
you view the website through Chrome, Firefox and Safari the lines in the 
textured background do not line up at the join between the main donut and the 
website background. Can anyone please shed light on why this is, and more 
importantly advise how I can get it to line up across all five of the main 
browsers outlined above?

Thanks in advance, John.  
__
css-discuss [cs...@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] help for rendering pages correctly on differents browsers

[olivia antonin]

Hi there
I have a real problem with my web pages, basically They don't render the same 
in Safari and firefox. The padding-bottom of the div information in the "home" 
page doesn't render the same in firefox as in Safari, and the same problem 
occur for the "about us" page too: the padding bottom of the div bonus has a 
white space.  What do you think may be the issue. Please help me...I'm pretty 
new in using CSS and need some help.

here are the link for the home page: 
http://www.expressionofmind.com/home.htmlabout us page: 
http://www.expressionofmind.com/about.htmland the link for the css files: 
http://www.expressionofmind.com/css.html
  
__
css-discuss [cs...@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.

[Jukka K. Korpela]

Chetan Crasta wrote:


I'm not sure of the meaning of those characters, though. Do they have
the same meaning as regular numbers?


Technically, the circled numbers are defined as numbers (digits), i.e. their 
general category is "Number", and they also have numeric values defined for 
them in Unicode; see e.g.

http://www.fileformat.info/info/unicode/char/2776/
But isDigit() still returns false... And they are in the Dingbats block. So 
it's complicated. They're half numbers, half dingbats, so to say.



The characters were rendered correctly in my Ubuntu computer. It has
MS's free core fonts installed.


Strange things may happen if you use dingbats in HTML. It can be difficult 
to figure out where a browser picks glyphs for them, or to control that.



In any case, the use of these characters is limited because while the
color of the shaded circle can be changed, the color of the letter can
only be changed using background-color which changes the color of the
entire line box.


Right. I think it's much safer, and cleaner, to create circled numbers by 
using normal digits rendered in a particular style (with a background image 
containing a circle, or maybe by overlaying, with positioning, a circle 
image and a digit). This also gives more control over the appearance.


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


__
css-discuss [cs...@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.

[Chetan Crasta]

On Tue, Jan 11, 2011 at 11:47 AM, Jukka K. Korpela  wrote:

> 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.
>
> --
> Yucca, http://www.cs.tut.fi/~jkorpela/

Good info.
I'm not sure of the meaning of those characters, though. Do they have
the same meaning as regular numbers? This wikipedia article doesn't
say: http://en.wikipedia.org/wiki/Enclosed_Alphanumerics
The characters were rendered correctly in my Ubuntu computer. It has
MS's free core fonts installed.

In any case, the use of these characters is limited because while the
color of the shaded circle can be changed, the color of the letter can
only be changed using background-color which changes the color of the
entire line box.

~Chetan
__
css-discuss [cs...@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/