Re: [css-d] IE6 Class block larger
In this instance I have to agree with David. At least one of the DIVs doesn't have an end tag and you've used absolute values to fix the layout location meaning it doesn't work at lower resolutions. I would strongly recommend re-writing the layout to make life easier for yourself! Refer to http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-ems.htm for basic single column layouts that are fluid. Also http://www.simplebits.com/notebook/2004/09/08/centering.html for using standard CSS centering of a fixed layout. ~Mx (: On Feb 17, 2009 5:55pm, David Laakso da...@chelseacreekstudio.com wrote: Christopher R wrote: I appreciate the help David very much, I would just like to know with what I have designed how I could fix that cut off that happens with IE6? www.thecreativesheep.ca/page_error/imagepage3b.html We know what you want. And over many moons, many folks on this list have bent over backward trying to help you. You have ignored all of them. And continue to do so. --Dancing with Wolves __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
At 10:51 PM 2/17/2009 -0500, Felix Miata wrote: ...have nothing to do with the Golden Section, and to me would look I have to wonder if more than a tiny fraction of professional web designers know that that is. Probably far fewer of the zillion hack designers or the junkware they use to create would. Well, for those here who don't know what the Golden Section is, if it's any consolation I haven't got a clue what people are talking about here on this list half the time either! ;) With the assumption that you know what I'm referring to, though, you subsequent points do bring up a whole other can of worms for me... All rendering engines round nominal font sizes to whole numbers of px, but not all browsers use equivalent rounding methods. IE, the dominant overall representative, truncates every computed px size to a whole number, while some popular other browsers use something resembling the mathematical rounding most of us learned when we graduated from simple fractions to decimals in school. This is actually very frustrating to me (now). For all these many past years, I've had my base font size set at 14px -- this was, for the longest time, the recommended size (in px) for general readability. Since being on this list, I've learned that this recommendation is no longer valid, and percentages (specifically 100% for one's base font) are the recommended way to go instead of px. However, when I was doing my font sizing using px, I could very easily size my text, headings, etc. with specific whole, rounded numbers (9px, 14px, 23px, 37px, etc.) no problem at all, but from what you've pointed out, if I start doing things using the far more vague percentages values, then things will simply not quite look as I might expect/hope from one platform/browser to another. So this is all rather ironic: in order to get things to look right, I have to do them in the wrong way (using px), but in order to do them in the right way (using %), then I'll never be sure that it actually looks right (in fact, I'm virtually guaranteed that things will look wrong for some people). Argh...! Ron :/ Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
Ron Koster wrote:
So this is all rather ironic: in order to get things to look right, I
have to do them in the wrong way (using px), but in order to do them
in the right way (using %), then I'll never be sure that it actually
looks right (in fact, I'm virtually guaranteed that things will look
wrong for some people).
Ron :/
What's so difficult about keeping it simple and honoring user default?
body {font: 100%/1.4 sans-serif;}
#primary-content p {/*inherits default*/ }
#secondary-content p {font-size:95%;}
#tertiary-content p {font-size:90%;}
h1,h2,h3,h4,h5,h6 {/*set in whatever percent value rocks your boat*/}
--
A thin red line and a salmon-color ampersand forthcoming.
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] Font sizing
Where did you get 14px as the recommended size for general readability? I've been creating websites since 1993 and never recall seeing that size mentioned. Browser defaults usually equal the operating system default which is on Windows 16px and on Macs prior to OS X generally 12px (Macs with their desktop publishing focus used 1px = 1pt so you could actually hold a ruler to the screen to measure but I digress). Having been concerned with accessibility I've been using ems or percentages since 2001 but then I've never been that concerned if there is a slight difference between one browser and another and I don't expect the web to be like print. As far as I'm concerned it the end result is attractive does a pixel or two difference between two browser really matter? After all people will only see the site in their browser of choice unless it is broken in that browser or they are a web professional who has a reason to check in multiple browsers. Cheryl D Wise -Original Message- From: Ron Koster This is actually very frustrating to me (now). For all these many past years, I've had my base font size set at 14px -- this was, for the longest time, the recommended size (in px) for general readability. Since being on this list, I've learned that this recommendation is no longer valid, and percentages (specifically 100% for one's base font) are the recommended way to go instead of px. However, when I was doing my font sizing using px, I could very easily size my text, headings, etc. with specific whole, rounded numbers (9px, 14px, 23px, 37px, etc.) no problem at all, but from what you've pointed out, if I start doing things using the far more vague percentages values, then things will simply not quite look as I might expect/hope from one platform/browser to another. So this is all rather ironic: in order to get things to look right, I have to do them in the wrong way (using px), but in order to do them in the right way (using %), then I'll never be sure that it actually looks right (in fact, I'm virtually guaranteed that things will look wrong for some people). Argh...! Ron :/ Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ 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] New to List First question.
Michael Adams wrote: Hi David, trimmed To bring it back on track - controlling pages using CSS; i use a well known technique which makes IE5, IE5.5 and IE6 behave very similar to each other. Throw them into quirks mode intentionally, then you only need program for IE6 (unless your customer or one of his major customers use an older browser). The technique is not perfect and i still check across a broader range of browsers with completed pages but IE6 is the lowest i check _during_ development. Rock on! -- A thin red line and a salmon-color ampersand forthcoming. 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] Font sizing
Ron Koster wrote: So this is all rather ironic: in order to get things to look right, I have to do them in the wrong way (using px), but in order to do them in the right way (using %), then I'll never be sure that it actually looks right (in fact, I'm virtually guaranteed that things will look wrong for some people). Argh...! :-) If by wrong you mean: not exactly as you intended, then you're right. It may even end up as the end-user wants, or need, and there's nothing you or anyone else who design for the web can do about it. We web designers create illusions, but there's no reason for us to live in them. Pixel sized text doesn't guarantee the right size anywhere but on our own screen(s) and in our own browser(s), and that's just something all web designers _have to live with_ whether they like it or not. One day, when the average screen resolution is well above 300dpi, we may be able to fine-size text as we like - but only as a suggestion on a browser's default level. No end-users will have to honor our suggestions or use a browser and screen resolution etc. we are familiar with, so it'll still turn out wrong for us but right for them in many cases ... just as it should. It would be far worse if it turned out right for the designer but totally wrong for end-users for all time. There's enough designs that fit such a description out here already, and it would be good if we could break the cycle and let progress in technology work to our advantage - at all ends. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
At 08:03 AM 2/18/2009 -0600, Cheryl D Wise wrote: Where did you get 14px as the recommended size for general readability? I've been creating websites since 1993 and never recall seeing that size mentioned. That's basically when I started, too, and then I was on webdesign-l for many years (indeed, I was on it *before* it even started!), and that's essentially where I got it from. I really wish I had some URLs for you, but I can't seem to find any references in searching my own email archives. I do recall quite distinctly, however, that that figure (14px) was arrived at through various research done by some universities and stuff -- and, at *that* time (when CSS first arrived on the scene), there was also some legitimate reasoning for choosing px over em or %, too. Indeed, this was a BIG thing back at that time, with virtually everyone in the know insisting to go with 14px, and indeed there were various studies that could be pointed to for reference (I just don't know what/where they are any more -- sorry). And so, I took that well-researched, well-heeded advice, and for the next 10 years I did everything in a way that would ultimately prove to be wrong (in the long run -- although who knows where we'll be in another 10 years???). Ron :/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-color issue
On Tue, 17 Feb 2009 20:00:21 -0500, Ron Koster wrote: At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. [...] Firstly, from past threads, my understanding is that one shouldn't be going any smaller than 100% -- or at least should try not to -- if only to be in keeping with whatever it is that any particular user has set their own settings at, so wouldn't going as small as 69% (or whatever) be *too* small? For the main content, yes, I agree. But side notes, copyright notices, and the small print I'd use the smaller sizes, although I avoid smaller than 75% myself. ~~ Secondly -- and perhaps more importantly -- in recommending those specific percentages, are you saying that things go funny in some browser or platform if those exact percentages aren't used -- like if I used, say, 76% or 85% or something? When scaling in EM sizes, for margins, padding, etc., I found these sizes give most consistent results. I tested scaling from 1px to 40px at a nominal 16px for the BODY font-size (at 96 DPI). Using the calculated theoretical values, e.g. 13/16 to get 81.25% for a nominal 13px font-size actually gave me 12px in Safari, which seems to ignore anything after the decimal point. ~~ And what about for percentages higher than 100% (for headings or whatever)? Use the calculated values - 125% for 20px for example. The rounding issue does not seem to affect larger sizes so much, although rounding up to the nearest whole percent, or .01em, works best here, too. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
At 09:30 AM 2/18/2009 -0500, David Laakso wrote:
What's so difficult about keeping it simple and honoring user default?
body {font: 100%/1.4 sans-serif;}
#primary-content p {/*inherits default*/ }
#secondary-content p {font-size:95%;}
#tertiary-content p {font-size:90%;}
h1,h2,h3,h4,h5,h6 {/*set in whatever percent value rocks your boat*/}
Sure! Why not?! But then what's the point in studying typography, and
art, and aesthetics, and what's the point of trying to do anything
with CSS and trying to get things to look good?
The point that I was making -- what my question (and frustration) is
-- is that as Felix pointed out, things can go screwy if/when one is
using more vague specifications like 90% of some user's system
default of 12pt (or whatever) in comparison to another platform
and/or browser. If I specify all my various font sizes in pixels then
everything will *proportionally* all be exactly how I want them to
look, but if I use percentages then that's simply not the case --
that page that Felix created...
http://fm.no-ip.com/auth/Font/font-rounding.html
...shows that issue perfectly.
And hey, maybe these slight differences don't matter to you or
others, but they matter to me. Perhaps I'm just being too picky,
though, I don't know -- maybe I've hung around with type (font)
designers too long, where it matters if that teeny-tiny serif that
one can only see under a microscope is a billionth of a millimeter
off. And as a graphic designer/digital artist, too, when I create a
piece of artwork it can matter a great deal to me if a single pixel
(out of thousands or millions) looks wrong. In that same regard,
when I create a web site (for myself, at least) my desire is not just
to create a repository to dump text/information, but to create a work
of art, where viewing the text on the page (even if it was pure
gibberish, or written in Arabic or Russian characters or something)
is also visually pleasing to the eye. If I wanted to specify, say, my
list items to be 85.4% of my base font size, then if they end up
being 80% instead (because of the issues that Felix points out),
well, to me it just wouldn't look right.
Hence my frustration...
Ron :/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
On 2009/02/18 08:50 (GMT-0500) Ron Koster composed: However, when I was doing my font sizing using px, I could very easily size my text, headings, etc. with specific whole, rounded numbers (9px, 14px, 23px, 37px, etc.) no problem at all, but from what you've pointed out, if I start doing things using the far more vague percentages values, then things will simply not quite look as I might expect/hope from one platform/browser to another. Is this your ultimate goal: getting everything set up to fit into some particular combination of relationships that look nicely together, and hopefully work that way as well? You can, as long as you do two things: 1-remember that you're designing for a variable and flexible viewing space, not paper, walls or billboards, and maintain realistic expectations 2-design using tools designed for that purpose. You have to choose tools that accommodate the user interjections that cause problems. You know users can and do use zoom and minimum font size, but when those hit a content space defined in px, the fit disappears. The answer is, don't size content space in px, but instead something that shrinks or grows in direct proportion to the content. Throw away the fixed size measuring stick, and use one that changes with the interjections. Two do that, em, %, though the former is more directly related to content, while the latter relates better to available space. Very simple example: http://fm.no-ip.com/auth/Sites/dlviolin.html Another: http://fm.no-ip.com/auth/Sites/ksc/ More complex examples are provided on http://cssliquid.com/ . Relative sizing is not an easy solution, because it can't be applied to background images, and proportioning of images by existing rendering engines is considerably worse than ideal. But it's certainly better than illegible, missing, overlapping or otherwise broken content. So this is all rather ironic: in order to get things to look right, I have to do them in the wrong way (using px), but in order to do them in the right way (using %), then I'll never be sure that it actually looks right (in fact, I'm virtually guaranteed that things will look wrong for some people). This is the way it has been for years already, since designers were given CSS and px to size web objects with. Then it got worse when browser developers gave users such defenses as text zoom and minimum font size. Those enabled users to enforce text of adequate size to read, but only when the space provided to contain that text was adequate as well. Page zoom can be an improvement, but zoom minimum are user defenses, and they shouldn't be necessary for astute malleable designs. -- Do not let any unwholesome talk come out of your mouths, but only what is helpful for building others up. Ephesians 4:29 NIV 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/
Re: [css-d] Font sizing
At 04:04 PM 2/18/2009 +0100, Gunlaug Sørtun wrote: We web designers create illusions, but there's no reason for us to live in them. Pixel sized text doesn't guarantee the right size anywhere but on our own screen(s) and in our own browser(s), and that's just something all web designers _have to live with_ whether they like it or not. I understand what you're saying, but specifying font sizes in pixels *does* guarantee that things will look *proportionally* the same, regardless of browser/platform. If I specify my font sizes as: 9px, 14px, 23px, 37px, etc. ...then that's what they'll be, no matter what resolution, browser or platform the user is on, and things will all look *proportionally* exactly how I want them. With that said, however, I do understand all the issues with using px instead of percentages (or em) -- but again, this is just my frustration. One day, when the average screen resolution is well above 300dpi, Well, a 300dpi monitor is certainly another reason to *not* go with px, that's for sure! Ron ;) Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-color issue
On Wed, February 18, 2009 3:38 pm, David Hucklesby wrote: When scaling in EM sizes, for margins, padding, etc., I found these sizes give most consistent results. I tested scaling from 1px to 40px at a nominal 16px for the BODY font-size (at 96 DPI). Using the calculated theoretical values, e.g. 13/16 to get 81.25% for a nominal 13px font-size actually gave me 12px in Safari, which seems to ignore anything after the decimal point. Internet Explorer/Win (at least 6 and 7) also ignores fractional parts of percentages, and also only respects two decimal places on ems: http://www.nickfitz.co.uk/bugs/browsers/css/IE-Win/ie_percent_test.html Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
At 11:39 AM 2/18/2009 -0500, Felix Miata wrote: maintain realistic expectations That much I already learned, many years ago! Are you really really sure? Not really really, just really... ...maybe. Ron ;) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
Ugh. I'm on the verge of just giving up, surrendering defeat, selling my computer, and just making hand-bound books, printed using ink and moveable metal type. It sounds like this is something you have been dealing with for a while, and as someone who works in web and print, and as someone who studies/values fine typography, I can relate. But I think you(the designer) should leave the micromanagement of typographic details to physical media and just try and setup flexible hierarchy and readability in your web designs, as it's (in my opinion) more like software interface design than print design, even though all three share common ancestry and principle. I think when you step into the web world you must surrender the idea of typography being a fine art and see it as a user interface that has some capability to be designed artistically. It's just the nature of the beast, and just as when television was started content was made in a radio format until the true benefits of the platform could be leveraged, web design is still often being looked at as an extension to print design until it's own conventions and philosophies become more prevalent and accepted. It's often very frustrating working for print design studios needing websites for their clients that think that they can manually rag their blocks of text and have it translate to the web, or elegantly justify text... as HJ control is out the window. ~ Joseph __ 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] Superscript issues
Just to change the subject... At 05:12 PM 2/18/2009 +0100, Gunlaug Sørtun wrote: Check out what happens when those sizes meet 'minimum font size' and other barriers across browser-land. So, no, sorry, proportional is not guaranteed, no matter the method. This is, in fact, *exactly* another issue I've been meaning to bring up here. As I mentioned a while ago (in my first CSS Overlords post a while back), I had various problems that I'd been trying to resolve related to line height, etc. Although I had everything looking perfectly fine for myself (just testing in IE and Firefox), these were brought to me when I showed the site to a friend of mine (who's on Mac, using Safari) -- my smaller font sizes weren't smaller, and in particular my superscripts were showing up at virtually regular sizes (but bumped up from the baseline, of course). As it turned out -- as I found out six months later -- the issue wasn't what I was trying (theoretically) to do, but rather that my friend had set his browser to accept only a minimum font size of 14pt, and so anything smaller than that just wasn't, well, smaller. Now, I realize that there's not much I can do if I want some block of text to be smaller, but my question here is what to do about superscripts -- does the fact that people can set a minimum font size mean that we might as well throw superscripts out the window (at least, if we don't want them to end up making a mess of our typography)? In that regard, rest assured that I'm not using superscript all over the place, but I do like to use them in appropriate contexts, for example: - footnotes; - for numbers like 1st, 2nd, 3rd (where the latter half, er, two-thirds is superscripted); - certain words like Ye, Dr, etc. If I put those parts in superscript -- and if a person has a minimum font size (which, of course, is smaller than the typically quite small size of superscripted characters) -- then things start going haywire. Not only do the superscripted look ridiculous (because they're so big), but it also *forces* the line height up for that particular line, regardless of what I've specified as my line height to be (in %). Is there anything that can be done about this -- without just throwing out superscript as an option entirely? Ron :? Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
At 08:57 AM 2/18/2009 -0800, Joseph Sims wrote: It sounds like this is something you have been dealing with for a while, Yes and no, in a way: I suppose I've always been concerned about typographic issues and stuff, but it's really only since I joined this list (last summer) and started taking a closer look at the sites I've created in the past that I began to realize how many issues there are, and how much more I have to learn. All my sites still use tables for layout, for example (please don't shoot me!), and I'm simply just not ready yet, just don't know enough yet, to even consider taking the plunge and changing them all to CSS layouts. Indeed, I feel so ignorant about so much of this stuff that it might well be years before I actually do so -- especially considering that I find myself spending months just trying to figure out the simplest little typographic issues. :/ It's often very frustrating working for print design studios needing websites for their clients that think that they can manually rag their blocks of text and have it translate to the web, or elegantly justify text... as HJ control is out the window. Hey, I have a solution: ALL web sites should be created as PDF files! HTML/CSS be damned! With PDF, everything looks *exactly* how you intended, it's zoomable to any factor you want, and prints out perfectly each time, every time. Phew! We can all relax now... Ron ;) Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ 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] margin: 83_qem?
Hello, I encountered the following CSS declaration: margin: 83_qem Does anyone have any idea what kind of unit it is? Apparently it's used in Safari's internal style sheet (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it mentioned in Nokia documentation (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) Can't find a definition though, and the lack of W3C links suggests that this unit is non-standard. Could someone help? Thanks, __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
From: Ron Koster r...@psymon.com Hey, I have a solution: ALL web sites should be created as PDF files! HTML/CSS be damned! With PDF, everything looks *exactly* how you intended, it's zoomable to any factor you want, and prints out perfectly each time, every time. Every frustrated designer new to the (modern) web reaches this conclusion eventually, although at least you didn't suggest one big gif! :-) Of course, you're not being serious, but this does highlight the key difference: PDFs, etc, are fixed layout formats whilst HTML+CSS is flexible. Obviously, some disadvantages come with that flexibility, but the advantages, in particular accessibility, are not to be sniffed at. The trouble with the PDF approach, of course, is that text does not 'reflow' according to zoom level, so you end up having to horizontally scroll at certain font/window sizes, and that makes reading a document painful beyond belief. PDF was never really intended for screen viewing, but as a printable format, which explains this alternative approach. There's possibly an argument here relating to the standard browser behaviour for 'minimum font size'. Browsers currently 'round up' any fonts below that size to the minimum. It would be an interesting alternative approach (possibly configurable) to *scale up all fonts* until they're at least that minimum, so, at least, everything remains in proportion. This would solve your subscript issue but, I fear, could well end up breaking inflexible designs. Either way, it's not really a practical solution just yet, but something to mull over :-) - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-color issue
David Hucklesby wrote: On Tue, 17 Feb 2009 20:00:21 -0500, Ron Koster wrote: At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. [...] Firstly, from past threads, my understanding is that one shouldn't be going any smaller than 100% -- or at least should try not to -- if only to be in keeping with whatever it is that any particular user has set their own settings at, so wouldn't going as small as 69% (or whatever) be *too* small? For the main content, yes, I agree. But side notes, copyright notices, and the small print I'd use the smaller sizes, although I avoid smaller than 75% myself. Matters of opinion abound. Mine is: No need for anything below 90%. Cope with side notes, disclaimers, copyright, not as small print, but as a diminished value (as in black and white). As, for example, main content on #fff at #000, lessor content at #222, and even lessor content at #333. As ever, Helen PS Did I mention I am blind in one eye, and can't see out the other ;-) ? -- A thin red line and a salmon-color ampersand forthcoming. 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] margin: 83_qem?
Peter-Paul Koch wrote: I encountered the following CSS declaration: margin: 83_qem Does anyone have any idea what kind of unit it is? Apparently it's used in Safari's internal style sheet (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it mentioned in Nokia documentation (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) Can't find a definition though, and the lack of W3C links suggests that this unit is non-standard. Could someone help? Hey PPK-- I believe qem stands for quirky em and is a proprietary Webkit syntax used to refer to a margin which can be collapsed when the page is in quirks mode. [1] If you're anything like me, you're already appreciating the irony that *you're* the one that wrote the list to ask about this. ;-) [1] http://www.opensource.apple.com/darwinsource/10.3/WebCore-106/khtml/css/css_valueimpl.h (about two-thirds of the way down the page) -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] margin: 83_qem?
I encountered the following CSS declaration: margin: 83_qem Does anyone have any idea what kind of unit it is? Apparently it's used in Safari's internal style sheet (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it mentioned in Nokia documentation (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) Can't find a definition though, and the lack of W3C links suggests that this unit is non-standard. Could someone help? Hey PPK-- I believe qem stands for quirky em and is a proprietary Webkit syntax used to refer to a margin which can be collapsed when the page is in quirks mode. [1] Thanks! Odd, but I expected something like this, especially as Nokia uses WebKit as its browser. If you're anything like me, you're already appreciating the irony that *you're* the one that wrote the list to ask about this. ;-) Contrary to popular belief I don't know everything g. [1] http://www.opensource.apple.com/darwinsource/10.3/WebCore-106/khtml/css/css_valueimpl.h (about two-thirds of the way down the page) Thanks! This did not show up in my search results. --- ppk, freelance front-end consultant, agent, and trainer http://www.quirksmode.org/about/ -- __ 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] Superscript issues
Ron Koster wrote:
Just to change the subject...
Ok, but we're still in the same thread :-)
- footnotes; - for numbers like 1st, 2nd, 3rd (where the latter
half, er, two-thirds is superscripted); - certain words like Ye,
Dr, etc.
If I put those parts in superscript -- and if a person has a minimum
font size (which, of course, is smaller than the typically quite
small size of superscripted characters) -- then things start going
haywire. Not only do the superscripted look ridiculous (because
they're so big), but it also *forces* the line height up for that
particular line, regardless of what I've specified as my line height
to be (in %).
Unit-less line-height values works best in most cases. Have you grasped
the difference?
- a 'line-height: 140%' means the line-height is calculated from
font-size of the actual element's parent - not the element itself.
You'll have to keep track of what the parent-element's font-size is to
know what your real line-height ends up as. Same for a 'line-height:
1.4em'.
- a 'line-height: 140%' means the line-height is calculated from
font-size of the actual element itself, regardless of font-sizes in its
surroundings. Nothing to keep track of.
Is there anything that can be done about this -- without just
throwing out superscript as an option entirely?
You can minimize the problem but not eliminate it.
The effect superscript can have on actual line height when subjected to
'minimum font size', can be counteracted by vertical-aligning the
superscript, or subscript, at the baseline, and then offset it by
relative positioning. Since relative positioning does not affect the
actual space, only the visual, the line-height won't be affected. Make
sure the sup's line-height is smaller than that on the paragraph, so it
doesn't blow up the line in its original, non-positioned, space.
I use a different method - styles shown here...
sup {vertical-align: 0.4em; line-height: 0; font-size: 100%;
font-family: Times New roman, Georgia, serif;}
sup.small {font-size: 75%; font-weight: 200;}
...where the line-height is zero on the sup and therefore has little to
no effect on a paragraph's line-height even if the font size gets blown
up for sub.small (which is the real superscript).
Note that I'm also using a first-choice for font-family - Times New
roman - that is visually smaller than the one I use for regular text in
the paragraph - Georgia. This helps make the sup appear smaller in most
cases, even if everything is blown up to above the paragraph's own
font-size.
Haven't encountered any serious blown-up lines or misalignments with
this method so far.
Typography on the web is full of tricks and compromises like the
above, and with a little fine-tuning, and testing of what actually works
and looks ok, the results are not too bad even under stress.
In time we may be able to upload fonts and do other things to improve
the illusions, but existing browsers will still need solutions that work
- somewhat - for years to come.
regards
Georg
--
http://www.gunlaug.no
__
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] Can CSS compare the href to the URL and if they match, highlight the href?
I am working on a site that uses menus that are includes. I have been
wrestling with a way to highlight the link to the page you are on in the
included menu. I have a way that works, but it's kind of labour
intensive - every page needs a unique bit of style in the header. I'm
hoping you guys can suggest something a bit more global.
Here is the site and the related style sheets.
http://www.cantoraccess.com
http://www.cantoraccess.com/css/ca.css
http://www.cantoraccess.com/css/menu.css
http://www.cantoraccess.com/css/ie6-hacks.css
http://www.cantoraccess.com/css/ie7-hacks.css
An example: here is a landing page
http://www.cantoraccess.com/publications/macros.shtml
which uses the included list of links
http://www.cantoraccess.com/includes/pub_macros_articles.shtml
The list of links is also included in all the articles listed on the
landing page as a side bar menu, for example
http://www.cantoraccess.com/publications/macros_2008_resna_library_download.shtml
(publications that only appear in print are turned off. These show up on
the landing page, but not in the menus.)
Currently none of the pages on this site that have included menus have
any highlights in those menus to show what page you are on. I have just
read an article on askthecssguy.com called Showing Hyperlink Cues with CSS
http://askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
I used his samples to come up with this
.menu a[href $='test.shtml'] {
padding-left: 28px;
background: transparent url(../images/braille_arrow.jpg) no-repeat
top left;
font-weight : bold;
color : #66;
}
which I have placed in the head of
http://www.cantoraccess.com/publications/test.shtml
The links in the Related Publications menu on this page are an include
http://www.cantoraccess.com/includes/testinclude.shtml
The link to test.shtml is highlighted on this page because of the
style in the head.
Is there a way to write the style so that it will work without putting a
style unique to each page in the head of that page? Can CSS compare the
href to the URL and if they match, highlight the href? If every body tag
has a unique id and I add a matching id to the link to that page, could
I somehow get the browsers to compare that?
thanks guys!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Superscript issues
Hi Ron, You wrote: ... but my question here is what to do about superscripts -- does the fact that people can set a minimum font size mean that we might as well throw superscripts out the window (at least, if we don't want them to end up making a mess of our typography)? ... IMO, not entirely. I use super- and subscripts in some of my local files that I use at home (on Firefox) and at work (on IE) and was never quite happy with the appearance of the sub and sup markup results as it seemed to always throw my line heights off. I finally gave up and now I use a span with class=sb or class=sp and style the classes with my choice of font size and with positioning to bump the items down and up as needed. I also style the line height of the block element involved with enough room for the repositioned items; I then have enough room for the sub- and superscripts and get uniform results up and down the page. Of course I have had no problems with font size using just the two computers. I recommend you style a span class for your superscripts (You can set your font size and position the superscript however you feel is best), style an appropriate line height for the block elements in which you use the superscripts, and just let those who must (or feel they must) set their own minimum font size do whatever they want to do to louse up their reading. -- Regards, Gene Falck gfa...@merr.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] Superscript issues
I use a span with class=sb or class=sp and style the classes with my choice of font size and with positioning to bump the items down and up as needed. I also style the line height of the block element involved with enough room for the repositioned items; I then have enough room for the sub- and superscripts and get uniform results up and down the page. Of course I have had no problems with font size using just the two computers. I recommend you style a span class for your superscripts (You can set your font size and position the superscript however you feel is best), style an appropriate line height for the block elements in which you use the superscripts, and just let those who must (or feel they must) set their own minimum font size do whatever they want to do to louse up their reading. Why do you use a span with a class when you already have the html tags for them? Can't you just tell the sup and sub tags to look the way you wish with css instead of making new classes? They are already there, and they seem more semantic (maybe not, kinda like b and i, I guess ). Is there something I'm missing? ~Joseph __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
On Wed, 18 Feb 2009, Ron Koster wrote I understand what you're saying, but specifying font sizes in pixels *does* guarantee that things will look *proportionally* the same, regardless of browser/platform. If I specify my font sizes as: 9px, 14px, 23px, 37px, etc. Not really. There is only a loose relationship between font size and how 'big' text looks on screen. http://www.emdpi.com/fontsize.html -- Richard Mason http://www.emdpi.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
Is there a way to write the style so that it will work without putting a style unique to each page in the head of that page? Can CSS compare the href to the URL and if they match, highlight the href? If every body tag has a unique id and I add a matching id to the link to that page, could I somehow get the browsers to compare that? You could probably do something with the CSS3 :target pseudo-class, but it would be awkward at best. Browser support would also be lacking. The best bet is some sort of server side programming or Javascript; however, both would be off topic. __ 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] Can CSS compare the href to the URL and if they match, highlight the href?
Is there a way to write the style so that it will work without putting a style unique to each page in the head of that page? Can CSS compare the href to the URL and if they match, highlight the href? If every body tag has a unique id and I add a matching id to the link to that page, could I somehow get the browsers to compare that? You could probably do something with the CSS3 :target pseudo-class, but it would be awkward at best. Browser support would also be lacking. The best bet is some sort of server side programming or Javascript; however, both would be off topic. Scott - thanks! Browser support isn't too big an issue for this - the site works without it, this just adds a little extra. http://www.w3.org/TR/css3-selectors/#target-pseudo If I understand :target pseudo-class (which I don't necessarily!) it looks like you can take, say, all the anchor links and style them. It seems to be about creating groups, and giving them a treatment. Is there any css approach to comparing two things, and styling according to how they compare? Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font sizing
Bobby Jack wrote: From: Ron Koster r...@psymon.com There's possibly an argument here relating to the standard browser behaviour for 'minimum font size'. Browsers currently 'round up' any fonts below that size to the minimum. It would be an interesting alternative approach (possibly configurable) to *scale up all fonts* until they're at least that minimum, so, at least, everything remains in proportion. This would solve your subscript issue but, I fear, could well end up breaking inflexible designs. Either way, it's not really a practical solution just yet, but something to mull over :-) - Bobby An option some flakes :-) employ, from time to time (I'm one of them), is to design the page right from the first second with 200% declared on the body with no other font-size declared throughout the balance of the style sheet. When all is well cross-browser, 200% is reduced to 100%... -- A thin red line and a salmon-color ampersand forthcoming. 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] New to List First question.
Michael Adams wrote: To bring it back on track - controlling pages using CSS; i use a well known technique which makes IE5, IE5.5 and IE6 behave very similar to each other. Throw them into quirks mode intentionally, After re-reading this a couple of times ... do you mean you *only* throw ie6, 5.5 and 5 into quirks mode? But *not* ie7, 8 or any other browser? And of so, what do you find the best way to do that please? KathyW. __ 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] New to List First question.
Kathy Wheeler wrote: [...] do you mean you *only* throw ie6, 5.5 and 5 into quirks mode? But *not* ie7, 8 or any other browser? And of so, what do you find the best way to do that please? How about this way... http://www.gunlaug.no/contents/wd_additions_16.html regards Georg -- http://www.gunlaug.no __ 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] Can CSS compare the href to the URL and if they match, highlight the href?
Sandy wrote:
Browser support isn't too big an issue for this - the site works without
it, this just adds a little extra.
A bit of unobtrusive Javascript would be a good fit here.
http://www.w3.org/TR/css3-selectors/#target-pseudo
If I understand :target pseudo-class (which I don't necessarily!) it
looks like you can take, say, all the anchor links and style them. It
seems to be about creating groups, and giving them a treatment.
The :target pseudo-class refers to the fragment identifier portion of
your current URI.
So if you're current URI is http://www.blah.com/blah/index.htm#example
AND in that pages markup there is an element with an id attrib equal to
'example', you could give that element a border using this css rule:
*:target {border:1px solid #C00;}
So, if you were willing to apply an id attrib and matching fragment
identifiers to each of your menu links you could achieve your goal. I
won't recommend it though; it feels like an abuse of the fragment
identifier, and the focus of each page will initially be one of your
menu items--an unusual (confusing) page behavior for both mouse and
keyboard users.
--
//
Shawn Lawler
Institute on Community Integration
University of Minnesota
__
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] Styling DD
Hi, I'm trying to remove the indentation from my DD element. Text-indent does not seem to do the trick. Any suggestions? If you're curious, I'm trying to make a family tree (an actual tree) with CSS: dl dt a href=casey.htmlme/a awife/a /dt dd achild1/a achild2/a dl dt achild3/a adaughter in law/a /dt dd ...Grandchildren /dd /dl /dd /dl Thanks! - Casey __ 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] Styling DD
Casey wrote:
I'm trying to remove the indentation from my DD element. Text-indent
does not seem to do the trick. Any suggestions?
dd{margin:0;padding:0;}
-or, more extensively-
dl,dt,dd{margin:0;padding:0;}
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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] Styling DD
On Wed, Feb 18, 2009 at 3:34 PM, Bill Brown macnim...@gmail.com wrote:
Casey wrote:
I'm trying to remove the indentation from my DD element. Text-indent
does not seem to do the trick. Any suggestions?
dd{margin:0;padding:0;}
-or, more extensively-
dl,dt,dd{margin:0;padding:0;}
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
...Wow. I'm surprised it was that simple. Thanks!
-Casey
__
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] Request for validation check
Hi, all: Thanks for all of your past efforts. Could someone please take a look at why this site is not validating. http://www.albanymusic.org/?page_id=182 It's a WordPress site. It was valid yesterday. I don't know what changed or if I changed anything. My suspicion is that the widgets I'm using are the problem. But having removed them as a troubleshooting test only generated another list of supposed errors instead of allowing the page to validate. This is a simple page without any more complex stuff in the body, unlike the other pages. I've done all of my usual debugging tricks, including Firebug and Safari's Web Inspector and I can't see anything obvious. Thanks! mc Melton Cartes An Ad Guy meltoncar...@mac.com 415-621-6501 http://www.anadguy.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] Request for validation check
* Melton Cartes wrote:
Could someone please take a look at why this site is not validating.
http://www.albanymusic.org/?page_id=182
The line
?php _e('abbr title=Really Simple ...
is one reason.
--
Björn Höhrmann · mailto:bjo...@hoehrmann.de · http://bjoern.hoehrmann.de
Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
__
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] Request for validation check
* Melton Cartes wrote: Could someone please take a look at why this site is not validating. http://www.albanymusic.org/?page_id=182 It is not validating because you are much like my sister-- evil and twisted :-) . Back up what you got. --Run what you got through Tidy on Line [1]. --Run what Tidy corrects through the w3c Markup Validation Service [2]. --Manually correct any remaining errors. --Run the manually corrected file through the w3c Markup Validation Service [2]. --Manually corrected any remaining errors. --Run the manually corrected file through the w3c Markup Validation Service [2]. [1] http://infohound.net/tidy/ [2] http://validator.w3.org/ -- A thin red line and a salmon-color ampersand forthcoming. 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/
[css-d] Transparent Rows
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
--
Registered Linux User: #480675
Linux since June 2005
__
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] Transparent Rows
On Wed, Feb 18, 2009 at 4:43 PM, Wade Smart wadesm...@gmail.com wrote:
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
I actually ran into this same problem earlier today. What a
coincidence. You can make two semitransparent PNGs (one white, one
gray), and use them as background images for the rows.
-Casey
__
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] (no subject)
Hi, I'm working with a series of divs: div div.../div div.../div div.../div div.../div div.../div /div The inner divs are all float: left'd. However, when the contents of the divs is too wide for the browser, the line of DIVs break. Is there a way to prevent this, other than setting a fixed width for the container div? (Yes, the alignment of the divs is crucial.) Thanks. - Casey __ 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] Transparent Rows
Casey wrote:
On Wed, Feb 18, 2009 at 4:43 PM, Wade Smart wadesm...@gmail.com wrote:
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
I actually ran into this same problem earlier today. What a
coincidence. You can make two semitransparent PNGs (one white, one
gray), and use them as background images for the rows.
-Casey
20090218 1905 GMT-5
I was actually just trying that out.
I figured out it was actually working in FF but not Opera - which is the
browser this company uses. Too bad though as it looked decent if FF.
:D
Wade
--
Registered Linux User: #480675
Linux since June 2005
__
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] before pseudo element and opera
I am hoping that someone else has experienced this and has figured out some solution, but I just can't seem to... I'd like to put an rightwards arrow in front of a link and using the 2192 code it works fine in safari, firefox and my preview in my css helper. I even added the escaped hexadecimal code for the character entity. It just will not display in Opera (9.63) at all -- is this a bug or am I writing something wrong? It's not just this entity either, the :before won't display any text either. Oddly enough, the :after element works just fine. Is this a margin or padding problem? I know I'm not giving a lot of information, but I don't have a live example and I was just hoping someone has seen this behavior before. Thank you, Scott __ 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] before pseudo element and opera
Scott Schumpert wrote:
I'd like to put an rightwards arrow in front of a link and using the
2192 code it works fine in safari, firefox and my preview in my css
helper. I even added the escaped hexadecimal code for the character
entity.
Do you have a link we can reference?
This works fine with Opera 9.63 on Ubuntu Ibex (x86_64):
~~~
a:before{content:\002192 ;}
~~~
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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] Transparent Rows
Wade Smart wrote:
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
One solution I've used to achieve something similar looks like this:
The CSS
~~~
style type=text/css
div.transparent-bg
{
background: url(http://www.domain.tld/1px-99-50.png);
background: rgba(153,153,153,0.5);
}
/style
!--[if lt IE 7]style type=text/css
div.transparent-bg
{
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#7799,
endColorstr=#7799);
zoom: 1;
}
/style![endif]--
~~~
The HTML:
~~~
div class='transparent-bg'
p
I can has transparent background?
a href='#home-menu'Go Home/a.
/p
/div
~~~
First, I set the background to a semi-transparent PNG [1]. Then, I
immediately override that setting with one for an RGBA background.
Browsers which recognize RGBA as a background-color setting will
override the previous background setting and apply only the RGBA background.
IE7 supports PNGs (more or less) so we leave it alone here. IE6 does
not, so we target it with conditional comments and use the proprietary
gradient filter to allow just the background to be semi-transparent
while leaving our text fully opaque. [2]
Anyway, hope it helps.
[1] data:uri images also work here,
if the CSS for IE6 is extended to include IE7.
[2] The caveat to using (any) filter is that Windows removes the
ClearType settings on blocks that use filtering, so your text
will look a little blockier in the filtered element, though not
in the children if I remember correctly.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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] before pseudo element and opera
Scott Schumpert wrote: It just will not display in Opera (9.63) at all -- is this a bug or am I writing something wrong? It's not just this entity either, the :before won't display any text either. Oddly enough, the :after element works just fine. Is this a margin or padding problem? Can you post a bit of style and markup? I'm using :before in Opera (9.63, 10a older versions), and haven't observed any problems. It is however a possibility that the :before (content) gets stacked behind regular elements in certain layout situations and must be lifted up front. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fixed header with html select
Hi CSS-discuss list, I have read the css article for implementing fixed header in the following URL: http://www.imaputz.com/cssStuff/bigFourVersion.html And it also gives a solution for hiding the html select element. But when I did that following the instructions, there was a problem: The table has more than 400 rows, and when I scroll the scrollbar, the browser stopped working. While, when I decrement the rows count, 40, for example, the hiding operation works fine. Browser: Microsoft IE 6.0 OS: Microsoft Windows 2003 Server Thanks in advance. Vic Zhang -- Power up the Internet with Yahoo! Toolbar. http://pr.mail.yahoo.co.jp/toolbar/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed header with html select
I'd say it's just too much for the browser. Is there no way you can paginate the data? zhangatva...@yahoo.co.jp wrote: Hi CSS-discuss list, I have read the css article for implementing fixed header in the following URL: http://www.imaputz.com/cssStuff/bigFourVersion.html And it also gives a solution for hiding the html select element. But when I did that following the instructions, there was a problem: The table has more than 400 rows, and when I scroll the scrollbar, the browser stopped working. While, when I decrement the rows count, 40, for example, the hiding operation works fine. Browser: Microsoft IE 6.0 OS: Microsoft Windows 2003 Server Thanks in advance. Vic Zhang -- Power up the Internet with Yahoo! Toolbar. http://pr.mail.yahoo.co.jp/toolbar/ __ 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] (no subject)
On Wed, Feb 18, 2009 at 8:02 PM, Casey casey.li...@caseyftw.com wrote: Hi, I'm working with a series of divs: div div.../div div.../div div.../div div.../div div.../div /div The inner divs are all float: left'd. However, when the contents of the divs is too wide for the browser, the line of DIVs break. Is there a way to prevent this, other than setting a fixed width for the container div? (Yes, the alignment of the divs is crucial.) Thanks. - Casey Why couldn't you set a fixed width (perhaps to something arbitrarily high)? --Ankeet [ http://www.skyisturningred.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] (no subject)
On Wed, Feb 18, 2009 at 7:30 PM, Ankeet P mythic.bo...@gmail.com wrote: On Wed, Feb 18, 2009 at 8:02 PM, Casey casey.li...@caseyftw.com wrote: Hi, I'm working with a series of divs: div div.../div div.../div div.../div div.../div div.../div /div The inner divs are all float: left'd. However, when the contents of the divs is too wide for the browser, the line of DIVs break. Is there a way to prevent this, other than setting a fixed width for the container div? (Yes, the alignment of the divs is crucial.) Thanks. - Casey Why couldn't you set a fixed width (perhaps to something arbitrarily high)? --Ankeet [ http://www.skyisturningred.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/ Well, my contents are very variable. Sometimes, it's only a couple hundred pixels while at other times it's a couple thousand pixels, and I don't want there to be too much whitespace. (Unless there's a way to collapse whitespace, in which case, please tell me.) (By the way, I had originally typed a subject, but I sent it with the wrong email, so it bounced. When I sent the new message with the correct email, I forgot the subject.) -Casey __ 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] Request for validation check
Sandy wrote: David, thank you, THANK YOU, thank you for this link! [1] http://infohound.net/tidy/ Sandy You are welcome. I hope all works out for you. Do you have a CSS question, as well :-) ? -- A thin red line auttnd a salmon-color ampersand forthcoming. 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] (no subject)
Well, my contents are very variable. Sometimes, it's only a couple hundred pixels while at other times it's a couple thousand pixels, and I don't want there to be too much whitespace. (Unless there's a way to collapse whitespace, in which case, please tell me.) (By the way, I had originally typed a subject, but I sent it with the wrong email, so it bounced. When I sent the new message with the correct email, I forgot the subject.) -Casey Setting the 'white-space' property to 'no-wrap' takes care of eliminating word wrap in each separate element. As for eliminating whitespace in between the divs, I still got nothing. --Ankeet [ http://www.skyisturningred.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] (no subject)
Casey wrote:
div
div.../div
div.../div
div.../div
/div
The inner divs are all float: left'd. However, when the contents of
the divs is too wide for the browser, the line of DIVs break. Is
there a way to prevent this, other than setting a fixed width for the
container div? (Yes, the alignment of the divs is crucial.)
Presumably, you want your divs to act like the cells of a table. In that
case, something like this might work for you:
CSS:
~~~
.table-row-ish
{
white-space:nowrap;
}
.table-row-ish div
{
display: inline-block;
display: inline !ie;
zoom:1 !ie;
}
~~~
HTML:
~~~
div class='table-row-ish'
div.../div
div.../div
div.../div
div.../div
div.../div
/div
~~~
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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] (no subject)
On Wed, Feb 18, 2009 at 8:09 PM, Bill Brown macnim...@gmail.com wrote:
Casey wrote:
div
div.../div
div.../div
div.../div
/div
The inner divs are all float: left'd. However, when the contents of
the divs is too wide for the browser, the line of DIVs break. Is
there a way to prevent this, other than setting a fixed width for the
container div? (Yes, the alignment of the divs is crucial.)
Presumably, you want your divs to act like the cells of a table. In that
case, something like this might work for you:
CSS:
~~~
.table-row-ish
{
white-space:nowrap;
}
.table-row-ish div
{
display: inline-block;
display: inline !ie;
zoom:1 !ie;
}
~~~
HTML:
~~~
div class='table-row-ish'
div.../div
div.../div
div.../div
div.../div
div.../div
/div
~~~
Hope it helps.
--Bill
Thanks! That works fairly well. I'm curious, what do !ie and the
zoom property do?) It works perfectly in Firefox, but in IE and
Safari, there's some quirk involving vertical alignment.
- Casey
__
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] (no subject)
Casey wrote:
Thanks! That works fairly well. I'm curious, what do !ie and the
zoom property do?) It works perfectly in Firefox, but in IE and
Safari, there's some quirk involving vertical alignment.
!ie is a CSS filter used to target the MSIE family of browsers and zoom
is a Microsoft proprietary syntax commonly used (as in this case) to
ensure an element 'hasLayout' for IE. The !ie in this case is
unnecessary as no other browser recognizes it, but I use it to quickly
find IE-only rules when separating my style block out into external
(conditional comment filtered) style sheets.
Changing the second rule to:
.table-row-ish div
{
display:inline-block;
vertical-align: bottom;
display:inline !ie;
zoom: 1 !ie;
}
...should help with the vertical alignment issues.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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/
