Re: [css-d] Zooming an SVG background image in Opera
On 15 Dec 2012, at 6:36, Philippe Wittenbergh e...@l-c-n.com wrote: ON 15 déc. 2012 at 01:52, Ellen Herzfeld s...@xlii.org wrote : At 100% zoom it is fine, but if I zoom in or zoom out, there is an obvious problem. This does not happen if I use a png instead. On Firefox and Chrome (latest versions) there is no problem. No problem in Safari on iOS. The test page is here: http://qd.xlii.org/2012b/icons-test.html Yeah, I've been trying to find a solution for this Opera behavior as well. So far, no go :-(. No matter how I write my SVG file, Opera burbs… (I don't know if Opera Mobile does the same when zooming in on a mobile device) OK, thanks. I think I'll just let it go. Meaning I'll use SVG anyway and too bad for the browsers that don't show them perfectly on zoom. I figure it will end up fixed one of these days (months, years…). In fact, Firefox also has a problem at some zoom ratios. Try my test page with Firefox and zoom in. At some sizes, the icons are blurry : starting at zero, twitter gets blurry at 5 zooms, the others get blurry at 6 and 7 zooms and then are smooth again at 8 zooms. I also tried with sprites and the problems are worse. Apparently the Firefox bug is well known but hard to fix: https://bugzilla.mozilla.org/show_bug.cgi?id=600207 Ellen __ 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] Zooming an SVG background image in Opera
Hello all, Can anyone tell me what I should do to get Opera to display the background svg images correctly? At 100% zoom it is fine, but if I zoom in or zoom out, there is an obvious problem. This does not happen if I use a png instead. On Firefox and Chrome (latest versions) there is no problem. No problem in Safari on iOS. The test page is here: http://qd.xlii.org/2012b/icons-test.html Thanks, Ellen __ 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] respond.js vs ie7 and ie8 (correction)
On 25 Apr 2012, at 11:48, Duncan Hill wrote: This could potentially drift off-topic for CSS-D as it is more based on JavaScript being used to apply styling, and without specific CSS queries one of the other lists may have more help to offer. You are right, but in this case, I had no way of knowing if my problem came from the javascript or the CSS, or possibly both. selectivizr requires a JS framework, it would seem prudent to load the framework first (jquery) I'm using nwmatcher with selectivizr because jquery has incomplete support (and is missing things I need). I know that makes for a lot of js for IE 6/7/8 but it's that or nothing. Anyway, this is just a test run. I'll get into optimization later. I still don't understand this part: !--[if gte IE 6]!-- link rel=stylesheet media=all href=/2012/reset.css / link rel=stylesheet media=all href=/2012/base.css / link rel=stylesheet media=all href=/2012/content_modules.css / !--![endif]-- that seems to conditionally serve the stylesheets to IE6+, yet it also serves them to all browsers. Yes, that is the point. IE less than 6 doesn't see the stylesheets that are served to all other browsers. Actually, this is something that is a holdover from a site that was made a few years ago, when IE 5 and 5.5 were still around and I had decided that enough was enough for those two. So I suppose I could remove it now, since hopefully IE 5 and 5.5 are dead and buried. I'm still trying to cater to IE6, but my latest tests cause it to crash on a regular basis. I haven't decided what I'll do about that yet. It's a bit difficult trying to do mobile first and still serve a desktop site to IE 9. But it's been difficult with IE for years... I think you are right and I should go elsewhere with my problem. Thanks for your time. Ellen __ 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] respond.js vs ie7 and ie8 (correction)
On 23 Apr 2012, at 17:43, Tom Livingston wrote: On Mon, Apr 23, 2012 at 11:11 AM, Ellen Herzfeld s...@xlii.org wrote: I am trying to use respond.js for media queries. My first tests went fine in ie7/8. But I am now stumped by a problem in both ie7 and ie8 although it seems worse in ie8. On one particular test page, if I use respond.js (and media queries) the fonts and the spacing of elements are not correct. If I remove respond.js and the media queries, all is well. I use jquery.mediaqueries.js instead of respond. I had a lot of issues with respond in a couple layouts. HTH jquery.mediaqueries.js can only use pixels. I need to use ems. I'll consider pixels if I really can't find any other solution. I see respond.js suggested in so many places (in HTML5 Boilerplate for instance) I have a hard time believing it doesn't work. My test pages are really very very simple, so I can't but think it must be something obvious that create the problem. Unfortunately, sometimes obvious is quite invisible to the person making the obvious mistake; me in this case. Ellen __ 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] respond.js vs ie7 and ie8 (correction)
On 24 Apr 2012, at 11:49, Duncan Hill wrote: On Mon, 23 Apr 2012 16:11:58 +0100, Ellen Herzfeld s...@xlii.org wrote: My previous message points to the wrong file without the media queries : it should be http://qd.xlii.org/2012/content_modules-ie8.html By the way, I checked without selectivizr and it doesn't change the problem. Ellen Both this page and the one you posted previously are having problems, I suspect it is your conditional comments that are preventing load. Check the syntax, and maybe the logic of how the IE versions are targeted. !--[if ! lt IE 6]!-- link rel=stylesheet href=/styles/fonts.css media=all / link rel=stylesheet media=all href=/2012/reset.css / link rel=stylesheet media=all href=/2012/base.css / link rel=stylesheet media=all href=/2012/banner.css / !--![endif]-- if I read this one correctly, the 'not' operator ! should be directly in front of the lt, '!lt', however there is a closing of that conditional which feeds the linked sheets to everything (correctly I guess), then it is followed by the real closing statement for the conditional. Perhaps the slight mish-mash is upsetting IE, and isn't [if !lt IE 6] the equivalent of [if gte IE 6], but in a slightly more convoluted way. I changed the ! lt IE 6 to gte IE 6 (you are right, it was a bit convoluted), but it did not resolve the problem. Similar coding applies for your language declaration, maybe those classes appear at some stage (class=lt-ie9 lt-ie8 lt-ie7 etc.) but the section: !--[if gt IE 8]!-- html lang=fr-FR !--![endif]-- surely just ends up serving html lang=fr-FR to everything. The top conditional comments have nothing to do with the language. They apply classes to the html tag so that fixes can be targeted to specific browsers with these classes. See paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ I'm not sure I'll stick with this scheme. Previously I was putting the fixes in a separate stylesheet for each IE. on XP IE8 'sometimes' shows the page, but with little styling, into IE7 mode and no content is visible. FF 11.0 will not let me switch away from a 'Handheld' media type for the CSS and is not showing anything like the styling that appeared on your first posted link. on Win7 IE9 shows as FF, IE8 and IE7 modes show content but move your image from the right to the left of the page. Yes, I'm sorry but another error creeped in somewhere and really messed everything up. I must have been tired when I did this, but it's now fixed. However this doesn't change my problem with IE7/8. Could you look again, please? The page http://qd.xlii.org/2012/content_modules.html should now show styling everywhere (headers and dls centered, image to the right), but in IE 7/8 the spacing between paragraphs is gone and fonts are not correct. In IE7 the headers are bold and sans-serif but too small. In IE8 the headers are not bold, too small and set in a serif font instead of sans-serif. The line-height and top and bottom margins are gone in both. In all other browsers including IE9 there is no problem. On the other page http://qd.xlii.org/2012/content_modules-ie8.html, I removed the media queries and respond.js. This way in all browsers (even IE 7/8), what I see is the page styled correctly for wide viewports. Fonts and spacing are good in IE 7 and 8. So the problem has nothing to do with the css itself. With respond.js, the styles in the media queries are obviously seen by IE, but I can't figure out why, in this specific page, there is a problem with typography and spacing. And it really is a very simple page. I'm thinking of just serving a specific desktop stylesheet to IE with a conditional comment if I can't find where the problem is. Or maybe, if this problem is confirmed by others (on this list for example), I'll file a bug for respond.js. Thanks for your help. Ellen __ 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] respond.js vs ie7 and ie8
Hello all, I am trying to use respond.js for media queries. My first tests went fine in ie7/8. But I am now stumped by a problem in both ie7 and ie8 although it seems worse in ie8. On one particular test page, if I use respond.js (and media queries) the fonts and the spacing of elements are not correct. If I remove respond.js and the media queries, all is well. See here for the problem (only seen in ie7/8) : http://qd.xlii.org/2012/content_modules.html And here for the same files (html and css) without respond.js and without media queries. http://qd.xlii.org/2012/content_modules.html Other pages using respond.js and media queries seem to work correctly in ie7/8. See here: http://qd.xlii.org/2012/footer.html http://qd.xlii.org/2012/banner.html http://qd.xlii.org/2012/secondary-nav.html I can't figure out where the problem is. Help please. Ellen Herzfeld __ 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] respond.js vs ie7 and ie8 (correction)
My previous message points to the wrong file without the media queries : it should be http://qd.xlii.org/2012/content_modules-ie8.html By the way, I checked without selectivizr and it doesn't change the problem. Ellen On 23 Apr 2012, at 16:52, Ellen Herzfeld wrote: Hello all, I am trying to use respond.js for media queries. My first tests went fine in ie7/8. But I am now stumped by a problem in both ie7 and ie8 although it seems worse in ie8. On one particular test page, if I use respond.js (and media queries) the fonts and the spacing of elements are not correct. If I remove respond.js and the media queries, all is well. See here for the problem (only seen in ie7/8) : http://qd.xlii.org/2012/content_modules.html And here for the same files (html and css) without respond.js and without media queries. http://qd.xlii.org/2012/content_modules.html Other pages using respond.js and media queries seem to work correctly in ie7/8. See here: http://qd.xlii.org/2012/footer.html http://qd.xlii.org/2012/banner.html http://qd.xlii.org/2012/secondary-nav.html I can't figure out where the problem is. Help please. Ellen Herzfeld __ 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] html5shiv problem
Not one single answer to my question of a few days ago. Strange. Must I infer that either nobody uses html5 + the html5shiv (or shim) directly from googlecode + a print stylesheet and wants this print stylesheet to work in explorer 6, 7 and 8. Or, maybe, you are using this wicked combination of things and it works for you? My test pages have moved : The page with the unsatisfactory fix I found (html5shiv-printshiv.js on my machine and some rules duplicated at the end of the print stylesheet) is here: http://goo.gl/QZHyG The page without the fix is here: http://goo.gl/dp1Dn Of course, the problem only exists in IE 6,7,8 and can be seen using the print preview. I really don't see why the file posted on googlecode doesn't work. And also, why, even with the shim file on my server, I need to duplicate some rules so that IE sees them. Ellen On 13 Feb 2012, at 16:31, Ellen Herzfeld wrote: Hello, According to https://code.google.com/p/html5shiv/, the script enables printing html5 elements in IE 9. What I find is that if I use the script hosted on googlcode.com, it works fine for the screen but doesn't work for printing. However, if I download the source from https://code.google.com/p/html5shiv/ and put the file html5shiv-printshiv.js on my server, and link to it, it mostly works. I say mostly, because I find that some padding and margins aren't seen by IE6, 7 and 8. To fix this problem I just copied the ignored rules into the print stylesheet and then IE applies them. I haven't found anything anywhere about this. Has anyone else noticed these problems. Especially the fact that using the compressed js file from googlecode doesn't work for printing? The page I'm testing this on is here : http://qd.xlii.org/2012-print/archives/klein/miracles.html. Thanks for any feedback. Ellen __ 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] html5shiv problem
Barney, Yes, I know. That's the one I'm using on my server and it works if I use it, with the workarounds I described. But, it is recommended everywhere to link to the compressed file on the googlecode repository. As can be read here: https://code.google.com/p/html5shiv/, and it also says the code for printing is included. But it works only if I put the uncompressed file on my server. It's not a problem with access to the googlecode repository because the pages containing html5 elements look fine in IE on the screen. I was wondering if anyone here was getting correct results with printing in IE 6-7-8 with the combination I tried to use as described below : html5 elements + html5shiv from googlecode + print stylesheet. Ellen On 18 Feb 2012, at 10:06, Barney Carroll wrote: Hiya Ellen, Google search for html5shiv print revealed this: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv-printshiv.js Don't have a printer at hand to test but by all accounts it seems vetted by the experts… Regards, Barney Carroll (+44) 742 9177 278 On 18 Feb 2012, at 08:55, Ellen Herzfeld s...@xlii.org wrote: Not one single answer to my question of a few days ago. Strange. Must I infer that either nobody uses html5 + the html5shiv (or shim) directly from googlecode + a print stylesheet and wants this print stylesheet to work in explorer 6, 7 and 8. Or, maybe, you are using this wicked combination of things and it works for you? My test pages have moved : The page with the unsatisfactory fix I found (html5shiv-printshiv.js on my machine and some rules duplicated at the end of the print stylesheet) is here: http://goo.gl/QZHyG The page without the fix is here: http://goo.gl/dp1Dn Of course, the problem only exists in IE 6,7,8 and can be seen using the print preview. I really don't see why the file posted on googlecode doesn't work. And also, why, even with the shim file on my server, I need to duplicate some rules so that IE sees them. Ellen On 13 Feb 2012, at 16:31, Ellen Herzfeld wrote: Hello, According to https://code.google.com/p/html5shiv/, the script enables printing html5 elements in IE 9. What I find is that if I use the script hosted on googlcode.com, it works fine for the screen but doesn't work for printing. However, if I download the source from https://code.google.com/p/html5shiv/ and put the file html5shiv-printshiv.js on my server, and link to it, it mostly works. I say mostly, because I find that some padding and margins aren't seen by IE6, 7 and 8. To fix this problem I just copied the ignored rules into the print stylesheet and then IE applies them. I haven't found anything anywhere about this. Has anyone else noticed these problems. Especially the fact that using the compressed js file from googlecode doesn't work for printing? The page I'm testing this on is here : http://qd.xlii.org/2012-print/archives/klein/miracles.html. Thanks for any feedback. Ellen __ 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-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] html5shiv problem
Hello, According to https://code.google.com/p/html5shiv/, the script enables printing html5 elements in IE 9. What I find is that if I use the script hosted on googlcode.com, it works fine for the screen but doesn't work for printing. However, if I download the source from https://code.google.com/p/html5shiv/ and put the file html5shiv-printshiv.js on my server, and link to it, it mostly works. I say mostly, because I find that some padding and margins aren't seen by IE6, 7 and 8. To fix this problem I just copied the ignored rules into the print stylesheet and then IE applies them. I haven't found anything anywhere about this. Has anyone else noticed these problems. Especially the fact that using the compressed js file from googlecode doesn't work for printing? The page I'm testing this on is here : http://qd.xlii.org/2012-print/archives/klein/miracles.html. Thanks for any feedback. Ellen __ 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] Inline-block, inline and a list without whitespace
Hello, I have a list that I want to display inline. So I just added that rule to the li. The problem is that the site is actually a bunch of static files generated by a script. And this script, for complicated reasons, does not add any whitespace between the li elements, nor before or after the content of the li elements which contain only one word each. Without any whitespace anywhere, the list elements don't wrap at all and if the list is longer than will fit in the width of the page, it is either cut off (if overflow: hidden) or generates a horizontal scroll bar. I have found that if I use display: inline-block instead of just inline, the li elements wrap as they would if there was whitespace in the line. This works fine in webkit browers, Firefox, Opera and even IE8. But IE6 and IE7 apparently consider inline-block to be just block, so the list items just stack up as usual for a list. I think I understand what is going on here. An inline list without any whitespace is the same as if it were just one long string. Adding whitespace before or after the items in the li separates the string into words. However, the presence or absence of whitespace *between* the li elements shouldn't cut the string. But it does: if there is no whitespace around the list items but there is a space between the li elements, the list wraps. Is there an explanation for this? I know I could ask the developer to add a space between the li elements and then use display: inline, but I'm wondering if there is there a way around the IE6 and 7 problem without doing this. Thanks, Ellen __ 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] Tool to tell me where a rule is used
On 9 Jul 2010, at 14:18, Rob Emenecker wrote: There is no tool that checks CSS against a site looking for orphaned rules in the CSS. At least none that I know of. If the site is not complex, and you have the means for visualizing it offline -- either locally or on a testing server -- I usually just make a visible modification using a BORDER or BACKGROUND-COLOR that is immediately discernable from the site design. Yes, that is what I do if I have reason to think that a rule is not applied somewhere when it should be, usually because of specificity problems. But it seems impractical to do this on a whole site with a main stylesheet that has more than a thousand lines to it. I'll look into the extensions mentionned by David Laakso and Dejan Kozina and report back. Thanks all. Ellen __ 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] Tool to tell me where a rule is used
I tried the three add-ons, Dust-Me Selectors, CSS Usage and Firefinder for Firebug (most likely a bit rapidly) and all three seem to get me at least some of the information I need. I only have 10 pages done at this time and it was already a bit fastidious going to all of them one by one to activate the add-ons. However, Dust-Me Selectors is certainly the most mature of the three and lets you spider the site with a sitemap and also save the data. CSS Usage remembers what was seen previously when going from one page to another until you clear the data. It seems to ignore some pseudo-classes: they are marked unseen but I'm sure they are used. FireFinder does one page at a time, but the point of this add-on is different. In my short test I found two selectors that were not used, although I had gone through the stylesheets by hand not long before. I don't even know how they got there... Probably they got left in place after I changed the html of the page. It goes to show that such tools are useful (unless you feel unused selectors do no harm, which could be a valid point). So I think I'll keep them all and see how it goes as I do more pages. Since there is a plan to have a xml sitemap when going live, I should be able to use that for the final check. If anyone finds anything else, please share. Thanks, Ellen __ 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] Tool to tell me where a rule is used
Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? Ellen __ 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] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:04, David Laakso wrote: Perseverance and a clock without hands work well... :-) In the meantime, this finds unused CSS selectors: https://addons.mozilla.org/en-US/firefox/addon/5392/ Best, ~d Thanks for the tip. I'll try it out and will report back. Strange that this doesn't seem to be something that was seen as a need a long time ago. To tell the truth, I didn't formulate the need to myself till recently. But then it may be that when using lots of ids and classes everywhere, as I did previously, it's much easier to see and find things. This time around, I'm trying, for a number of reasons, to limit classes and ids to a bare minimum. Ellen __ 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] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:01, Chris F.A. Johnson wrote: There's a standard tool on *nix systems called grep. For example, searching for the class 'nav', this will print the line numbers as well as lines containinf it: grep -n 'class=.*nav.*' file.html I believe it can be installed on Windows systems. I'm acquainted with regular expressions and have a number of editors on my Mac that I could use. The problem, which I apparently didn't make clear in my initial post, is that I use very few ids and classes. So I don't think grep will be much help when I'm using mostly descendant selectors. Ellen __ 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] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:00, Jay Tanna wrote: The only way I can think of is to to do a search for class name or ID name. Notepad is pretty good doing this. Try Edit, Find. Then you can use Find Next to go to the next occurence. For ID you will have only one item on the page so that is not the problem. hth As I said in my post, though obviously not clearly, I use very few classes and ids. I'm on a Mac and have powerful text editors that can search through many files quickly, even using regular expressions. But with mostly descendant selectors, I think it would be mostly useless. Ellen __ 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] Why scrollbars in IE7?
Hello,
Can anyone help me understand why IE7 (and not IE6 or IE8, nor FF or Safari or
Opera) puts scrollbars on one (and only one) section of this page:
http://ansible.xlii.org/quarante-deux/2010/archives/klein.html
It's the second section of the content, with id=prefaces
If I put
section {
overflow: hidden;
}
in the ie7.css file (served through a conditional comment), the scrollbars
disappear. However, I don't see why the problem exists only on one section.
I would like to know what's going on to avoid letting the problems, and the
fixes, pile up.
Thanks,
Ellen
__
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] Why scrollbars in IE7?
On 2 Jul 2010, at 16:48, Gabriele Romanato wrote: I see some italic text at the bottom of your page. Maybe this test of mine might be helpful: http://www.css-zibaldone.com/listing/cssd/italic-bug/floats-positioning.html HTH :-) Many thanks. That was it. If I remove the italics, the scrollbars disappear. So, I'll just add overflow: hidden; and keep the italics. Ellen __ 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] Mobile Safari ghost border bug?
I just noticed something funny while checking out a design on my iPhone and iPad. You can see it in the test page here: http://ansible.xlii.org/web_design/mobilesafari/ghostborder.html As you can see (in Mobile Safari only), although the sections have no margin, no padding, no borders, there is a faint red border between the sections. As far as I can figure it out, it is because the section blocks don't stack up on top of each other seamlessly in Mobile Safari, letting the red background show through as a sort of ghost border. On every desktop browser I tested (Safari, Firefox, Opera, Chrome) this does not happen. If you add a padding or a white border to the sections, the line gets fainter but does not disappear. To remove it, the only workaround I found was to give a white background to the container, here div#content. I tried not using the html5 element section, replacing it by a div, but it doesn't change anything. Is this a known problem? Is there another workaround? Ellen __ 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] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
On 22 May 2010, at 2:42, Thierry Koblentz wrote: I don't think the author tested these rules in IE lte 6, because as far as I know these rules are *ignored* by IE. Hello again all, After the great enthusiasm generated by my innocent idea of using the universal ie6 stylesheet for IE5 and IE5.5, and not for IE6 for which it is intended, I decided to do exactly what I had wanted to avoid... I set myself up a test machine with IE5 and 5.5. Yes, I did. And I can report back that the universal ie6 stylesheet IS NOT FOR IE5 AND 5.5. The resulting page (mine anyway) is worse, much worse, than no styling at all. If the user may think that something is wrong with his machine when he gets a totally unstyled page, then when he sees this one, he'll be *sure* there's something very wrong (maybe with the person responsible for the mess). He will hopefully decide to upgrade immediately (which may be a reason to use it after all), and if this is impossible, he will go back to pen and paper, abandoning the web and all its horrors. So the universal ie6 stylesheet goes to the trash. I think I'll do a custom minimal stylesheet for IE5, 5.5, and IE Mac at the very end of the development so I won't be tempted to add or remove anything just for those oldies. Topic closed... Thanks for setting me straight. Ellen __ 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] search button drop
On 22 May 2010, at 23:54, David Laakso wrote: opera:configminminimum font-size32px (default is 9, I run Opera at twice default all the time). Your little guy is a little clipped, about the same amount as in FF at 16.. In my Opera (version 10.53 on Mac) I finally found the setting in Opera preferences advanced fonts. Yes, I see the clipping at the top of the image. Dunno, Badly clipped at min font-size 16px (user default) at 800 and a little clipped at 1680 in Mac FF/3.6.3. OK, I'll try to see what I can do to fix this. I would not lose any sleep, or throw yourself through a closed window, over all this-- but is a good thing to know about from an accessibility view point. Of course. The point of coming over here and asking questions is to get enlightened, not to get good enough style opinions. I can get those anywhere. So thanks for insisting. Ellen __ 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] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
On 22 May 2010, at 2:42, Thierry Koblentz wrote:
Bravo for trying to support as many browsers as possible, and for*not*
considering the universal ie6 styles sheet for IE6.
And when using it for IE5, you may want to remove/ignore some of therules
in there: the CSS expression, all the elements that you know wouldnot be
part of your documents, or rules you do not think are necessary.
For example this rule:
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin : 0; }
that follows this one:
img { margin : 0; }
Or rules like these:
blockquote:before, blockquote:after, q:before, q:after { content :; }
blockquote, q {quotes : ; }
abbr { border-bottom : 1px dotted #666; }
I assumed that any rules having no target in my documents would be
ignored so there was no reason not to leave them there. Am I wrong?
Actually, it is the opposite, there is no reason to leave them in.
If you know that some rules will serve no purpose, then why would you want
to keep them in?
http://carsonified.com/blog/design/setting-rather-than-resetting-default-sty
ling/
The problem is that I assumed (again) that the creators of the
universal ie6 stylesheet had also tested it for IE lt 6 and any
changes I made would NOT be tested.
I don't think the author tested these rules in IE lte 6, because as far as I
know these rules are *ignored* by IE.
Also you'd be removing declarations or rules, not adding anything, so I'd
say the testing part is irrelevant.
Thierry,
Your remarks are interesting but they leave me a bit confused. For me, there
are three possible ways of addressing IE less than 6 (for which I have no test
machine) :
- don't do anything special and don't care what the page will look like. It may
be complete chaos, unreadable, but that is not my problem;
- remove all styling and the page appears with the browser's default styles.
This was what I was planning to do before I came across the universal ie6
stylesheet;
- use a special, simplified stylesheet that will produce a better user
experience than the two previous options. I thought that the universal ie6
stylesheet could be a good answer.
Of course, I can, as you suggest, remove any rules that obviously don't apply
to my site. But the whole point of using such prepackaged stylesheets is to
minimize work. Going painstakingly through each rule to see if it applies or
not seems a waste of time, especially for a large site. It is also much easier
to update if a new version is made available. I don't use frameworks, but I'm
sure those who do end up with a whole lot of html and css that is not really
relevant to their site. Are they supposed to remove all the cruft? And do they
actually do it?
The question is, aside from the aesthetic aspect of keeping everything clean,
is there a compelling practical reason not to use the universal ie6
stylesheet for IE5 and IE5.5 as is?
As for the irrelevance of testing when you *remove* things, as opposed to
*adding* things, I don't agree. I have come across many instances of situations
where removing something has an effect on the overall result. So, if you say
that the authors of the universal ie6 stylesheet have not tested it at all in
IE5 and IE5.5 (something that I may ask them about) then I think the best
solution for me is to serve an unstyled page to these browsers.
What do you (and others) think?
Ellen
__
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] search button drop [was Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac]
On 22 May 2010, at 4:33, Philippe Wittenbergh wrote:
To see the first new page on the test server :
http://ansible.xlii.org/quarante-deux/index5.html
The search button ('rechercher') drops below the search input field on my
side (with minimum font-size set to 12px).
Philippe
---
Philippe,
I didn't think about the minimum font-size setting... Indeed, mine is set to
10px, so the button was OK.
I had positioned both the navigation bar (nav#sitenav) and the search field
absolutely, one to the left, the other to the right. I chose this method
because, with this rewrite of the site, my idea is to avoid extraneous divs as
much as possible. But the only fix I found was to wrap the navigation bar and
the search form in a new div, position this div at the top and then float the
search form to the right. I also had to move the search field down in the html
(I had wanted it at the top when the page was read unstyled), to get the
masthead out of the div.
This works fine in all my test browsers. However, now, when the window is
narrowed, the tabs wrap to a second line. With the previous absolutely
positioned elements, the search field overlapped the tabs (and hid the ones to
the right) but the tabs didn't wrap.
You may ask, why let the window get narrow enough to wrap? The only reason is
that I like fluid layouts... So this one is actually a sort of hybrid, with a
max and min-width, but a bit fluid nonetheless.
Thanks for pointing out the problem.
Ellen
P.S. The test page has moved :
http://ansible.xlii.org/quarante-deux/2010/index5.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/
[css-d] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
Hello all, I'm starting work on a new look for a large site that I did a number of years ago. This time, it's HTML5 for the semantics, and a bit of CSS3 or -moz and -webkit stuff. I develop on a Mac using Firefox, but test everything in Safari, Chrome and Opera (for Mac). On Windows (WMWare fusion virtual machines), I have IE6, IE7 and IE8. For IE I'm using conditional comments. Actually, the design is, at this point, quite simple and I haven't needed many lines in the IE specific stylesheets up to now, even for IE6. The previous version of the site was done in 2003 and 2004. I used the usual hacks when needed and tested at the time for IEWin 5, 5.5. Now, I don't have IE5 or 5.5 anymore and don't want to spend time doing fixes for them. However, I checked the logs and there are still a (very) few visitors using these browsers. I'm thinking of using the universal ie6 stylesheet from http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/, but only for IE5 and 5.5 for Windows. Since I can't check it out, could somebody please confirm that this stylesheet (ie6.1.0.css) will do the job, as it's intended for IE6. For IE Mac, I don't know what to do. I would like to serve it the same simplified stylesheet but it seems conditional comments don't work for IE Mac. What would be the best alternative that will leave the smallest footprint in my html? Thanks, Ellen Herzfeld __ 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] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
On 21 May 2010, at 15:00, Philippe Wittenbergh wrote: On May 21, 2010, at 8:33 PM, Ellen Herzfeld wrote: For IE Mac, I don't know what to do. I would like to serve it the same simplified stylesheet but it seems conditional comments don't work for IE Mac. What would be the best alternative that will leave the smallest footprint in my html? I you absolutely feel the need to support IE5 Mac, this old page of mines has some possible solutions: http://l-c-n.com/IE5tests/hiding/ I still have an old Mac here with system 9 with EI5.1 and the first page I have done is really awful in it. Previously, I tweaked every rule until I was satisfied, but now, I would just like to present a page that does not look completely chaotic. As I said, I checked the recent log files of the site and I know as a fact that there are still a few visitors using IE Mac. I'm sure the very few people who are still using such an old system do so because they have no choice so I'm just trying to be polite. Anyway, I think, that your (Philippe) page has given me a step towards a solution with this: === /*\*//*/ @import ie5mac.css; /**/ === Unless I'm mistaken, this will direct IE Mac (and only IE Mac) to a specific stylesheet. However, I didn't see any way to prevent IE Mac from reading the other stylesheets that are linked in the head (I'm not using @import). I would like to avoid using IE Mac specific hacks in the normal stylesheets. But if I have to, so be it. Thanks, Ellen P.S. To see the old site: http://www.quarante-deux.org/ To see the first new page on the test server : http://ansible.xlii.org/quarante-deux/index5.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] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
On 21 May 2010, at 17:09, Thierry Koblentz wrote:
Bravo for trying to support as many browsers as possible, and for *not*
considering the universal ie6 styles sheet for IE6.
And when using it for IE5, you may want to remove/ignore some of the rules
in there: the CSS expression, all the elements that you know would not be
part of your documents, or rules you do not think are necessary.
For example this rule:
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin : 0; }
that follows this one:
img { margin : 0; }
Or rules like these:
blockquote:before, blockquote:after, q:before, q:after { content : ; }
blockquote, q {quotes : ; }
abbr { border-bottom : 1px dotted #666; }
I assumed that any rules having no target in my documents would be ignored so
there was no reason not to leave them there. Am I wrong?
The problem is that I assumed (again) that the creators of the universal ie6
stylesheet had also tested it for IE lt 6 and any changes I made would NOT be
tested.
Ellen
__
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] Serving universal ie6 stylesheet to IE5, IE5.5 and IE Mac
On 21 May 2010, at 19:34, David Laakso wrote: Ellen, Fwiw in your first new page the background-image is a no-show in the current versions of Camino, Opera, SeaMonkey, and Mac IE/5.2. I did not look at the page in a PC. If by background-image you mean the .png to the left of the header, I'm surprised as I see it in Camino and Opera. But if you mean the colored background gradient styled with experimental -moz and -webkit stuff, I consider it eye candy and progressive enhancement. For Win IE 7 and 8, I used the proprietary filters (which seem to work) and for IE6 I just put a normal light brown non gradient background. I might do this for Camino and Opera too but I figure they'll catch up soon enough. And why not IEMac. Seamonkey I don't have. Should I? Ellen __ 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] Border on inline element in last block in IEWin 6
Hello, I encountered an anomaly I hadn't seen before in Internet Explorer 6: the bottom border on an inline element disappears in the last block on the page. Adding a 1px bottom padding fixes the problem. In IE5.5, strangely, there is no problem. In IE5 no problem either, because no border :-) If you want to check it out (only in Internet Explorer 6): http://ansible.xlii.org/web_design/CSS/border-bottom/inline-element-border-bottom1.html I tried to find this documented and maybe explained somewhere but couldn't. Can anyone give me a pointer? Thanks, Ellen -- Quarante-Deux : quelques pages sur la Science-Fiction Ellen C. Herzfeld - Dominique O. Martel http://www.quarante-deux.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Thoughts on line-height
At 11:15 +0200 06.06.2005, Bruno Fassino wrote: Ellen Herzfeld wrote: together. The line-height was set with raw numbers. If I set it to the same value in ems, the discrepancy mostly disappeared. So I did a bit of experimenting here: http://ansible.xlii.org/web_design/CSS/line-height.html [...] Any thoughts? [...] To summarize: In my opinion the differences are due to different roundings algorithms. What is unfortunate is that the same browser apply different roundings depending on the unit used to expressed the line-height, I don't see any reason for this. Bruno [1] https://bugzilla.mozilla.org/show_bug.cgi?id=196270 Ah, Bruno, you break my heart... Here I thought I had found a way to make my page look the same in all browsers :-) Nevertheless, since my prefered browser is Firefox, I'm glad to have found a way to avoid the discrepancy which seems to be just a bug in Gecko. So, for now, I think I'll use ems for line-height anyway to get Gecko and Safari to look more alike, and more like IE too... Another reason is that I recently discovered Xyle scope, which uses the KHTML engine. It knocked my socks off, which is a rare occurence these days. Ellen -- Quarante-Deux : quelques pages sur la Science-Fiction Ellen C. Herzfeld - Dominique O. Martel http://www.quarante-deux.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Xyle scope for Mac: WOW
Hello CSS Mac people, I just discovered a real gem : Xyle scope, an analysis tool for CSS designers. It really wowed me, which is some achievement these days. I have been hoping for something like this for ages. Unbelievably useful for learning, but also for understanding what's going on in any complex CSS situation. http://www.culturedcode.com/ Disclaimer : I am just a user who found something useful and who wants to share. I have absolutely no affiliation with the people who created this software and who sell it (for a very moderate price). Ellen -- Quarante-Deux : quelques pages sur la Science-Fiction Ellen C. Herzfeld - Dominique O. Martel http://www.quarante-deux.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Thoughts on line-height
I had never really gotten into line heights. From my readings on the subject in _CSS: the Definitive Guide_ I had retained that the best way to set line height was to use raw numbers. This I mostly did, unless it didn't work for some reason and then I used ems or percentages. But I noticed recently that some menus using lists really didn't look the same in Firefox and Safari. In Safari, the lines were much closer together. The line-height was set with raw numbers. If I set it to the same value in ems, the discrepancy mostly disappeared. So I did a bit of experimenting here: http://ansible.xlii.org/web_design/CSS/line-height.html My conclusion is that to get the closest match between browsers it seems best to use keywords for the font size and ems for the line-height. The next best match is using percentages (or ems) for the font size and ems for the line-height. Using raw numbers may be easier (no need to set it repeatedly, if the font size varies) but the rendering is significantly different between browsers, especially between Firefox and others. In IEWin using raw numbers or ems gives the same overall size at the first level. Which, I must say, seems to me to be a good idea... Any thoughts? Ellen -- Quarante-Deux : quelques pages sur la Science-Fiction Ellen C. Herzfeld - Dominique O. Martel http://www.quarante-deux.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
