Re: [WSG] images against color backgrounds

2010-12-09 Thread Tim White
Or, try the CSS3 box-shadow

http://www.css3.info/preview/box-shadow/

Tim

On Thu, Dec 9, 2010 at 11:01 AM, Stuart Foulstone
stu...@bigeasyweb.co.uk wrote:

 Might get some ideas from CSS Drop Shadows @

 http://www.alistapart.com/articles/cssdropshadows/


 On Wed, December 8, 2010 9:01 pm, cat soul wrote:
 I hope I'm not bending/breaking the purpose of the list but wanted
 opinions on best practices for preparing images for use on web pages
 where there are color backgrounds, and the image must have some of
 that background color in them.

 Example: you want to place an image with a drop shadow, so in
 photoshop, you prepare your image with drop shadow, both of them in
 layers above the same background color as on the page. When you place
 such an image, flattened and jpg'd, it looks seamless.

 Trouble comes when you want to change the background color on the page
 (s) where you've already prepped the images with a given color..then
 you have to change that, too, and re-jpg, re-place, etc..

 Some images don't look right unless their lifted off the page with a
 drop shadow, IMHO...

 cs


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***






 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] list style with inline image issue

2010-10-14 Thread Tim White
Tee,

Just a quick test I came up with this:

li {
padding-bottom: 5px;
clear: both;
list-style-type: disc;
padding-left: 75px;
margin-bottom: 50px;
position: relative;
}
li img {
position: absolute;
top: 0; left: 0;
border:1px solid red;
}

Instead of floating your image, position it in the LI. With list-style
outside or no list-style this worked in Chrome, Opera, Firefox and IE
8. I just quickly hacked the rest of the numbers to get it to work.

Tim W.

(By the way, you have class=outside on your last list item in the
HTML and I don't think you meant to)


On Thu, Oct 14, 2010 at 7:43 PM, tee weblis...@gmail.com wrote:
 In this page:
 http://lotusseedsdesign.com/css-test/list-style.html

 Only Firefox got it right. Have not checked in IE yet.

 li {padding-bottom: 5px;clear: both;list-style-type: disc;margin-left: 25px;}
 li img {float: left;margin-right:10px;margin-bottom: 10px;border:0}

 li.inside{list-style-position: inside}
 li.outside{list-style-position: outside}


 Is there a workaround?

 tee


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] attribute selectors and validation

2010-07-02 Thread Tim White
 In a recent links for light reading  reference was made to a very
 interesting article by Chris Coyier on attribute selectors such as 'rel'.

 At the very basic level, the article exemplifies h1[rel=external]{color :
 red;} used with the html:

 h1 rel=externalAttribute Equals/h1


As others have said, this is an invalid use of rel. We could change
his example from:

h2 id=first-title class=magical rel=friendDavid Walsh/h2

To

h2 id=first-title class=magical friendDavid Walsh/h2

(I'd also get rid of first-title...)


That said, attribute selectors are very useful. Think about a form.
Instead of adding a class to all text input boxes, you can style them
with a simple:

input[type=text] {/* whatever styles */}

For links, how about:

a[href^=http] {/* links starting with http */}

a[rel] {/* any link with a rel attribute */}


-Tim


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] attribute selectors and validation

2010-07-02 Thread Tim White
On Fri, Jul 2, 2010 at 1:48 PM, Thierry Koblentz
thierry.koble...@gmail.com wrote:

 Regarding performance, using a class may be a better choice:

 https://developer.mozilla.org/en/writing_efficient_css


Interesting article. I wonder if it is still true -- the last update
was 2000 for that page.

It also says Avoid the descendant selector which would be rather annoying.

Tim


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: More than one H1? (was [WSG] Out of Office AutoReply: WSG Digest)

2009-10-16 Thread Tim White
On Fri, Oct 16, 2009 at 4:23 AM, Marilyn Langfeld 
m...@langfeldesigns.comwrote:

 ...



 H1 is reserved for the title of the page. In a document, at least, there's
 only one title, while there may be many first level headings.
 ...



 So H1 is, IMHO, not the first level header, but the T1, or main title of
 the page. A logo is never, IMHO again, the title of the page.



Let's look at what the specification says;

A heading element briefly describes the topic of the section it introduces.
Heading information may be used by user agents, for example, to construct a
table of contents for a document automatically.

There are six levels of headings in HTML with
H1http://www.w3.org/TR/html401/struct/global.html#edef-H1 as
the most important and
H6http://www.w3.org/TR/html401/struct/global.html#edef-H6 as
the least. Visual browsers usually render more important headings in larger
fonts than less important ones.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

Nowhere does it say that H1s are for page titles or that there can be only 1
per page. In fact, the example shows two being used.

~ Tim


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: More than one H1? (was [WSG] Out of Office AutoReply: WSG Digest)

2009-10-16 Thread Tim White
OK, straight from Google Webmaster Central:
http://www.youtube.com/watch?v=GIn5qJKU8VMfeature=channel
http://www.youtube.com/watch?v=GIn5qJKU8VMfeature=channel(video from
March 2009)

Tim

On Fri, Oct 16, 2009 at 7:55 AM, Jason Grant ja...@flexewebs.com wrote:

 Tim,
 Well done for reading the spec - it's always a must.

 However, Google came after the HTML4.01 spec and what Google wants we give
 it - so the 'only one H1 per page' guideline comes from SEO best practices
 as well as general semantics and IA best practices.

 So the spec does not tell you to use one H1 per page, but the spec is not
 the be all and end all of guidelines.

 Thanks,

 Jason

 On Fri, Oct 16, 2009 at 12:32 PM, Tim White tjameswh...@gmail.com wrote:

 On Fri, Oct 16, 2009 at 4:23 AM, Marilyn Langfeld 
 m...@langfeldesigns.comwrote:

 ...



  H1 is reserved for the title of the page. In a document, at least,
 there's only one title, while there may be many first level headings.
 ...



 So H1 is, IMHO, not the first level header, but the T1, or main title of
 the page. A logo is never, IMHO again, the title of the page.



 Let's look at what the specification says;

 A heading element briefly describes the topic of the section it
 introduces. Heading information may be used by user agents, for example, to
 construct a table of contents for a document automatically.

 There are six levels of headings in HTML with 
 H1http://www.w3.org/TR/html401/struct/global.html#edef-H1 as
 the most important and 
 H6http://www.w3.org/TR/html401/struct/global.html#edef-H6 as
 the least. Visual browsers usually render more important headings in larger
 fonts than less important ones.

 http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

 Nowhere does it say that H1s are for page titles or that there can be only
 1 per page. In fact, the example shows two being used.

 ~ Tim

 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




 --
 Jason Grant BSc, MSc
 CEO, Flexewebs Ltd.
 www.flexewebs.com
 ja...@flexewebs.com
 +44 (0)7748 591 770
 Company no.: 5587469

 www.flexewebs.com/semantix
 www.twitter.com/flexewebs
 www.linkedin.com/in/flexewebs

 ***

 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Shorthand rule for border?

2008-04-17 Thread Tim White
On Thu, Apr 17, 2008 at 9:09 AM, Cole Kuryakin [EMAIL PROTECTED] wrote:

 This is something that I've been wondering about for a long time – a
 shorthand rule for borders.

David's link is a good starting spot -- but I'll move you up a couple
of paragraphs:
http://www.w3.org/TR/CSS2/box.html#border-properties

There are something like 20 different border rules, plus value shorthands.

For you example:
 .someClass

 {

 border-top: 1px solid #CCC;

 border-left: 1px solid #CCC;

 border-bottom: 2px solid #666;

 border-right: 2px solid #666;

 }

...you could do something like

border: 1px solid;
border-width: 1px 2px 2px 1px;
border-color: #ccc #666 #666 #ccc;

There are other options as well (like Chris's).


Tim

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] * { display: inline; }

2008-02-19 Thread Tim White
On Feb 19, 2008 5:35 AM, Nick Fitzsimons [EMAIL PROTECTED] wrote:

 Not so very odd...

 If you hunt around through Firefox's files you'll find one named
 html.css which specifies the default styling of all HTML elements. It
 includes the following:

Thank you Nick. I sorta kinda knew about the html.css file, just
didn't think of it. Good to know what's in it.

Tim


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] * { display: inline; }

2008-02-17 Thread Tim White
On Feb 17, 2008 6:00 PM, Katrina [EMAIL PROTECTED] wrote:
 So in the header of my document, I included

 style type=text/css
 * {
 display: inline;
 }
 /style


OK, I just tried it and got the exact same effects. So, I tried
combinations and body * works (and I see Patrick just posted the same
thing).

My best guess is that the browsers are setting head as an inline
element, along with style, etc.. If you change inline to block you
get the expected behavior.

very odd indeed.

Tim


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] POSH article question

2007-11-02 Thread Tim White
On 11/1/07, Tom Livingston [EMAIL PROTECTED] wrote:
 If you are writing a book title, the you shouldn't use
either, but rather something like a span class=book with your
styling of choice.

And don't forget, for something like a book there is always cite/cite 
(which italicizes by default). 

The overall idea is to add meaning to the text in the HTML and let CSS worry 
about presentation. If there is not an existing element to do what you need, 
that's when classes can come to the rescue. 

 
~ Tim 
tjameswhite.com'http://www.tjameswhite.com;tjameswhite.com





__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] POSH article question

2007-11-02 Thread Tim White
On 2/11/07 (12:36) Tom said:

Another question though... do you have an example of proper, semantic
use of strong vs b? Is it just just a tag to allow you to style
your own visual emphasis? How about strong vs. em - what's the
semantic difference?

Rick actually provides a great example in his response. I've marked up his 
sentence below:
q
The word (probably) does not require any semantic emphasis per se -- ie.
you are not giving it any enhanced meaning -- and so you would not use the
em tag but you strongDO/strong want to give it a visual-only enhancement 
to make
it render in italics.
/q

I've added strong /strong around DO. You can see that he is emphasizing a 
point there, so the markup emshould/em reflect that. [Even more emphasis 
for you.]

In other words, listen to the way you speak. You can hear when you add 
emphasis, or really strong emphasis, to what you are saying. In HTML, those 
word(s) would get wrapped in em or strong

As for b and i, well, I don't use them. They have no semantics per se, just 
visual effect. If I need something bolded or italicized I 
1) see what element it is already in
2) look to see if there is an appropriate HTML element I could add
3) If 1 and 2 fail, I'll use a span class= with a semantically rich class 
name. (Or at least I try to make it semantically meaningful : )

Hope that helps.

 
~ Tim 
tjameswhite.com'http://www.tjameswhite.com;tjameswhite.com


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] POSH article question

2007-11-02 Thread Tim White

Well done! That was perfect. Thanks.

You're welcome.


Although for me personally, I'd prolly use b and i for bold and
italic text, vs. a span with a class and related style. I don't see
how the later is more semantic. Even if the design called for red text
as opposed to bold face, I could attack the b tag to achieve the
color, etc. through the style. And when styles are off, the visual
effect is intact.

 
If you just needed to style some text, and not add emphasis, then, yes, you 
could use b and i as you suggest. (And for the reason you suggest -- less 
mark up.) They haven't been deprecated so they are 'legal' to use. I will leave 
it at that. : )


~ Tim 
tjameswhite.com'http://www.tjameswhite.com;tjameswhite.com





__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] Catch 22 list problem

2007-10-14 Thread Tim White
Going back to the original post: 

Pick your poison:

1. Invalid code
2. Use a transitional DOCTYPE
3. Set value with DOM-script

I'm surprised that no one has said #2; just fall back to a transitional 
doctype. You can still write your markup with standards in mind, use the 
deprecated attribute, *and* validate without any scripting etc. 

This is exactly what I did a couple of years ago when redesigning a site. I 
created the templates in XHTML 1.0 Strict, but due to a ton of legacy data 
concerns just changed the doctype to HTML 4.0 Trans and all was well.
 
Of course, you may have production issues that prevent the Transitional 
doctype, in which case I'd go with the invalid.


~ Tim 
tjameswhite.com'http://www.tjameswhite.com;tjameswhite.com






   

Yahoo! oneSearch: Finally, mobile search 
that gives answers, not web links. 
http://mobile.yahoo.com/mobileweb/onesearch?refer=1ONXIC


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Subject: Re: [WSG] Quirks mode vs Standards mode

2005-04-16 Thread Tim White
From Georg:
I'm asking because after 2 years of studies on the subject, I still
haven't found anything useful in IE6' standard mode, but I may have
missed something.

My first experience with putting IE6 into standards mode involved a
simple table-based layout. I had an image followed by a header
(tdimg src=logoh1Page Title/h1/td). Everything lined up
fine in FF, etc, but IE6 kept putting a gap between the image and text.
It looked almost like the 3px jog bug, but since I wasn't using boxes,
floats and the like that wasn't it.

Turns out I had a malformed doctype (putting IE6 into quirks). Fixing
the doctype and putting IE6 into Standards mode fixed the problem. If I
recall correctly (it's been almost a year since I built the site) the
gap only appeared in IE6, not 5.5, which made it really confusing.

Hope that helps Georg. (If you want more detail, email me and I'll try
to replicate it at work on Monday.)

Tim
tjameswhite AT yahoo.com

~ Tim
www.tjameswhite.com

Get Firefox!
http://www.spreadfirefox.com/?q=affiliatesid=12227t=1

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



Subject: RE: [WSG] email client css suport

2005-03-30 Thread Tim White
I hear Hotmail, yahoo, and most web mails tend to strip head so you
need to use inline styles all the time, however, it's not entirely
true. I don't use inline styles on my e-mails and they work just fine.

I create HTML e-mails as full-blown table-based HTML pages with a style
block in the header. They have all worked in Hotmail and Yahoo. I don't
know how or why, but they do.

Things that don't work (or haven't in the past) are linked style sheets
and positioning (hence the simple table-based layout).

A couple of other tips that I use:
1) Always create a good text version of the email. The vendor we use
will autoconvert the HTML to text, but it's pretty bad. I use NoteTab
Light - it has a great HTML  text converter.

2) Always include a link to an online HTML version. I put this in the
HTML and text versions. This is so that if anyone has problems reading
the message, they should be able to get to a clean version. (Like any
readers on Mac using Outlook. It accepts the HTML version, but changes
it to RTF sans images and active links. Really quiet annoying.)

Anyway, I'm not saying that the advice about Hotmail and Yahoo isn't
valid, just that you should do some testing and see what kind of coding
works and what doesn't. I have seen the truncated headers, but I've
also seen Yahoo drop the full HTML, header and all, into the mail
frame.

(NOTE: I haven't tested in Gmail, but I just got an account so I'll see
how that works.)

Tim
www.tjameswhite.com

~ Tim
www.tjameswhite.com

Get Firefox!
http://www.spreadfirefox.com/?q=affiliatesid=12227t=1



__ 
Do you Yahoo!? 
Yahoo! Small Business - Try our new resources site!
http://smallbusiness.yahoo.com/resources/ 
**
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] XHTML Strict alternative to ol start=11

2005-02-08 Thread Tim White
Without getting into the debate on the correct semantics of the dl,
I have one general problem with using it (and tables) for this case:
sequential numbering.

Placing his list in a dl or table and manually numbering them
works, but what about when a new item needs to be added to the list
somewhere in the middle? He would then need to manually renumber the
rest of the list. Not a big deal for a half-dozen items, but certainly
a pain for 100.

I'm not sure what the rational for dropping the start=  from ol
was, and at first glance it seems an odd thing to do. Like others have
mention, I can see cases where it would be useful - a results list with
1,000 entry, for example, displaying 50 at a time.

Be that as it may, how can we help with this problem? My initial
thought, with out getting into crazy things like renumber the list via
javascipt, is can you number in more of an outline format? For example:

Page 1:
1. blah
2. blah
3. blah

Page 2:
1. blah
2. blah
3. blah

This gives an association of 1.1, 1.2, 1.3; 2.1, 2.2, 2.3. Seems
semantic and works around the ordered list 'limitation.'

Will this work for you? Does this work in general? Am I missing
something?

Tim

=
~ Tim
www.tjameswhite.com

Get Firefox!
http://www.spreadfirefox.com/?q=affiliatesid=12227t=1



__ 
Do you Yahoo!? 
The all-new My Yahoo! - What will yours do?
http://my.yahoo.com 
**
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] Re: browser snapshot services?

2005-01-26 Thread Tim White
I've never used a snapshop service, but it seems an un-necessary
expenditure. You can easily test all PC variations. I've got the latest
versions of Opera, Firefox (and Mozilla); all flavors of Netscape (4.x
- 7.0); and IE 4 - 6 on my PCs at home and work.

There is a handy tutorial for how to install multiple versions of IE.
Check these out:
http://www.skyzyx.com/downloads/?PHPSESSID=56d0c695693e1bb75c602cce1274f067
http://labs.insert-title.com/labs/article795.aspx

Only thing left is the Mac quotient. I've got access to a couple at
work, so that's easy, and someone else pointed to the Mac Mini. I'm
seriously thinking of getting one for home for just this purpose (among
other purposes).

Tim W.
www.tjameswhite.com/blog


 Justin Thorp [EMAIL PROTECTED]
 on Tuesday, January 25, 2005 7:56 AM said:


In my office we are currently using a browser snapshot service to
take a look at what a web site in a variety of older browsers and
computer configurations. It is very convenient because in about 5
minutes I can get a good feel for what a web site looks like in
just
about every configuration of browser.

Which one is it that you are currently using?




=
~ Tim
www.tjameswhite.com

Get Firefox!
http://www.spreadfirefox.com/?q=affiliatesid=12227t=1

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**