Re: [css-d] browser reports please [blakeys]
On 2010/07/13 13:52 (GMT+0800) Chris Blake composed: 2. 'line-height set in pixels' - what should I use? It's a menu rather than a paragraph. Unless you're happy to have your design break royally upon encountering minimum font size, containers need to be big enough for the text they contain. Line-height is a sort of containment. When you specify line-height of 16px and my minimum font size is 22px, something will definitely break. That break is likely to be my patience, followed by a click on the back button. So, make the line-height depend on the size of the text it must contain, using a ratio, a plain number, such as 1.3. http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height 16 pixels minimum - are you kidding me!? Pixels are a proportion of a display canvas that is normally of unknown size. Since CSS cannot know display size regardless, and cannot know total px to fit in the unknown display space, via CSS alone you have no idea how big 16px is. At 144 DPI (e.g, my display here), 16px is only 8pt, while my UI text (e.g. browser menus) is 10pt, and my normal browser minimum font sizes vary between 15px and 22px, depending on which browser and for what purpose I'm using it. Sometimes I set the minimum equal to the (24px) default, which removes any practical possibility of contextual meaning to be derived from text size, but is the only way to actually read what I need to read without disabling all page styles. On http://blakeys.com/design/index.php/en/blakeys-websites-introduction with a 22px minimum setting the white nav text is so scattered about it's impossible to guess what it means to offer, and on hover the dropdowns compound the apparent textual randomization. Up top in the middle looks like a tiny hanging tab, with only about the top 40% of the text it's apparently supposed to contain actually showing, and nothing showing to help explain it on the statusbar on hover. The search box can't fit even 7 full letters (abcdefg), cutting off the bottoms, and one or the other end. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) 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] Strange border around header image in IE
I'm currently working on a site: http://dvpwebdesign.com/test/index.html, where i am having issues with a purple border around the header image on every page of my website in IE. The header should just have a white background, and works fine on Safari, Firefox, Chrome, i've checked the css and cant find any instance of a purple border or outline being used for the header or even as a background, can anyone help? Also, this is the most complex site i've done so far, and its been great fun. I've nearly completed phase 1, which was merely to transfer and clean up content from the old site, phase 2 will provide more graphics and artwork, more interactivity, cms and a lot of other things i havent figured out yet! If anyone has any thoughts and tips on the site i would greatly appreciate any feedback. regards Dipesh __ 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] browser reports please [blakeys]
Hi, I appreciate all the advice I am getting on this topic and it's raising some very important issues for me and I think the template creators too. I understand setting the line-height as a ratio, and the font sizes could still be set as pixels (or should this be a ratio too?). I am however concerned that because of the width of the menu, it being a drop-down, the number of items, and the layout having a fixed width that another serious issue is that items start breaking out of their containers (applys to the height too of course). I would to think that having a flexible/fluid/expandable menu - possibly sitting outside of the main wrapper (with a minimum width declared in pixels) could resolve this issue. Other items that have a set width (e.g. my top panel trigger) could be set to min-widths. Could css-d give me some examples of what you think are the best kind of declarations for items such as menu links (horizontal, 1 line) using ratios and whatever else so that I do not run into problems with min font sizes. It'll just give me a starting point and then I can play about with it in fire-bug. Just as I thought it was the end of IE6 I run into a new problem! Lovin' web design :D Thanks, CB On 13/07/2010, at 2:53 PM, Felix Miata wrote: On 2010/07/13 13:52 (GMT+0800) Chris Blake composed: 2. 'line-height set in pixels' - what should I use? It's a menu rather than a paragraph. Unless you're happy to have your design break royally upon encountering minimum font size, containers need to be big enough for the text they contain. Line-height is a sort of containment. When you specify line- height of 16px and my minimum font size is 22px, something will definitely break. That break is likely to be my patience, followed by a click on the back button. So, make the line-height depend on the size of the text it must contain, using a ratio, a plain number, such as 1.3. http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height 16 pixels minimum - are you kidding me!? Pixels are a proportion of a display canvas that is normally of unknown size. Since CSS cannot know display size regardless, and cannot know total px to fit in the unknown display space, via CSS alone you have no idea how big 16px is. At 144 DPI (e.g, my display here), 16px is only 8pt, while my UI text (e.g. browser menus) is 10pt, and my normal browser minimum font sizes vary between 15px and 22px, depending on which browser and for what purpose I'm using it. Sometimes I set the minimum equal to the (24px) default, which removes any practical possibility of contextual meaning to be derived from text size, but is the only way to actually read what I need to read without disabling all page styles. On http://blakeys.com/design/index.php/en/blakeys-websites-introduction with a 22px minimum setting the white nav text is so scattered about it's impossible to guess what it means to offer, and on hover the dropdowns compound the apparent textual randomization. Up top in the middle looks like a tiny hanging tab, with only about the top 40% of the text it's apparently supposed to contain actually showing, and nothing showing to help explain it on the statusbar on hover. The search box can't fit even 7 full letters (abcdefg), cutting off the bottoms, and one or the other end. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) 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] Fonts, fall-backs Unicode
If I have a page such as the following : !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head meta http-equiv=Content-Type content=text/html; charset=utf-8 titleArmenian test/title style type=text/css BODY {font-family : Arial Unicode MS, sans-serif} /style /head body h1Եւ երկիր էր աներևոյթ և անպատրաստ. և խաւար ի վերայ անդնդոց. և Հոգի Աստուծոյ շրջէր ի վերայ ջուրց/h1 /body /html I have presumably chosen my primary font not only because I feel its aesthetics are appropriate but also because it supports the necessary subset of Unicode to correctly display the characters that make up the page. But if for some reason the visitor's browser does not have access to (in this case) Arial Unicode MS, and falls back to the generic sans-serif, there is (as far as I can see) no way of guaranteeing that the page will still display correctly. Is there, therefore, in CSS, some way of specifying as a part of the font fallback sequence that any font selected as a result of fallback must support a specific subset of Unicode such that the page can be guaranteed to display correctly provided that such a font does in fact exist on the visitor's machine ? And is there any way, presumably using a combination of HTML and CSS, to display a suitable error message using solely ASCII characters if such a font cannot be found ? 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/
Re: [css-d] Fonts, fall-backs Unicode
Hi, What about using CSS3 web fonts http://www.fontsquirrel.com/fontface/generator ? Upload the font you want, it will generate all the different types, link to them using the @fontface thing and bingo - they don't need that font on their system. or am I dreadfully mistaken? BR, CB On 13/07/2010, at 4:57 PM, Philip Taylor (Webmaster, Ret'd) wrote: If I have a page such as the following : !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8 titleArmenian test/title style type=text/css BODY {font-family : Arial Unicode MS, sans-serif} /style /head body h1Եւ երկիր էր աներևոյթ և անպատրաստ. և խաւար ի վերայ անդնդոց. և Հոգի Աստուծոյ շրջէր ի վերայ ջուրց/h1 /body /html I have presumably chosen my primary font not only because I feel its aesthetics are appropriate but also because it supports the necessary subset of Unicode to correctly display the characters that make up the page. But if for some reason the visitor's browser does not have access to (in this case) Arial Unicode MS, and falls back to the generic sans-serif, there is (as far as I can see) no way of guaranteeing that the page will still display correctly. Is there, therefore, in CSS, some way of specifying as a part of the font fallback sequence that any font selected as a result of fallback must support a specific subset of Unicode such that the page can be guaranteed to display correctly provided that such a font does in fact exist on the visitor's machine ? And is there any way, presumably using a combination of HTML and CSS, to display a suitable error message using solely ASCII characters if such a font cannot be found ? 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-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] Fonts, fall-backs Unicode
Chris Blake wrote: Hi, What about using CSS3 web fonts http://www.fontsquirrel.com/fontface/generator ? Upload the font you want, it will generate all the different types, link to them using the @fontface thing and bingo - they don't need that font on their system. or am I dreadfully mistaken? BR, CB Thanks for the suggestion, Chris, but although it is related to the question it doesn't really address the issue of fallbacks. There may be many reasons why I cannot legitimately distribute the font with the web page (certainly true for Arial Unicode MS), so what I am looking for is a way to be able to reliably fall back on a font that the visitor's machine /does/ have, rather than using web fonts per se. ** Phil. __ 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] Fonts, fall-backs Unicode
On Tuesday 13 July 2010 20:57, Philip Taylor (Webmaster, Ret'd) wrote: If I have a page such as the following : !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head meta http-equiv=Content-Type content=text/html; charset=utf-8 titleArmenian test/title style type=text/css BODY {font-family : Arial Unicode MS, sans-serif} /style /head body h1Եւ երկիր էր աներևոյթ և անպատրաստ. և խաւար ի վերայ անդնդոց. և Հոգի Աստուծոյ շրջէր ի վերայ ջուրց/h1 /body /html I have presumably chosen my primary font not only because I feel its aesthetics are appropriate but also because it supports the necessary subset of Unicode to correctly display the characters that make up the page. But if for some reason the visitor's browser does not have access to (in this case) Arial Unicode MS, and falls back to the generic sans-serif, there is (as far as I can see) no way of guaranteeing that the page will still display correctly. Is there, therefore, in CSS, some way of specifying as a part of the font fallback sequence that any font selected as a result of fallback must support a specific subset of Unicode such that the page can be guaranteed to display correctly provided that such a font does in fact exist on the visitor's machine ? And is there any way, presumably using a combination of HTML and CSS, to display a suitable error message using solely ASCII characters if such a font cannot be found ? Would it help to create a page with all the Unicode chars in the range you are using and ask who can see how many based on font selections on a per paragraph basis. For *my* Linux Nimbus Roman No9 L may be a well populated serif font and Nimbus Sans L as sans serif (dunno i haven't gone into it that much). You could also get replies from Mac, Windows 7, Vista and XP users and try for the best combinations. I don't know the maximum fonts you can have in a CSS fonts list - anyone? Alternatively, if you are dealing with particularly uncommon glyphs it could pay to use images of the ones you want instead. HTH -- Michael __ 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] Fonts, fall-backs Unicode
Michael Adams wrote: Would it help to create a page with all the Unicode chars in the range you are using and ask who can see how many based on font selections on a per paragraph basis. For *my* Linux Nimbus Roman No9 L may be a well populated serif font and Nimbus Sans L as sans serif (dunno i haven't gone into it that much). You could also get replies from Mac, Windows 7, Vista and XP users and try for the best combinations. I don't know the maximum fonts you can have in a CSS fonts list - anyone? Thank you for the suggestion, Michael; it is certainly worth listing the more common well populated fonts as you suggest, but it doesn't address the real issue, which /seems/ to be (in the absence of any evidence to the contrary) that the CSS fallback mechanism was formulated at a time when Unicode was not yet prevalent, and does not seem to have evolved to cope with the need to have greater control over the fallback font selected in order to deal with the various character sets that the page uses. Alternatively, if you are dealing with particularly uncommon glyphs it could pay to use images of the ones you want instead. I would prefer not to go that route at all ! ** Phil. __ 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] Fonts, fall-backs Unicode
On 13/07/2010, at 6:38 PM, Philip Taylor (Webmaster, Ret'd) wrote: Michael Adams wrote: Would it help to create a page with all the Unicode chars in the range you are using and ask who can see how many based on font selections on a per paragraph basis. For *my* Linux Nimbus Roman No9 L may be a well populated serif font and Nimbus Sans L as sans serif (dunno i haven't gone into it that much). You could also get replies from Mac, Windows 7, Vista and XP users and try for the best combinations. I don't know the maximum fonts you can have in a CSS fonts list - anyone? Thank you for the suggestion, Michael; it is certainly worth listing the more common well populated fonts as you suggest, but it doesn't address the real issue, which /seems/ to be (in the absence of any evidence to the contrary) that the CSS fallback mechanism was formulated at a time when Unicode was not yet prevalent, and does not seem to have evolved to cope with the need to have greater control over the fallback font selected in order to deal with the various character sets that the page uses. it could be seen as racist! Alternatively, if you are dealing with particularly uncommon glyphs it could pay to use images of the ones you want instead. I would prefer not to go that route at all ! haha, how many characters in that language? ** Phil. __ 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-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] Fonts, fall-backs Unicode
Chris Blake wrote: On 13/07/2010, at 6:38 PM, Philip Taylor (Webmaster, Ret'd) wrote: [T]he CSS fallback mechanism was formulated at a time when Unicode was not yet prevalent, and does not seem to have evolved to cope with the need to have greater control over the fallback font selected in order to deal with the various character sets that the page uses. it could be seen as racist! I think that there is a great deal of unintentional racism in the US-English-centric web that we use today, but the last time a group of us tried to raise this as a serious issue within the CSS working group, one of the joint Chairmen had an apoplectic fit, so I have little hope that this will be addressed in the short term, much as I would like it to be. 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] background image - repeat, flip horizontal and vertically
Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ 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] Fonts, fall-backs Unicode
On Tuesday 13 July 2010 23:02, Philip Taylor (Webmaster, Ret'd) wrote: I think that there is a great deal of unintentional racism in the US-English-centric web that we use today, but the last time a group of us tried to raise this as a serious issue within the CSS working group, one of the joint Chairmen had an apoplectic fit, so I have little hope that this will be addressed in the short term, much as I would like it to be. No racism intended from my reply. I was thinking that the OP's question originated in rare mathematical symbols. I recently helped in such an issue on the OpenOffice.org list where the OP wanted to know how to get a R glyph with a slash superimposed on top. No single unicode glyph exists for this but there are a range of glyphs which can overlay others including the slash. Vary rare request. Often with math formulas, browsers produce broken output and it is as much of an issue as languges though less common. In my understanding with languages the user has adequate fonts loaded on their box but the web dev pretty much can only offer sans-serif or serif to them and hope that the box/browser is well set up. __ 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] background image - repeat, flip horizontal and vertically
Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( BR, CB On 13/07/2010, at 5:22 PM, Chris Blake wrote: Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ 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-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] Fonts, fall-backs Unicode
Michael Adams wrote: On Tuesday 13 July 2010 23:02, Philip Taylor (Webmaster, Ret'd) wrote: I think that there is a great deal of unintentional racism in the US-English-centric web that we use today, but the last time a group of us tried to raise this as a serious issue within the CSS working group, one of the joint Chairmen had an apoplectic fit, so I have little hope that this will be addressed in the short term, much as I would like it to be. No racism intended from my reply. Nor did I infer any; I hope I didn't give the impression that I had. If I did, sincere apologies. ** Phil. __ 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] Fonts, fall-backs Unicode
On Jul 13, 2010, at 5:57 PM, Philip Taylor (Webmaster, Ret'd) wrote: I have presumably chosen my primary font not only because I feel its aesthetics are appropriate but also because it supports the necessary subset of Unicode to correctly display the characters that make up the page. But if for some reason the visitor's browser does not have access to (in this case) Arial Unicode MS, and falls back to the generic sans-serif, there is (as far as I can see) no way of guaranteeing that the page will still display correctly. Is there, therefore, in CSS, some way of specifying as a part of the font fallback sequence that any font selected as a result of fallback must support a specific subset of Unicode such that the page can be guaranteed to display correctly provided that such a font does in fact exist on the visitor's machine ? A modern OS / browser will do the job for you. You can specify a fallback font if your first choice is not available: p { font-family: font-a, font-b, font-c, serif;} Gecko, WebKit, Opera, and IE 8+ will look for the glyphs in font-a, if that doesn't have the coverage [*], the browser looks at font-b, then font-c; if that fail, it takes the default serif font / or / look for something in the list of installed fonts that provide coverage. (and if none exist, you'd get a missing glyph character) The good news for you: your first choice is installed by default on OS X and Windows Vista +. For Linux, throw in DejaVu Sans [*] or the font is not available Example: on something I work on, text mostly containing Roman/English with romanized Japanese characters words, I specify 'Helvetica Neue' as the font of choice on OS X; but that font doesn't have coverage for some romanized characters (e.g ō), I thus specify a fallback: 'helvetica', that has close-to-the-same metrics look. -- note: you could always provide, on an 'about' page or something, a short explanation / list of required fonts. One of these days I'll publish an article with my notes on all fallback fonts. When I beat my laziness or something. 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] Fonts, fall-backs Unicode
Philippe Wittenbergh wrote: A modern OS / browser will do the job for you. [snip] Thank you, Phillipe : a very interesting summary. It is certainly useful to know what the behaviour of most current rendering engines is, but of course unless it is actually enshrined in the specification, one cannot rely on that behaviour. ** Phil. __ 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] Fonts, fall-backs Unicode
Philippe Wittenbergh wrote: What I describe is actually the expected behaviour per CSS 2.1 /3-fonts… OK, even better news :-) Very many thanks. ** Phil. __ 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] Safari 5 / Win XP crashing ?
On Monday, July 12, 2010 11:59:34 pm Al Sparber wrote: From: Philippe Wittenbergh e...@l-c-n.com Does this test case crashes Safari 5 on Win XP for anyone, or is it just me ? http://dev.l-c-n.com/webkit/c.html This combination causes the issue: p, dt, dd, li {text-rendering: optimizeLegibility;} p {margin: .5ex 0 0;} (and: does it crash Google Chrome 5 as well ?) It crashes both browsers (Win Vista 64-bit). I assume on Windows 7, as well. I can also report Chrome 5 on Linux. ---Tim __ 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] background image - repeat, flip horizontal and vertically
On Tuesday, July 13, 2010 7:24:41 am Chris Blake wrote: Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( What about just doubling the image? Go into any simple graphics program, select all, copy, make the image bigger, paste, flip, and then you have something you can repeat. It would make the image twice as big, which could be a problem depending on your target audience's bandwidth. But it would be a lot easier than the other options you presented. ---Tim __ 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] Strange border around header image in IE
On Jul 13, 2010, at 4:05 PM, Dipesh Parmar wrote: I'm currently working on a site: http://dvpwebdesign.com/test/index.html, where i am having issues with a purple border around the header image on every page of my website in IE. The header should just have a white background, and works fine on Safari, Firefox, Chrome, i've checked the css and cant find any instance of a purple border or outline being used for the header or even as a background, can anyone help? Which version of Firefox are you testing ? Up to the latest release build (3.6.6), the image has a border - the 4.1b1 preview doesn't, per bug 452915 [1], the default border was removed. The border you see is the default (IE, Firefox) browser setting when an image is inside a link. a img {border: none;} will remove that. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=452915 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] browser reports please [blakeys]
Could css-d give me some examples of what you think are the best kind of declarations for items such as menu links (horizontal, 1 line) using ratios and whatever else so that I do not run into problems with min font sizes. It'll just give me a starting point and then I can play about with it in fire-bug. http://www.uselessgeography.com/ Here's my personal play site. It does not work in IE6 or 7, only because I didn't feel like making it do so. It uses inline-block, which isn't that hard to fool IE into pretending to support. But for a site I do on my own time for my family's enjoyment, it doesn't matter. I just blew up my font size to 32px, and it handled it alright, although the menus are longer than the page, so you have to scroll to get to the end of them (could be an accessibility problem if you don't have a scroll wheel). But the fonts are all set as a percentage of the configured default font size, as are the heights, widths, and it looks like borders too... I don't remember doing that, but the border sizes increased when I changed the font size. ---Tim __ 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] Strange border around header image in IE
I'm currently working on a site: http://dvpwebdesign.com/test/index.html Dipesh, You may want to view your page in IE/8. Nothing to do with the fix that has been provided for the question you posted... Best, ~d -- http://chelseacreekstudio.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] Fonts, fall-backs Unicode
On 07/13/2010 03:38 AM, Philip Taylor (Webmaster, Ret'd) wrote: Michael Adams wrote: Would it help to create a page with all the Unicode chars in the range you are using and ask who can see how many based on font selections on a per paragraph basis. For *my* Linux Nimbus Roman No9 L may be a well populated serif font and Nimbus Sans L as sans serif (dunno i haven't gone into it that much). You could also get replies from Mac, Windows 7, Vista and XP users and try for the best combinations. I don't know the maximum fonts you can have in a CSS fonts list - anyone? Thank you for the suggestion, Michael; it is certainly worth listing the more common well populated fonts as you suggest, but it doesn't address the real issue, which /seems/ to be (in the absence of any evidence to the contrary) that the CSS fallback mechanism was formulated at a time when Unicode was not yet prevalent, and does not seem to have evolved to cope with the need to have greater control over the fallback font selected in order to deal with the various character sets that the page uses. I'm not sure what limitation you have in mind. If you list a lot of fonts, the CSS font fallback algorithm will check all of them on a *per character* basis, until it finds one that has the glyph it needs. In some cases, this means the text will be rendered in multiple fonts, because the first font listed had some characters but not others, and the second font had the remaining characters, etc. The last step in the fallback algorithm is for the UA to check its default font for the glyphs. On some OSes, this default font is actually a set of fonts that collectively covers the widest possible range of characters. And the spec explicitly gives the UA permission to use any means it wishes to find an appropriate glyph before falling back to a missing character rendering. http://www.w3.org/TR/CSS21/fonts.html#algorithm http://www.w3.org/TR/css3-fonts/#font-matching-algorithm If you want to exclude certain characters from a font from ever being matched, then you would need to use an @font-face rule with a unicode-range descriptor. This functionality was part of CSS2, but was removed from CSS2.1 due to lack of implementation, and has been re-introduced for CSS3. Was there something else you wanted? ~fantasai __ 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] The white-space property between blocks
On 07/06/2010 12:24 PM, Christopher Wells wrote: On Tue, Jul 6, 2010 at 2:03 PM, Philippe Wittenberghe...@l-c-n.com wrote: 16.6.1 The 'white-space' processing model provides the answer http://www.w3.org/TR/CSS21/text.html#white-space-model (second list) Is that the way in which whitespace between blocks is removed? Is the whitespace only removed (or rather, hidden or not displayed) by the CSS/layout/rendering process, and not removed by the HTML/parsing/DOM process? It depends on the implementation and the tags involved (and I believe the HTML5 spec will clarify what exactly is supposed to happen here), but in general, yes, it is removed at the CSS level. Again, refer to 16.6.1, more particularly, the first ordered list, point 4.2 So the following are all valid and display identically: `pThe strong lazy /strong dog./p` `pThe stronglazy/strong dog./p` `pThestrong lazy /strongdog./p` No, they will not render identically. The space that is preserved when spaces are collapsed is the first space in the sequence of collapsible spaces. If you put borders on the strong you will see that the space after The is outside the strong in the first two cases, and inside it in the last. Similarly, the space after lazy is inside the strong in the first and third cases, but not in the second one. (If the strong has no styling, then it will render identically.) And the reason why they're the same is that the consecutive spaces are collapsed (even when they belong to different/adjacent inline text runs). Yes. Do text nodes in the parsed DOM still contain all the original whitespace characters? For example, do the text nodes have values like The and lazy ? Yes. CSS does not affect the DOM. It reads from it, but does not alter it. Do the DOM Node.normalize() and Document.normalizeDocument() have any effect on the whitespace: do they trim, collapse or remove extraneous whitespace from the text nodes? I don't know. ~fantasai __ 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] browser reports please [blakeys]
Tim Climis wrote: http://www.uselessgeography.com/ The masthead graphic (and perhaps other elements) doesn't/don't scale with Ctrl +/-, so unfortunately horizontal scrolling is forced above a fairly modest degree of zoom. 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/
Re: [css-d] browser reports please [blakeys]
Philip Taylor (Webmaster, Ret'd) wrote: Tim Climis wrote: http://www.uselessgeography.com/ The masthead graphic (and perhaps other elements) doesn't/don't scale with Ctrl +/-, so unfortunately horizontal scrolling is forced above a fairly modest degree of zoom. Philip Taylor In what OS/browser? Best, ~d -- desktop http://chelseacreekstudio.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] browser reports please [blakeys]
Philip Taylor (Webmaster, Ret'd) wrote: David Laakso wrote: In what OS/browser? Windows XP/SP3; Seamonkey 2.0.5 ** Phil. No particular problem this end in that somewhat behind the times OS/browser, nor in Mac 10.4 Camino/ 2.0.3. Best, ~d -- http://chelseacreekstudio.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] browser reports please [blakeys]
Philip Taylor (Webmaster, Ret'd) wrote: So you see no horizontal scroll bar, regardless of zoom ? ** Phil. David Laakso wrote: No particular problem this end in that somewhat behind the times OS/browser, nor in Mac 10.4 Camino/ 2.0.3. Yes, there is a slight scroll bar. There is also a slight scroll bar in any browser with a minimum font-size set in the prefs at 16px. As, for example, on this end in: Mac OS X 10.4; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6. I did not rip it apart to find the cause. Best, ~d -- desktop http://chelseacreekstudio.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] css dropdown list strange behavior
David, My goal is like http://www.cssplay.co.uk/mozilla/dropdown.html In the current template: http://2010.dierenrecht.org/fileadmin/template/2010/SDR/concept/vertebrata/ The li elements are displayed in blocks, but I want the li ul li elements under each other. But I can't find the right selector to place it in. I tried #menu li ul li a { display:list-item; } but it still shows the blocks next to each other... Any advice? On 7-7-2010 23:16, David Laakso wrote: Thijs Hakkenberg wrote: Dear List, I'm making an template for a site: http://2010.dierenrecht.org/fileadmin/template/2010/SDR/concept/vertebrata/ The menu is generated as follows: However, the subitems should be placed as list-items, not as blocks. Like in here (figure A) Where do I go wrong? cheers, Thijs, I am not sure I understand the question, and I don't know where you went wrong [other than white links on an off-white background is sort of unreadable]. This is an example menu [1] by Thierry Koblentz. Perhaps it will give you some ideas. It is rather complicated to execute but does work extremely well cross-browser. [1] http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp Best, ~d __ 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] Fonts, fall-backs Unicode
fantasai wrote: Was there something else you wanted? Dear Fantasai : many thanks for demonstrating that I was incorrect in my belief that the font-fallback mechanism has not evolved over time; I am extremely pleased that this is the case. As to whether there is anything else in this area that I would like to see, it will take a little while to read the specifications; once that is done, I will get back to you (and this list) with any further comments. 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/
Re: [css-d] css dropdown list strange behavior
Thijs Hakkenberg wrote: David, My goal is like http://www.cssplay.co.uk/mozilla/dropdown.html In the current template: http://2010.dierenrecht.org/fileadmin/template/2010/SDR/concept/vertebrata/ The li elements are displayed in blocks, but I want the li ul li elements under each other. But I can't find the right selector to place it in. I tried #menu li ul li a { display:list-item; } but it still shows the blocks next to each other... Any advice? On 7-7-2010 23:16, David Laakso wrote: Thijs Hakkenberg wrote: Dear List, I'm making an template for a site: http://2010.dierenrecht.org/fileadmin/template/2010/SDR/concept/vertebrata/ The menu is generated as follows: However, the subitems should be placed as list-items, not as blocks. Like in here (figure A) Where do I go wrong? cheers, Thijs, This is an example menu [1] by Thierry Koblentz. Perhaps it will give you some ideas. It is rather complicated to execute but does work extremely well cross-browser. [1] http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp Best, ~d Thijs, I think you'll have far better luck cross-browser constructing a menu that is known to work cross-browser. The Stu Nicholls article you pointed to is old. And more current versions of his menu that work cross-browser tend to be a kludge of CSS, CSS hacks, and tables. As previously written, Thierry's menu [link above] fills the bill. This is another menu that will work for you, that is a little easier to construct, but it will not work from the keyboard: http://sperling.com/examples/new-menuh/ Best, ~d -- desktop http://chelseacreekstudio.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] Fonts, fall-backs Unicode
On Tuesday 2010-07-13 09:57 +0100, Philip Taylor (Webmaster, Ret'd) wrote: Is there, therefore, in CSS, some way of specifying as a part of the font fallback sequence that any font selected as a result of fallback must support a specific subset of Unicode such that the page can be guaranteed to display correctly provided that such a font does in fact exist on the visitor's machine ? As was already pointed out, this is already guaranteed by CSS. I'd like to explain in a drop more detail, though: Font fallback is defined by CSS as being *per character*. In other words, for each character, the implementation is required to find the font that best matches the font-family, font-weight, font-style, etc. This is defined in CSS 2.1: http://www.w3.org/TR/CSS21/fonts.html#algorithm see especially bullet (2) (and for each character in that element), bullet (4) (but it does not contain a glyph for the current character), and bullet (5) (If a particular character ...). So the list given in the font-family property is a list of fonts to be searched for each character in the text that is displayed, and the generic families (explicitly or implicitly at the end of that list) should cover a large set of fonts. Browsers should not display a missing glyph symbol unless there's no font they can access with an appropriate glyph. I suspect that browsers don't actually follow this algorithm to the letter (it's rather hard to test, for a start). However, I think major browsers are generally quite good about finding some usable font, if present, before falling back to a missing glyph symbol. -David -- L. David Baron http://dbaron.org/ Mozilla Corporation http://www.mozilla.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] browser reports please [blakeys]
-Original Message- From: David Laakso [mailto:da...@chelseacreekstudio.com] Sent: Tuesday, July 13, 2010 12:17 PM To: Philip Taylor (Webmaster, Ret'd) Cc: css-d; Climis, Tim Subject: Re: [css-d] browser reports please [blakeys] Philip Taylor (Webmaster, Ret'd) wrote: David Laakso wrote: Yes, there is a slight scroll bar. There is also a slight scroll bar in any browser with a minimum font-size set in the prefs at 16px. As, for example, on this end in: Mac OS X 10.4; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6. OK, I get a slight scroll bar (circa 5%) at zero zoom; after six zooms, the scroll bar is greater than 50%. The image has nothing to do with the problem. The fast and dirty correction may be: div.menus ul { /*box-shadow: 3px 6px 6px black; -moz-box-shadow: 3px 6px 6px black; -webkit-box-shadow: 3px 6px 6px black; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px;*/ } Best, ~d The box-shadow specifically is the problem there. Gecko doesn't chop shadows that expand beyond the window, as Webkit does, so because of the shadow, there's a horizontal scroll there. Can't do anything about it, without changing the width of my navbar to less than 100%. When I looked into this (a while ago) I believe the conclusion was that Webkit was following the spec, but Gecko would need to do some pretty hefty reworking to fix that, so it would take a while. Also, the point was to demonstrate an elastic CSS dropdown menu. The shadow is superfluous to that anyway. ---Tim __ 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] Fonts, fall-backs Unicode
At 8:51 PM +0900 on 07/13/2010, Philippe Wittenbergh wrote about Re: [css-d] Fonts, fall-backs Unicode: A modern OS / browser will do the job for you. You can specify a fallback font if your first choice is not available: p { font-family: font-a, font-b, font-c, serif;} Gecko, WebKit, Opera, and IE 8+ will look for the glyphs in font-a, if that doesn't have the coverage [*], the browser looks at font-b, then font-c; if that fail, it takes the default serif font / or / look for something in the list of installed fonts that provide coverage. The problem is two fold (in my opinion). First is that unlike with printing use, there is no Font of Last Resort fall-back. That support says to use the defined font BUT if there are glyphs in the text which are not in the font then to attempt to display them using the FoLR (ie: The only use of the FoLR glyphs to display the missing codepoints). The second problem is that there is no way to request that the fall-back be done ONLY for missing codepoints (similar to the FoLR support). In your example above, requesting one or more glyphs that are not in font-a makes the browser try font-b and then font-c until a font is found that has support for ALL the requested glyphs. If none contain all the needed glyphs (even though all the glyphs exist in the combined list of supported glyphs), you get the browser's default serif with undefined codepoint glyphs for the codepoints not in the serif font. What I think should be looked into for the long term is defining a CSS font-x parm that says use font-a to display those glyphs that it supports (assuming that the font exists - non-existence is equivalent for this purpose as does not support a glyph) and fall-back down the list for the remaining glyphs until every glyph has been displayed by a suggested font or a missing codepoint glyph gets defaulted to. __ 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] Safari 5 / Win XP crashing ?
2010/7/13 Philippe Wittenbergh e...@l-c-n.com: On Jul 13, 2010, at 12:59 PM, Al Sparber wrote: It crashes both browsers (Win Vista 64-bit). I assume on Windows 7, as well. Thanks for checking, Al. I filed bug 42136. https://bugs.webkit.org/show_bug.cgi?id=42136 (funny thing - while I can't repro this crash on OS X 10.6 with a browser (Safari 5 / WebKit nightly / G.Chrome 6 dev), I managed to crash Quicklook while previewing the test file in the Finder) crashes Safari 5.0 (6533.16) on Mac OS X 10.6.3 Google Chrome (5.0.375.99) on Mac OS X 10.6.3 (oh no!) does not crash Safari Nightly (6533.16, r63063) on Mac OS X 10.6.3 Ingo __ 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] Fonts, fall-backs Unicode
On 07/13/2010 12:45 PM, Bob Rosenberg wrote: The problem is two fold (in my opinion). First is that unlike with printing use, there is no Font of Last Resort fall-back. That support says to use the defined font BUT if there are glyphs in the text which are not in the font then to attempt to display them using the FoLR (ie: The only use of the FoLR glyphs to display the missing codepoints). The second problem is that there is no way to request that the fall-back be done ONLY for missing codepoints (similar to the FoLR support). In your example above, requesting one or more glyphs that are not in font-a makes the browser try font-b and then font-c until a font is found that has support for ALL the requested glyphs. If none contain all the needed glyphs (even though all the glyphs exist in the combined list of supported glyphs), you get the browser's default serif with undefined codepoint glyphs for the codepoints not in the serif font. What I think should be looked into for the long term is defining a CSS font-x parm that says use font-a to display those glyphs that it supports (assuming that the font exists - non-existence is equivalent for this purpose as does not support a glyph) and fall-back down the list for the remaining glyphs until every glyph has been displayed by a suggested font or a missing codepoint glyph gets defaulted to. This is wrong. Font fallback is per-character. See responses from both myself and L. David Baron. ~fantasai __ 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/