Re: [css-d] How to: enlarge all content for accessibility
bill: Here’s something you may want to consider. http://sperling.com/examples/zoom/ It shows that using ems is a good way to handle both text and images with regard to zooming. Cheers, tedd ___ tedd sperling t...@sperling.com > On May 28, 2016, at 6:38 AM, william drescher wrote: > > My wife is vision impaired. I am writing a web application for her. How can > I style the page so it displays at 300%. I can increase the fontsize, but > then it does not increase the size of the form elements. I want to increase > everything. > > Changing the dpi of the display works, but then it is a problem for me. > > Any suggestions will be appreciated. > > -- > bill > > __ > 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] keyframe:hover
On Jan 11, 2015, at 5:25 PM, Crest Christopher wrote: > > I want to create an animated:hover with @keyframe using these three sprite > images <http://www.thecreativesheep.ca/wdp/wip/css_keyframe.htm> but I'm not > sure if this is possible with the tag or if I have to use > background-images, instead ? > > Christopher Christopher: This is as close as I can get to an animated hover. First part is simply a image replacement on hover. The second part is an animated GIT. http://webbytedd.com/bb/replace-image3/ There are other examples and the code is there. Use as you may. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screens overload
Crest: This is not all, but it's a good start: http://mydevice.io/devices/ Cheers, tedd ___ tedd sperling t...@sperling.com > On Nov 12, 2014, at 1:43 PM, Crest Christopher > wrote: > > I have a general question, how many screens are there ? > > There is your mobile phones (Android, Apple, Lumia, BlackBerry), then there > is your tablets (iPad, Samsungs etc) followed by TV, XBox, Playstation, > Nintendo DS, last but not least Desktop/Laptops, am I missing any ? > > Want to know is what is the common ground in terms of web browsers do they > share, including screen sizes ? > > Christopher > __ > 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] rem units and %
On Sep 20, 2014, at 8:49 PM, Felix Miata wrote: > I know it's old, but the point is it's insane that one user stylesheet > applicable to just one site would have reason to be so big. > -- Felix: As usual, you're right. I think the problem is laziness and ignorance. They (the people who wrote the code) don't understand the css and instead of learning, they throw everything they have at it until it works (sort-of). Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 7:00 PM, Georg wrote: > Den 19.04.2014 16:00, Tedd Sperling wrote: >> 4. Lastly, use ems for images as well. That way your entire site scales well >> with zooms. > > I find there is something wrong/missing in that statement, as images scale > with browser-zoom no matter how we define sizes. Of course no harm done in > setting image dimensions in 'em', but not setting dimensions works equally > well. And, in images 'width' and 'height' attributes it is pixels anyway ... > if those are used to speed up page-stabilization. The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. > Having images scale with text-size is not what I would call good practice, as > that makes "text-only zooming" pretty useless for end-user. While respecting your opinion (I've read your post for many years and you provide great advice). I wouldn't call it "Good" or "Bad" practice. For example, if you have poor eyesight (i.e., older) and just want to see the page larger by using zoom, then it's good practice -- don't you think? > I only define 'max-width' for images, to make sure they stay within available > space regardless of screen/window/page width, and for this I use '%' of > container width. The rest I leave to end-users. That's one way to do it. But I still think that practice can confuse older users. I know if I were to zoom something so I could see it better (as I often do), it would confuse me if suddenly the *layout* became "broken" and text/graphics didn't hold their respective positions. But what do I know? I'm just an old guy. Cheers, tedd PS: However, please note that Browsers' zooms scale different. IOW, zoom levels (i.e., magnification) for one Browser doesn't always match the zoom level for another -- there are scaling differences. Or least that's what my old test have shown -- however, those test were taken many years ago. ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:11 PM, Tim Dawson wrote: >> On 19/04/2014 15:00, Tedd Sperling wrote: >> I just set my to whatever size I want knowing that 1em is equal (in >> most cases) to 16 >> pixels. No need for percentages in setting font sizes. > If you set your font-sizes in ems then I think you are treating the em as a > constant (normally 16px). Though I notice you actually use descriptive names > such as 'xx-large' in at least some instances. I also spotted some margins > and padding in px. Yeah, that's because I haven't redone my site in years. It's a case of "do what I say, not what I have done". Eventually I'll make my site only ems measurement. Thanks for reminding me. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
Hi gang: Is anyone else receiving inappropriate pics with this subject line? Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 4:19 PM, Tim Dawson wrote: > On 19/04/2014 15:00, Tedd Sperling wrote: >> > as the font-size >> increases, to get the same pixel equivalent."> > Given that my original margin/padding around an with font-size 250% was > in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were > 2.5 times too high. So conversion for has to be 1 em = 40px to get the > same on screen appearance. If that's wrong I haven't understood ems at all. That sounds confusing. I just set my to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:27 AM, Tim Dawson wrote: > Changing the media query limits to ems at the rate of 1em = 16 pixels worked > well. > Likewise for widths and anywhere with default text size. > > But widths, margins (in fact any dimension you care to name) went haywire in > headings with a different font-size. All my font-sizes are percentages. > Obviously the em value has to be reduced as the font-size increases, to get > the same pixel equivalent. > > I'm tempted to leave margins, padding etc. in headings as pixels and just > change them in the media query if they become unworkable. Particularly when > it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with > several decimal places of ems (which probably convert to sub-pixel > dimensions). > > What do others do ? I use ems for everything. I find: 1. Browsers handle "several significant decimal places" without any noticeable problem. 2. Headings using ems present extremely well without any noticeable problem. 3. ALL measurements, including margins and paddings, work well without any noticeable problems. The *only* problems I have ever encountered has been mixing measurement types. My advise, pick something and stay with it. 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: http://sperling.com/examples/zoom/ HTH's tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox and page inflation
On Apr 8, 2014, at 1:12 PM, Felix Miata wrote: > On 2014-04-08 09:42 (GMT-0400) Tedd Sperling composed: > > Offlist. I don't think this qualifies as topical for css-d. > >> I would like to hear your thoughts/recommendations on Mobile >> devices for clarification and advice? > > I consider them for the most part more toys than tools. I own no mobile > device, and do not anticipate ever owning one. I leave here infrequently. > I've been fueling my car about 3-4 times per year for the past several years. > Cell service here is non-existent for any but Verizon users. Hand held > devices I'm familiar with are hard for those with big fingers and tired old > eyes to use. Mobile devices are a scourge on traffic safety. I don't > anticipate doing anything to promote or facilitate their use. Interesting. 1. Smart phones (and even tablets) have surpassed Desktop computer sales. More people are surfing the Net via these Devices than Desktops. 2. Furthermore, while native application development is mostly confined to Java for Android and Objective C for iOS, Web Applications for these Devices using HTML, CSS, Javascript, PHP, and Mysql is becoming a major player in Mobile Application Development. Considering both, I think how CSS is used by Mobile devices is worthy of consideration and study. After all, if we consider how Web Sites are shown via different Desktop Browsers, which is often the topic of this list, then shouldn't we also consider how this technology is used by Mobile Browsers as well? This is a bit like being an expert on transportation discussing buggy-design while thousands of Fords roll off the assembly line. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox and page inflation
On Apr 7, 2014, at 3:28 PM, Felix Miata wrote: > I suggest to start thinking like a puter instead of a human. By that I mean > the decimal system is fine for common measurements by ordinary humans. But, > puters use binary, and its octal and hexidecimal extensions, which suggests > humans working extensively with puters are better off adapting, using > computer math instead of the decimal system for sizing. > > Computer fonts are happiest using harmonics of the 8 bit byte, which is why > 96 DPI and 1/4 multiples of it (120, 144, 168, 192, etc.) work well, all > being evenly divisible by 8. This harmonizes nicely with the most commonly > shipped 16px browser default text size. Embracing this fortune instead of > applying the convoluted X.625X1.6 methodology should pay off exponentially. Felix: I applaud your efforts to educate. >From my perspective, Mobile devices bring their own mix of DPI resolutions and >"pixel' definitions which only compounds the problem for me. However, my >understanding may be fuzzy in that regard. So of this I don't understand yet. As such, I would like to hear your thoughts/recommendations on Mobile devices for clarification and advice? Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox and page inflation
On Apr 4, 2014, at 6:38 PM, Felix Miata wrote: > On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed: > >> Looking for insight into (and potential correction to) the latest Firefox >> browsers inflating the overall size/resolution of webpages. We use a >> mobile first responsive upwards, and in the newest Firefox browsers, what >> is a reasonable font size in every other browser becomes ludicrously large >> in Firefox on high resolution monitors. From what I'm seeing on the dev >> pages, this is intentional for sites that do not use large font sizing >> (most) at the high resolutions. But we are doing so in our newest sites. > >> I'd rather not deliver FF specific font sizing, but will if I must. Any >> ideas? Fixes? Things to avoid? > > You're using px for sizing text and its containers, right? If yes, stop doing > that, and the "problem" will disappear. In the first place, it's only the > user who is in position to determine "reasonable font size", which size is > presumptively the size configured as her personalizable browser default, CSS > medium. When you respect a user's default by leaving the base size unaltered, > and only apply relative sizing via keywords, em, rem or % to elements that > actually need a contextual sizing adjustment, the integers-only Gecko device > px to CSS px ratio and display density/"high" resolution are non-issues. > > The math involved with not using px is simple enough. Just think of one px as > .0625rem (1/16). If you want a block to be 960px wide, divide by 16, which > makes it 60rem. In viewports in which the as-shipped 16px default remains in > effect, 60rem will be 960px, while in those using higher densities, more px > will be used, but your design proportions will be preserved. > -- > As usual, Felix provides excellent advice. Let me add that you should also define your images dimensions by the same em standard, as demonstrated here: http://sperling.com/examples/zoom/ Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Subject: Font Size Small in FireFox ?
Felix: I just wish to say that your knowledge of this topic (et al) is simply amazing. You are a wealth of information -- thank you very much for your participation. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rotate image CSS3?
Jon:
Ahhh that works.
http://php1.net/a/tilt/
Thanks,
tedd
___
tedd sperling
t...@sperling.com
On Mar 5, 2014, at 6:41 PM, Jon Reece wrote:
>
> On Wed, Mar 5, 2014 at 3:43 PM, Tedd Sperling wrote:
> Interesting, but I can't get it to work.
>
> http://php1.net/a/tilt/
>
> I must be missing something.
>
> Since transform is still an experimental feature of CSS3, you'll need to use
> vendor prefixes:
>
> .tilt-2d {
> -webkit-transform: rotate(25deg);
> -moz-transform: rotate(25deg);
> transform: rotate(25deg);
> }
>
> The reason the codepen example works without them is because the vendor
> prefixes are being added automatically at run-time by a handy little script
> from Lea Verou > prefixfree.js (http://leaverou.github.io/prefixfree/).
>
>
> --
> Jon Reece
> jon.re...@gmail.com
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rotate image CSS3?
On Mar 4, 2014, at 10:20 PM, Jon Reece wrote: > On Tue, Mar 4, 2014 at 7:43 AM, John wrote: > >> Let's say you want to have an image tilt at 25 degrees...is this within >> CSS3's abilities? > > > Absolutely. Here's a demo: > > http://codepen.io/jreece/pen/JeIHs > > > -- > Jon Reece Interesting, but I can't get it to work. http://php1.net/a/tilt/ I must be missing something. Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] HTML5 CSS3 Table border question
On Oct 15, 2013, at 10:06 AM, The Doctor wrote:
> Question 1 in css how d oyou tell the table
> to have a visible border?
Google is your friend.
Type the words --
table css border
-- in a Google search.
The first link is:
http://www.w3schools.com/css/css_table.asp
The first example is:
table, th, td
{
border: 1px solid black;
}
Do you think that may help?
Learning how to find things is part of learning css.
Cheers
tedd
___
tedd sperling
tedd.sperl...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css-based flyout menu for mobile?
On Jun 14, 2013, at 7:20 PM, COM wrote: > Can anyone point me to a 100% css-based flyout menu for use with mobile > devices? By flyout, I mean that when User presses a Menu icon, the menu > slides out or otherwise appears, User presses their choice and menu hides, > chosen page loads. > > Thank you! > > John John: You might try this: http://sperling.com/examples/menuv/ It appears to work for mobile. You can leave out the csshover.htc file because you will not be working with < IE7 -- thus it is pure css. Cheers, tedd _ tedd.sperl...@gmail.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image and background colour changes on hover.
Anna:
If I understand your question, it doesn't make any difference -- you can use
one, or two, images.
Here is a simple example of image-replacement using one image:
http://webbytedd.com/bb/replace-image1/
Here is a simple example of image-replacement using two images:
http://webbytedd.com/bb/replace-image3/
In both of these examples, the "trick" is to use css to move (or replace) the
image with another on hover.
The effects of this technique can be rather stunning, as shown here:
http://sperling.com/examples/image-replacement/
Back to my original example, namely:
http://webbytedd.com/bbb/map/
Granted, the above was an elaborate example of image-replacement. But only
elaborate with respect to image placement. It took a lot of work to create the
images for both "at-rest" and "on hover" images AND in some cases to create
more than one underlying area below a State image to trigger the roll-over
effect. Please review the css here:
http://webbytedd.com/bbb/map/a.css
In your case (I think) it should be simple enough to create the images you want
("at-rest" and "roll-over") and then define the underlying regions where you
want the "on hover" events to trigger the roll-over.
The important thing to realize is that the region underlying the image does not
have to be confined to just one rectangle -- it can be several rectangles thus
giving the appearance that the irregular image seen above is represented by the
underlying rectangles that trigger the hover state. Understand?
As for the href of each image, that is trivial.
I hope this helps.
Cheers,
tedd
_
tedd.sperl...@gmail.com
http://sperling.com
On May 14, 2013, at 11:02 PM, Anna Gav wrote:
> Hi Tedd
>
> Re: individual on hover images eg.
> http://webbytedd.com/bbb/map/states/ak-usa.gif
>
> Because in my case both the link/text background colour and the image on the
> left need to change on hover, should my individual hover images be made up of
> both of these on hover changes in the one image? Or should I keep them
> separate?
>
> Regards
>
> Anna
>
> On Mon, May 13, 2013 at 11:35 PM, Tedd Sperling
> wrote:
> On Wed, May 8, 2013 at 5:44 AM, Anna Gav wrote:
> >>
> >> Re: http://imageshack.us/scaled/landing/703/sdfdsf.png
> >>
> >> I need to reproduce the functionality demonstrated in this image. The
> >> requirements are:
> >>
> >> When the menu items are hovered over
> >> -the image on the left needs to change.
> >> -the colour behind the menu item has to change (eg. green for the last
> >> menu item, as demonstrated in the image)
> >>
> >> Ideally, I'd like to do this using CSS, but to be honest it looks way
> >> too complicated with all the sharp angles.
> >>
> >> How would you do this?
> >>
> >> Anna
>
> On May 13, 2013, at 7:39 AM, Pi Dizayn wrote:
>
> > It can only done with Javascript.
>
> Really?
>
> Then how do you explain this:
>
> http://webbytedd.com/bbb/map/
>
> It is 100% css.
>
> Cheers,
>
> tedd
>
>
> _
> tedd.sperl...@gmail.com
> http://sperling.com
>
>
>
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image and background colour changes on hover.
On Wed, May 8, 2013 at 5:44 AM, Anna Gav wrote: >> >> Re: http://imageshack.us/scaled/landing/703/sdfdsf.png >> >> I need to reproduce the functionality demonstrated in this image. The >> requirements are: >> >> When the menu items are hovered over >> -the image on the left needs to change. >> -the colour behind the menu item has to change (eg. green for the last >> menu item, as demonstrated in the image) >> >> Ideally, I'd like to do this using CSS, but to be honest it looks way >> too complicated with all the sharp angles. >> >> How would you do this? >> >> Anna On May 13, 2013, at 7:39 AM, Pi Dizayn wrote: > It can only done with Javascript. Really? Then how do you explain this: http://webbytedd.com/bbb/map/ It is 100% css. Cheers, tedd _ tedd.sperl...@gmail.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Jan 14, 2013, at 5:00 PM, Felix Miata wrote:
> On 2013-01-14 15:55 (GMT-0500) Eric composed:
>
>> html {font-size: 16px;}
>
>> Then all REMs on the page will be 16px no matter what eles.
>
> Not quite. Notwithstanding that styling text in px ignores the wide variation
> in effective pixel density and rudely disregards the visitor's optimum text
> size, as presumptively established via his UA's default size setting, astute
> users with competent UAs can avoid the need to apply zoom to restore some
> legibility, at least potentially, via a user stylesheet containing the
> following:
> -snip-
> The result though can be a big mess of overlapping and/or hidden content if
> container sizing is also done in px. OTOH, with such styling done in em
> and/or rem, much or even all of the adaptability of the natural web, and
> rem/em-based styling, is preserved.
Felix:
I often wonder why people don't listen to your wise council?
I know I do and I teach this stuff.
Cheers,
tedd
_
t...@sperling.com
http://sperling.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
On Jan 13, 2013, at 10:12 PM, Anthony wrote: > > > The zebra stripes effect doesn't work... Did you know you could do that with php? Here's an example: http://webbytedd.com/b/color-rows/ The page should have a .php suffix -- or -- a htaccess file that calls the php interpreter to work on html file. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Jan 14, 2013, at 5:52 PM, Philip TAYLOR wrote: > Tedd Sperling wrote: > >> Also, here's a complete site: >> >> http://sperling.com/clients/beckyscan/index.php >> >> Try changing your zoom levels in your Browser to see the effect. You can't >> do that with pixels. > > Edit / preferences / minimum font size = 24px > "Learn more" floats up and obscures text. > > Philip Taylor Philip: I have not worked on that site for many years -- what Browser are you using? Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Jan 13, 2013, at 2:50 PM, John Snippe wrote: > On 2013-01-13, at 2:09 PM, Tedd Sperling wrote: > >> Additionally, here is something that helped me -- when converting from >> pixels to em simply divide by 16. >> >> For example, an image that is 16 pixels wide is also 1 em wide. > > If I recall, that would only work if the base fontsize is 16, right? > -- > John Snippe Well.. that's where you can get into trouble, namely mixing size/measurement types. I make certain that ALL measurements in my layouts are done in em's and nothing else. So, to answer your question, the base font size would be 1em and NOT 16px. As such, all standard measurements of images in pixels translate to ems by using a ratio of 16:1. Is that clear enough? Here's an example (if I didn't provide it before): http://sperling.com/examples/zoom/ Also, here's a complete site: http://sperling.com/clients/beckyscan/index.php Try changing your zoom levels in your Browser to see the effect. You can't do that with pixels. Cheers, tedd _ t...@sperling.com http://sperling.com . __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.12
On Jan 13, 2013, at 9:53 AM, David Laakso wrote: > What to do? > > Best, > David Laakso Check out preloading the images via Javascript. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini wrote: > I would like to work on my new project building Responsive layouts making > use of flexible em-based media queries instead of pixel based. > > -snip- > > So, is there any new findings on the subject, or is just as simple as > converting a couple of numbers? (I'm oversimplifying here, but not that > much apparently) > > Did you tried this approach, is there anything I should pay attention to? > Kuzeko: I think that is an excellent move. It allows the people with aging vision to see things enlarged, here's an example: http://sperling.com/examples/zoom/ Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. Hope this helps. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Value naming, Forms
On Aug 3, 2012, at 1:44 PM, John wrote: > In creating a form with a pull-down menu, and naming the various entries ( > shown below), > are there best practices for the number of characters in value="name" ? > > The tutorial I followed went with 2- and 3-character names. Can I use 4, 5, 6 > characters if that will help me to keep everything straight? > > Thanks! > > John > > > Apples > Oranges > Lemons > John: I don't really see the question/problem here. Do you think by keeping the string values the same length that you accomplish something? Well, you don't. The "value" is simply what is reported after the user picks their selected and submits the form, nothing more. Here's a link to a demonstration of how to get what the user picked via a selection option control: http://sperling.com/php/select/ As you can see, the length of the value string is not relevant, nor is this css related. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] on html and css versions
On Aug 1, 2012, at 9:11 AM, Georg wrote: > On 01.08.2012 14:41, Tedd Sperling wrote: >> >> As for "good practice", using a tiny amount of code to accomplish something >> is better than using more than what's needed. > > If you say so :-) > > regards >Georg Well... I'm just simple that way -- maybe too simple for this list. But you raise a good point, namely one should consider the demands of the page in choosing a doctype, right? Unfortunately/fortunately there are many choices, for example: http://www.w3.org/QA/2002/04/valid-dtd-list.html What is a novice to do? Can the choice be simple? What is wrong with using? Sure it doesn't have a *real* DTD, but the W3C validator does somehow validate pages that have this DOCTYPE declaration, right? So, there must be some sort of *standards* it validates contents against, right? Where/what is that "DTD"? I think that would be an interesting thing to know. Any answers for this simple person? Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] on html and css versions
On Aug 1, 2012, at 4:56 AM, Georg wrote: > My point is that to imply anything by simply presenting a tiny bit of code, > is not good practice. It does not really tell much to those who don't know it > all beforehand - and they don't have to be told (hopefully). The OP's basic > questions indicated the need for more details, which he will hopefully find > and make good use of ... once we have added such details. As for "good practice", using a tiny amount of code to accomplish something is better than using more than what's needed. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] on html and css versions
On Jul 31, 2012, at 4:18 PM, John D wrote: >> What html dtd is recommended to reach the most users? HTML 4.01 >> Transitional -- and CSS2? This works for me, my students, and W3C validation: --- Your title --- Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 slider box/image triggered by onload?
On Jul 28, 2012, at 8:33 PM, Keith Purtell wrote: > My client has her heart set on each page of her site featuring a different > image that slides in when the page loads. I found plenty of info about CSS3 > and JQuery slider boxes. I'll probably design for the former and fall back on > the latter. Having onload trigger the JQuery slide is a no-brainer. But in > the case of the CSS3, would it not just be a matter of supplying the code > which would launch the moment it finished loading into the browser (unless I > add a delay attribute)? The only triggering events I've found so far for CSS3 > were based on methods like a:hover > > -Keith Purtell -Keith: I have a similar control on my main website -- it loads an image based upon what time of year it is (i.e., equinox). This is easy enough to do via php and you don't have to worry IF the user has Javascript turned on or not. A HTML img tag is sufficient trigger to launch a php script to change an image -- it's pretty simple coding. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating boxes with variable heights
On Jul 26, 2012, at 7:43 PM, Georg wrote: > ...an if you don't bother to test this old float-alternative at your end, > here are a few examples. > > http://www.gunlaug.com/contents/test/test-floating-boxes.html > http://www.gunlaug.com/contents/test/test-floating-boxes-c.html > http://www.gunlaug.com/contents/test/test-floating-boxes-r.html > > I can't be bothered to debug obsolete browsers, so others will have to > include the old fixes for those - if they like. > > regards >Georg You are irritatingly brilliant. :-) Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Food menus and definitions
On Jul 26, 2012, at 5:46 PM, John wrote: > On Jul 26, 2012, at 2:44 PM, Tim Arnold wrote: > >> They are most definitely still de rigueur for data like you are >> marking up. Tabular data is for tables and likely always will be. >> >> T > > OK thanks for the confirmation...works for me.. if a menu is anything, it's a > table! > > J No, your restaurant-menu can be presented by a Browser from within a HTML table structure, but menu's are something completely different. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive images not scaling down
On Jul 15, 2012, at 5:45 PM, "Gates, Jeff" wrote: > Two images on a page don't seem to be resizing as they should when I reduce > the viewport. The page in question is > http://www.outtacontext.com/wp2/about/past7/ > > -nip- > > Can someone tell me why the images aren't scaling down? Thanks. > > Jeff Jeff: The images are scaling for me (Safari 6.0 Mac OS 10.8). However, when I want to scale images, I use em's like this: http://sperling.com/examples/zoom/ HTH's tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] "classes"...?
On Mar 11, 2012, at 4:58 AM, Ghodmode wrote: > > Anyway, the specific meaning of the individual terms wasn't the point. In > fact, > I just made up at least one of them. The point was that we create catchy > names > for our ideas, techniques, and technologies and that they don't necessarily > have > to be accurate. All new technical terminology starts as some form of jargon. The success of which usually comes about as an acceptance of term definitions among those practicing the technology. Just because you not understand what a term means does not mean that it is meaningless. That was my point. Cheers, tedd _ tedd.sperl...@gmail.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] "classes"...?
On Mar 10, 2012, at 11:09 AM, Ghodmode wrote: > In this field, we live on a never-ending stream of meaningless phrases. Here > are a few more examples: > Dynamic HTML > Object Oriented Programming > Web 2.0 > AJAX > Semantic Web > Rude Web (http://fm.no-ip.com/Auth/rudeweb.html) > Social Network > Progressive Enhancement > Graceful Degredation > Progressive Degradation > Responsive Design > Adaptive Design > Really? Object Oriented Programming, AJAX, and Progressive Enhancement are not meaningless phrases. As for the rest, I dunno, but these stood out as meaningful. Cheers, tedd _ tedd.sperl...@gmail.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How To Clear CSS Caching?
On Jan 4, 2012, at 10:42 AM, Boray ERIS wrote: > What I suggest you is using PHP. > > type="text/css" /> This would work provided the php interpreter parses the page. To insure parsing, change the suffix of the web page from '.html' to '.php'. To confirm parsing, place "" anywhere within the body of the page. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem associated with social button
On Dec 31, 2011, at 11:27 AM, John Lockerbie wrote: > In attempting to add a 'like' button to my pages I seem to have created a > number of problems I don't understand. > > The first is that the character encoding is not found, though it's there; the > others seem to require me to use a 'transitional' document, which I am. > > Can anybody tell me what I'm doing wrong? > > The test page is catnaps.org/islamic/designtest.html > As Ghodmode suggested -- I would first validate the page with the W3C validator and then fix the errors. After that, then post your problem (if again) and have us look at it. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] validate error on url
On Nov 20, 2011, at 3:48 PM, John Townsend wrote > James, > Tedd's response is spot on, but if you're reading it through a webbrowser you > may not be able to see what he's getting at, as the browser is likely to > "interpret" rather than display the literal text he typed ... HTML wins > again!! > Eiither view the source of Tedd's response and search for "instead of" or > Google "HTML Entities ampersand" ... > Cheers, > John >> ---Original Message--- >> From: Tedd Sperling >> To: CSS List >> Cc: James Sheffer >> Subject: Re: [css-d] validate error on url >> Sent: 21 Nov '11 02:45 >> On Nov 19, 2011, at 4:10 PM, James Sheffer wrote: >>> And the error: >>> Line 1466, Column 78: general entity "action" not defined and no default >>> entity >>> …cart.lasso?product_id=T3517%20BLACKCHROME&prod_id=14887&cat_name=0&action=add"> >>> This is usually a cascading error caused by a an undefined entity reference >>> or use of an unencoded ampersand (&) in an URL or body text. See the >>> previous message for further details. >>> Can someone interpret this error for me and help me out in getting this >>> fixed so it will validate? >>> These errors alone account for about 60 errors from the validator! >> One error I see. >> Use '&' instead of '&' -- like so: >> product_id=T3517%20BLACKCHROME&prod_id=14887&cat_name=0&action=add >> Cheers, >> tedd To all: It is common error to think in terms of ASCII instead of viewing text through the Browser eyes. For example, I recently wrote a HEX viewer in PHP to view the headers of all files (PDF, png, jpg, gif, etc.) on a web site . It worked great except for viewing HTML files. I was taken back by the incident -- after all HTML is very simple ASCII -- why wouldn't a Browser show the simple HTML? The problem was that the Browser was interpreting characters before displaying them and thus when it found a '<' (at the start of every HTML document) it would not show anything further because it was waiting for instructions -- thus a blank screen. It took me a while to figure it out. So, even the most experienced slip-up occasionally with errors that are obvious to others. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] validate error on url
On Nov 19, 2011, at 4:10 PM, James Sheffer wrote: > > And the error: > - > Line 1466, Column 78: general entity "action" not defined and no default > entity > …cart.lasso?product_id=T3517%20BLACKCHROME&prod_id=14887&cat_name=0&action=add"> > ✉ > This is usually a cascading error caused by a an undefined entity reference > or use of an unencoded ampersand (&) in an URL or body text. See the previous > message for further details. > > Can someone interpret this error for me and help me out in getting this fixed > so it will validate? > These errors alone account for about 60 errors from the validator! One error I see. Use '&' instead of '&' -- like so: product_id=T3517%20BLACKCHROME&prod_id=14887&cat_name=0&action=add Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 9, 2011, at 8:35 AM, mem wrote: > Hello all, > > On my css layouts, I tend to use *em* for font size and *px* for all the > rest. > However, I wish not to follow this path any longer, since I wish to embrace > the *em* for [almost] all the development. > > Problem: we use a *960px grid* for styling most of our pages, so the margin > or paddings and widths are given on px, and if we convert those, sometimes, > we will get weird stuff like: 0.345 em. > > Question: Will it make sense to create a grid based on *em* ? > > The point is to allow us to start drawing more user friendly measures like > .5em or .4em and avoid .453 em stuff. > > What do you think ? > > Note: This is just a question, if it does make sense to you, just tell me and > explain me why so that I could understand and I can leave with that. > > > K. Regards, K: I am sure that everyone has given you good-excellent advice, it's just that I don't have the time to read everyone's post. With that being said and not wanting to step on others toes -- when clients allow me, I use em's throughout my sites. Here's an example: http://sperling.com/clients/beckyscan/Don't worry, the client is no more (at least not with that domain). Change the zoom value in your Browser and see how well that site maintains it's proportions. As you can see, no matter how complicated the site is, em's will work for creating zoom-able sites -- if that is what you want. If you want to convert pixels to em's, try dividing pixels by 16. For example 160 pixels is 10em's. That works for me -- and yes, I get those 0.345em things, but Browsers handle them well. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Content
On Sep 22, 2011, at 10:38 AM, Giles, Sarah wrote: > I want to add an img before a tag using CSS content. Is this possible? > > Before I get my rear jumped about adding content with CSS and the whole > separation of presentation and content thing I will state this img IS > presentation. > Basically I have a grouping of ( might be a more applicable > tag and I might think about switching them but they are edited by a person > whom isn't all that up to date with latest html and css) > Some of these groups are "Special" And their specialness changes on a > personal whim. So I am creating a class to denote their specialness that will > change their background color, give a boarder, and change font color. I also > want to add a darling little img of a red ribbon to the corner of each > because you know nothing says I'm special like being decked out in ribbons > and bows. > Now I just need to figure out how to add some kittens, unicorns and rainbows. > hummm maybe I should use the :after selector to add an img of a kitten riding > a unicorn under a rainbow > ….AND put the whole thing in a tag > > Seriously though I want to keep the red ribbon out of my markup. > > -Sarah -Sarah: I'm not sure as to what you want -- but markup is html and html is the language holds the entire web page together -- it's the glue. Images are just another item you can place within your markup and thus cannot be kept out of markup -- unless you do not use markup at all and just provide a url to an image. But I don't think that is what you want. I won't address the concept of "separation of content from presentation" but basically it involves of first determining what is content and then second what is available to you do to change it's presentation. To me, if the presentation of an item can be changed, then the item is probably content. As such, CSS cannot add content, but rather simply change the way content can look. Now, to answer your question of "is it possible to add an image before a div tag?" Most certainly -- I am sure you have seen image backgrounds, right? So, you can add images via css to appear anywhere you want. One can argue that if css can provide an image, then it is providing content, but that's a weak argument. So, what is it you really want to do? Providing urls of your attempts would help. Cheers, tedd t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
