Re: [css-d] Headings and web fonts
Just a reminder that Google Web Fonts service still hands over faulty fonts for IE. It's also notoriously bad for performance, giving you a pretty long wait despite the supposed CDN benefits. A much better alternative would be to get the desired fonts from fontsquirrel.com and host them and the CSS yourself. At the risk of being too much of a pedant while we're on the subject of cognitive disorders I think it's worth reminding people that web fonts are not a CSS3 definition. The HTML5 logo page conflates .woff format with CSS3 but the two are distinct. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 20 June 2011 04:44, Gabriele Romanato gabriele.roman...@gmail.comwrote: The secret hand of destiny: http://youtu.be/og6dJVQ1jtI :-) -- 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 [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-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] Issue with background images on small devices
Hi all, I have a question regarding background images. My background image on a wrapper div is shown perfectly behind some absolute-positioned divs (text) as I expect, normally. Problem is when I zoom out the window of the browser to a size smaller than the background image and then scroll down: the background image is not shown anymore in the area which exceeded the size of the zoomed window. This is not that bad, because no one zoomes out the window on a big screen normally, but the same happens on a smartphone with small screens: when the user scrolls, the background image is not shown in the scrolled area. Heres the site: http://www.goeldi.eu/abusart/ Can anybody tell me the reason and how to avoid this behaviour? Thanks in advance! -Peter __ 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] Issue with background images on small devices
Hi all, I have a question regarding background images. My background image on a wrapper div is shown perfectly behind some absolute-positioned divs (text) as I expect, normally. Problem is when I zoom out the window of the browser to a size smaller than the background image and then scroll down: the background image is not shown anymore in the area which exceeded the size of the zoomed window. This is not that bad, because no one zoomes out the window on a big screen normally, but the same happens on a smartphone with small screens: when the user scrolls, the background image is not shown in the scrolled area. Heres the site: http://www.goeldi.eu/abusart/ Can anybody tell me the reason and how to avoid this behaviour? Thanks in advance! -Peter __ 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] Issue with background images on small devices
On 20.06.2011 11:00, Göldi wrote:
Heres the site: http://www.goeldi.eu/abusart/
Can anybody tell me the reason and how to avoid this behaviour?
Reason: the various, stacked, elements don't relate to each other, and
therefore don't adjust dimensions to each other. Natural fallback is
body-width in browser-window, which causes the effect you're seeing with
the element holding the background not being wider than the browser-window.
For that specific case/page you may get away with setting a specific
width on relevant elements, for instance...
#wraponcircle, #wrap {1130px;}
...but it would all be so much easier if you avoided reliance on
absolute positioning and made sure all containers actually contained
their intended content.
regards
Georg
__
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] slightly off: fonts question
Dear CSSers, I would like to supply fonts to my web page so that any browser could use my special fonts. For this I should supply my font in different font formats as not every browser supports otf: http://www.webfonts.info/wiki/index.php?title=%40font-face_browser_support This page tells us about the major desktop browsers but what is the case for the smartphone browsers? Do you know any such table that tells which smartphone supports which open font format? - Gergely __ 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] slightly off: fonts question
2011-06-20 13:47, Gergely Buday wrote: I would like to supply fonts to my web page so that any browser could use my special fonts. I don't think that's off-topic at all - it's about practical use of CSS, isn't it? For this I should supply my font in different font formats as not every browser supports otf: Indeed. This page tells us about the major desktop browsers but what is the case for the smartphone browsers? My limited experience about an Android phone is that it doesn't apply even normal font-family declarations but instead uses its own fonts. I'm very happy with that. On a closer look, it seems that it ignores most font family settings, using its own sans-serif font that works pretty well on a small screen, but recognizes Courier New, Times New Roman, Bookman Old Style, and Georgia. I think even that is overboard, though I understand the potential relevance of monospace fonts. Anyway, the main point is that people using pocket-size devices will be far more interested in the content than in the fonts and will generally see the text in one font, selected by the browser for the device. Any success in changing that is probably a Pyrrhian victory. -- 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] Issue with background images on small devices
thanks for your answer, George!
I know absolute positioning is maybe not best practise but often i'm
also running into problems when using floating for doing
several-columns layouts. And so i do now as well:
I reangearred my site http://www.goeldi.eu/abusart without absolute
positioning, and I have the same problem with my background-image:
it's cut off on the right side when the browser window is too small
and I scroll to the right. I do not understand why this happens.
So still something wrong?
At least the image is shown at its full extension in vertical direction...
Cheers
-Peter
2011/6/20 G.Sørtun gunla...@c2i.net:
On 20.06.2011 11:00, Göldi wrote:
Heres the site: http://www.goeldi.eu/abusart/
Can anybody tell me the reason and how to avoid this behaviour?
Reason: the various, stacked, elements don't relate to each other, and
therefore don't adjust dimensions to each other. Natural fallback is
body-width in browser-window, which causes the effect you're seeing with the
element holding the background not being wider than the browser-window.
For that specific case/page you may get away with setting a specific width
on relevant elements, for instance...
#wraponcircle, #wrap {1130px;}
...but it would all be so much easier if you avoided reliance on absolute
positioning and made sure all containers actually contained their intended
content.
regards
Georg
__
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-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] slightly off: fonts question
Hiya Gergely, Webkit Mobile traditionally makes use of .svg format fonts (although modern devices will accept .woff .ttf, and there was a brief period when none at all were supported). Your best bet is to take your OTF font and put it through Fontsquirrel's @font-face generator, which will convert your fonts into all the necessary formats and provide the CSS for them. http://www.fontsquirrel.com/fontface/generator Androids ship with the excellent Droid font family, and doesn't have the traditional web stack (ie Arial, Verdana, etc). Modern mobile devices tend to do better with fonts because of their higher resolution, which allows the presentation of details without falling into awkward pixelated rendering, as many otherwise acceptable web fonts do on 96/120ppi monitors. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 20 June 2011 13:12, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2011-06-20 13:47, Gergely Buday wrote: I would like to supply fonts to my web page so that any browser could use my special fonts. I don't think that's off-topic at all - it's about practical use of CSS, isn't it? For this I should supply my font in different font formats as not every browser supports otf: Indeed. This page tells us about the major desktop browsers but what is the case for the smartphone browsers? My limited experience about an Android phone is that it doesn't apply even normal font-family declarations but instead uses its own fonts. I'm very happy with that. On a closer look, it seems that it ignores most font family settings, using its own sans-serif font that works pretty well on a small screen, but recognizes Courier New, Times New Roman, Bookman Old Style, and Georgia. I think even that is overboard, though I understand the potential relevance of monospace fonts. Anyway, the main point is that people using pocket-size devices will be far more interested in the content than in the fonts and will generally see the text in one font, selected by the browser for the device. Any success in changing that is probably a Pyrrhian victory. -- Yucca, http://www.cs.tut.fi/~**jkorpela/ http://www.cs.tut.fi/~jkorpela/ __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ __ 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] slightly off: fonts question
On 6/20/11 8:12 AM, Jukka K. Korpela wrote: 2011-06-20 13:47, Gergely Buday wrote: I would like to supply fonts to my web page so that any browser could use my special fonts. I don't think that's off-topic at all - it's about practical use of CSS, isn't it? For this I should supply my font in different font formats as not every browser supports otf: Indeed. This page tells us about the major desktop browsers but what is the case for the smartphone browsers? My limited experience about an Android phone is that it doesn't apply even normal font-family declarations but instead uses its own fonts. I'm very happy with that. On a closer look, it seems that it ignores most font family settings, using its own sans-serif font that works pretty well on a small screen, but recognizes Courier New, Times New Roman, Bookman Old Style, and Georgia. I think even that is overboard, though I understand the potential relevance of monospace fonts. Anyway, the main point is that people using pocket-size devices will be far more interested in the content than in the fonts and will generally see the text in one font, selected by the browser for the device. Any success in changing that is probably a Pyrrhian victory. Fwiw: Samsong Galaxy Prevail Andriod/2.2.2 for BoostMobile [a low-end smartphone] this end, handles headings set @fontface extremely well-- same for 'Helvetica Neue' at font-weight 300 for body text. On the same device, Opera Mobile is also excellent with the fonts... and OperaMini ain't that bad either, except the @fontface declartion is not honored. Best, U2 -- http://chelseacreekstudio.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/
Re: [css-d] Issue with background images on small devices
I reangearred my site http://www.goeldi.eu/abusart without absolute positioning, and I have the same problem with my background-image: it's cut off on the right side when the browser window is too small and I scroll to the right. I do not understand why this happens. So still something wrong? Yes... The width with your background image is 100% (of the window), while your text is 745px. If 100% of the window is smaller than 745px, then the background image stops at 100%, and the text keeps going. You could set your container to have a min-width of 775px. Or (the better option, imo) you could rework your page so that the content is more flexible (take off the width and the height, and use a titled background image, perhaps). ---Tim __ 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] Issue with background images on small devices
ok, that helps! rework with tiled image: i don't like the background image too much, but it's part of the clients art... thanks a lot! -Peter 2011/6/20 Tim Climis tim.cli...@gmail.com: I reangearred my site http://www.goeldi.eu/abusart without absolute positioning, and I have the same problem with my background-image: it's cut off on the right side when the browser window is too small and I scroll to the right. I do not understand why this happens. So still something wrong? Yes... The width with your background image is 100% (of the window), while your text is 745px. If 100% of the window is smaller than 745px, then the background image stops at 100%, and the text keeps going. You could set your container to have a min-width of 775px. Or (the better option, imo) you could rework your page so that the content is more flexible (take off the width and the height, and use a titled background image, perhaps). ---Tim __ 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] Different font
Habari! Does anyone know why in IE8 I'm getting a courier type font for the ordered list items in the comment that I posted (at the bottom)? Re: http://www.draftingservices.com/blog/project-photofly-v2-resources#comments First, my blog created its own CSS sheet, which I have modifying as I've found problems. Secondly, when I open the page up if Firefox, the font looks fine. When I use firebug, I can't find the source of the font problem. Asante, Brian __ 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] Different font
style.css, line 47. You have code wrapping lis On Mon, Jun 20, 2011 at 4:34 PM, Brian M. Curran br...@draftingservices.com wrote: Habari! Does anyone know why in IE8 I'm getting a courier type font for the ordered list items in the comment that I posted (at the bottom)? Re: http://www.draftingservices.com/blog/project-photofly-v2-resources#comments First, my blog created its own CSS sheet, which I have modifying as I've found problems. Secondly, when I open the page up if Firefox, the font looks fine. When I use firebug, I can't find the source of the font problem. Asante, Brian __ 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/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
Re: [css-d] Different font
style.css, line 47. You have code wrapping lis Thank you. - Just got rid of the code tag. __ 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/
