Re: [WSG] Best approach (new question)
Now I've looked at the samples and it seem it can't be done without
having some kind of text as the link and they want to use their own
font on the imgs. (I know... but they pay me and I do what they
want... almost)
So can the same effect as a javascript img swap possible using CSS
only?
At that point you use a unique set of images and css for each swap,
probably assigned by id with the behavior outlined in a class. I
haven't tested this, but I suspect you're looking for something like
this:
style type=text/css
#foo { background: url(/img/foo.gif) no-repeat 0 0; }
#bar { background: url(/img/bar.gif) no-repeat 0 0; }
a.rollover:link{ background-position: 0px 0px; }
a.rollover:visited { background-position: 0px 10px; }
a.rollover:hover { background-position: 0px 20px; }
a.rollover:active { background-position: 0px 30px; }
/style
a href=foo.html id=foo class=rolloverimg src=/img/clear.gif
height=10 width=20 alt=Foo //a
a href=bar.html id=bar class=rolloverimg src=/img/clear.gif
height=10 width=20 alt=Bar //a
I'm not sure if this is entirely kosher. Maybe there's something more
appropriate than a clear gif to make the link fill up some room? Would
it be clickable if you simply gave foo and bar a height and width with
display:block?
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
re: [WSG] Semantic Breadcrumbs
Mordechai, I too enjoy splitting hairs. I hope no one objects to my chiming in. Breadcrumbs are a construct without a solid definition, from which I think much disagreement arises. Typically, they reflect the notional path to a page (the path according to where the user believes themselves to be), although often they reflect the logical path (where the file is in the directory structure) or the historical path (where the user had gone to get to where they are). Historical paths are linear. The trouble with using ordered lists for them is not so much the semantics as programming: how do you recognize the difference between a click forward, then back to abort, then forward to the place the user intended, from an honest forward-back-forward to something else? Well, those sorts of breadcrumbs I find tedious because I've already got a back button and Amazon certainly is trying to patent The Page You Made anyway. Both logical and notional paths are derived from a hierarchal tree but are themselves linear. (Non-tree hierarchies are possible, with non-parent/child cross-linking, but why confuse the discussion more?) Between the current node (the page) and the greatest ancestor node (the home page) there exists only a single path of nodes in a specific order. This lineage is, by definition, linear and ordered. This makes it a prime candidate for an ordered list; this is what ordered lists are. Many arguments in this thread used the words hierarchy and order and list to explain a problem that was really about completeness. Can an ordered list survive the removal of a member? Depends on the relationship between list items. A notional path certainly could survive such a removal; civilization does not collapse because our addresses on postal mail do not include the county even though they include the city and state. A logical path could not survive such a removal, any more than you could drive to California and enter Los Angeles before entering Los Angeles County. Does your lineage denote the next ancestor/descendant (i.e., parent/child) relationship? Or does it merely indicate an ancestor/descendant relationship? Is it notional or logical? Is it complete? These answers are about personal style and the intent of the breadcrumbs as a solution. The nature of the solution depends on your answers. However, the path is the order and not the items. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Images in Nav, Splash Screens.
I've heard of gathering info for contact databases, but that has to be the worst implementation i've ever seen. What does that company do? Apparently, they gather info for contact databases. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] li element with a sticky+remote rollover
I want a list of products which on mouse over triggers a preview image to the left of the list as well as an arrow pointing to the product currently being previewed. The arrow and preview are sticky; if you mouse off of one without hitting another, nothing will change. This would be easy with a three column table, some rowspans, and a little javascript. I want the list of products to be represented in the code as an unordered list. I used a class with a list-style of an image to set the arrow, with javascript swapping the preview image and the class of the li based on a mouseover call dynamically added to the li: http://itgtradingcards.bivia.com/li_with_bullet.html Works in Mac OS X Firefox 1, Safari 1.2, and IE 5.2; Win NT 4 and XP SP2 Firefox 1, Opera 7, Mozilla 1.4 and IE 6. (In these examples, only the first preview image is real; the others are a clear gif for testing.) The designer would prefer pixel-placement of the bullet, which is different in different browsers. So I re-made the idea, using a background on the li tag, and setting the display:block; and the list-style:none; (Win IE displayed a bullet for the li even with display:block;). http://itgtradingcards.bivia.com/li_with_bg.html I like this much better, as it allows pixel-perfect layout while maintaining proper semantics in the unordered list. Problem is, it's not working as I expected except in Gecko browsers. Success: Mac OS X Firefox 1, Win NT 4 Mozilla 1.4 Failure: Mac OS X Safari 1.2, Mac OS X IE 5.2, Win NT IE 6 The odd thing is that Safari and IE (on both platforms) are rendering it basically the same: the li text bumps up flush with the img (regardless of the margin-left of the li, until that margin-left exceeds the width of the img), and the background of the li is positioned centered under the image. These browsers don't normally agree, which makes me wonder if Gecko is displaying it wrong even if it's what I expect. Any help would be appreciated. Unrelated to the problem, but part of the same code: I wanted the preview image url to be pulled from something that was semantically helpful, rather than arbitrary like a javascript parameter. I settled on inserting it into the title of the li; the javascript then grabs that text and blanks the title so the browser doesn't pop up unneeded text. Comments on this technique's merits (or lack thereof) would be appreciated. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Measuring default font size
Thanks for the links, Terrence. However, I think I was misunderstood. I mean that for all the designer work I've seen in trying to figure out what browsers do with various settings (such as these links), I haven't seen much in the way of statistics on what users are doing with those settings. Would it be useful, for example, to have stats on your own site that read something like this: Default Font Size #users % users 16px1234 57% 12px 567 23% 18px 89 5% ...and so forth. Javascript can measure this easily, and then dump the measurement into the web logs for later collection. This is how stats are gathered on screen size and plugin distribution. It seems to me that without evidence on how people are using your sites, design choices based on all the other information are merely well-informed stabs in the dark. On Nov 18, 2004, at 5:15 PM, Terrence Wood wrote: Actually, Felix has some interesting studies on his site about font size, pixel, resolution relationships: http://members.ij.net/mrmazda/auth/ ... and added: also look here: http://www.thenoodleincident.com/tutorials/box_lesson/font/ ... On 2004-11-19 1:02 PM, Ben Curtis wrote: This has been an interesting, if heated, thread. I think a large part of it revolves around being unable to measure people's default font size. The arrogance vs. idealist portion of the discussion. So I'm building something to measure the default size of things. Anyone know of someone else that has already done this? I'd hate to duplicate effort. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Measuring default font size
Hello Ben, Friday, November 19, 2004, 8:18:09 PM, you wrote: Javascript can measure this easily If you can suggest some javascript to do this, I'd love to run it on a few pages. I'm suspecting this is a new idea. I'd like to make a nice package for people to use. Something simple, a single tag that they can put on their clients' pages without impact (if designers put the sensor on their own pages, they'll be measuring other designers' default sizes!). Gimme a couple weeks and I'll see what I can do. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] This is really strange stuff, even for IE
The problem is driving me crazy. I remove them when I can but
whenever I get rid of them all it trashes the javascript functions. I
wish I know which ones are safe to remove. On the vast majority of the
pages, the things are the last hurdles.
Ack! Don't remove the unless you know what they do. CDATA is your
friend.
script type=text/javascript
!-- // ![CDATA[
function matchwo(a,b) {
if (a b a 0) return 1;
else return 0;
}
// ]] --
/script
The XML parser for your XHTML document will ignore anything in a CDATA
block, and a browser that doesn't understand the script tag will ignore
everything between the comments.
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Font size and arrogance | accessibility in general I say
hardware designers to not set the default resolution of a screen to what is technicaly possible but to just something, which is compatible with human eyesight. What size, a pixel? Engineers have created full-color screens, 400 pixels square, which are smaller than a dime. Certainly setting a monitor made of such things to display 1024x768 by default (the size of a quarter!) would not be compatible with human eyesight. Font rescalability and sizing a font based on today's technology will be useful on today's technology. But tomorrow is when it will be used. Standards aren't just about helping the blind to read. Just my little thought on the matter, in no way directed at one person or another, even though I quoted a portion of one person's post. This has been an interesting, if heated, thread. I think a large part of it revolves around being unable to measure people's default font size. The arrogance vs. idealist portion of the discussion. So I'm building something to measure the default size of things. Anyone know of someone else that has already done this? I'd hate to duplicate effort. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] colgroup alignment issue
We have encountered alignment issues between our target browsers.
The code example below only works within IE, all other browsers
default to standard left alignment.
#datatable col.dt_currency { /* Use for columns containing currency
values only. */
text-align: right;
}
Could be wrong here, or just showing my age, but I recall standards in
1999 saying that underscores were forbidden in class and id names. I
suspect things have changed, but at the time Netscape was the only
browser that treated underscored names as invalid. See what happens if
you rename it.
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
