E-mail List Archives
Thread: spacing - versus clear images
Number of posts in this thread: 25 (In chronological order)
From: Ted Gies
Date: Mon, Mar 06 2006 4:50PM
Subject: spacing - versus clear images
No previous message | Next message →
All,
What is better for controlling spacing between items on a web page, a nbsp; or an invisible image with alt=""? As far as i know JAWS will read every nbsp; with a "blank", which i could envision as being very annoying for someone listening to a web page.
Also, i know that there will be CSS purists out there who will not like the idea of using tables and or spacer images for layout. I am fully aware of the benefits of separating content from presentation, however in reality many websites out there still use tables for layout and occasionally that means an invisible spacer or two.
thanks in advance,
Ted
---------------------------------
Yahoo! Mail
Bring photos to life! New PhotoMail makes sharing a breeze.
From: Charles Kroger
Date: Mon, Mar 06 2006 6:10PM
Subject: Re: spacing - versus clear images (Out ofoffice reply)
← Previous message | Next message →
I will be out of the office Tuesday, March 7th.
For immediate assistance please contact the ITS Help Desk: 612-659-6600
or = EMAIL ADDRESS REMOVED = .
Thanks,
Charles Kroger
Web Developer
From: Kynn Bartlett
Date: Mon, Mar 06 2006 6:20PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
When do you need to use an invisible spacer for layout when using tables for
layout? Can you give an example of such a situation? That would help
determine which of the two options you've presented would make the most
sense.
--Kynn
On 3/6/06, Ted Gies < = EMAIL ADDRESS REMOVED = > wrote:
>
> Also, i know that there will be CSS purists out there who will not like
> the idea of using tables and or spacer images for layout. I am fully
> aware of the benefits of separating content from presentation, however in
> reality many websites out there still use tables for layout and occasionally
> that means an invisible spacer or two.
>
From: Jared Smith
Date: Mon, Mar 06 2006 6:30PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
Ted Gies wrote:
> What is better for controlling spacing between items on a web page, a
> nbsp; or an invisible image with alt=""?
I would think something like <p style="margin:5px"> or <td
style="padding-left:10px"> or similar would be a more universally
supported, yet not overly complex solution. Of course, external CSS and
semantically correct code are much better alternatives, but it seems that
you understand that.
In my mind, the disadvantages of using a non-breaking space vs. a spacer
image are about equal, so it probably won't matter much. A spacer image
will give you much more control.
Jared Smith
WebAIM.org
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 8:30AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> Ava Hristova wrote:
> > How about using the <spacer> tag? It is better than
> and img and
> > has no impact on readers.
>
> Patrick Lauke wrote:
> I prefer the <chicken> tag myself...as it's just as invalid
> as <spacer> (unless I'm missing it in the official HTML 4
> element index
> <http://www.w3.org/TR/html4/index/elements.html>;)
Patrick,
<spacer> does at least have some history in browser support, and what's
more important, Ava has clearly done some testing on it. If you doubt
her testing, ask her about it or do your own testing. Sneering down at
her for not using valid code just makes this list a hostile place that
makes developers like Ava less likely to engage. Is your own site valid
and free of elements and attributes that aren't in the official
recommendation?
AWK
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 8:40AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> Is your own site valid and
> free of elements and attributes that aren't in the official
> recommendation?
I'm going to reply to myself that Patrick's site do look like they are
valid, which is great. I looked at the redux.deviantart.com site and
saw that it wasn't before later noticing the other links in Patrick's
footer. (the deviantart.com site uses a "thumb" attribute on anchors,
which was part of the reason for my asking).
I'm not trying to start a squabble about validity here, so Patrick
please don't take offense. I do stand by my other comments regarding
the delivery of the message regarding <sapcer>.
AWK
From: Karl Groves
Date: Tue, Mar 07 2006 9:10AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
<spacer> is not now, nor was it ever part of any official spec. It is a
proprietary element from the bad ole days of the browser wars and, AFAIK it
is no longer supported by *any* user agent, resting in its well-deserved
grave much like its buddies <blink> and <layer>.
Authoring standards-compliant markup should be the first step toward
accessibility (which is the purpose of this list). But regardless of your
opinions on validity, the fact remains that a method exists which is better
and more accessible than anything discussed thus far. Instead of ,
spacer images, or proprietary markup, why not a little CSS margin or
padding? All modern user agents support it, it is accessible, and much
easier to maintain.
Karl L. Groves
User-Centered Design, Inc.
Office: 703-729-0998
Mobile: 571-214-1714
E-Mail: = EMAIL ADDRESS REMOVED =
Web: http://www.user-centereddesign.com
>
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 9:30AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> the browser wars and, AFAIK it is no longer supported by
> *any* user agent, resting in its well-deserved grave much
> like its buddies <blink> and <layer>.
Sounds like Ava may have found that support is not nonexistant. Might be
worth finding out what she found.
> Authoring standards-compliant markup should be the first step
> toward accessibility (which is the purpose of this list). But
It is a helpful, but not necessary, requirement in the development of an
accessible web site.
> regardless of your opinions on validity, the fact remains
> that a method exists which is better and more accessible than
> anything discussed thus far. Instead of , spacer
> images, or proprietary markup, why not a little CSS margin or
> padding? All modern user agents support it, it is accessible,
> and much easier to maintain.
I have no problem with that technique or valid code in general. My
problem is with the categorical dismissal of any suggestion that doesn't
validate. If a technique works in browsers and works for the users, and
the site is monitored and updated as user-agent support changes over
time, is it a horrible thing if it doesn't validate today?
AWK
From: Karl Groves
Date: Tue, Mar 07 2006 9:40AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
>
> > regardless of your opinions on validity, the fact remains that a
> > method exists which is better and more accessible than anything
> > discussed thus far. Instead of , spacer images, or
> proprietary
> > markup, why not a little CSS margin or padding? All modern
> user agents
> > support it, it is accessible, and much easier to maintain.
>
> I have no problem with that technique or valid code in
> general. My problem is with the categorical dismissal of any
> suggestion that doesn't validate. If a technique works in
> browsers and works for the users, and the site is monitored
> and updated as user-agent support changes over time, is it a
> horrible thing if it doesn't validate today?
>
The better question is: What valid reason is there to NOT author to
standards?
There isn't one good reason to purposely avoid a standards-compliant
alternative.
Karl L. Groves
User-Centered Design, Inc.
Office: 703-729-0998
Mobile: 571-214-1714
E-Mail: = EMAIL ADDRESS REMOVED =
Web: http://www.user-centereddesign.com
From: Austin, Darrel
Date: Tue, Mar 07 2006 9:50AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> It is a helpful, but not necessary, requirement in the
> development of an accessible web site.
As a general rule of thumb, the more compliant the markup is, the more
accessible to more devices it would be.
> My problem is with the categorical dismissal of any
> suggestion that doesn't validate. If a technique works in
> browsers and works for the users, and the site is monitored
> and updated as user-agent support changes over time, is it a
> horrible thing if it doesn't validate today?
If there are two options, but equally easy to implement, with one being
standards compliant and the other not, it only makes sense to recommend
the compliant method.
-Darrel
From: Helen A
Date: Tue, Mar 07 2006 10:00AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
At 16:04 07/03/2006, Karl Groves wrote:
><snip>
>Instead of ,
>spacer images, or proprietary markup, why not a little CSS margin or
>padding? All modern user agents support it, it is accessible, and much
>easier to maintain.
In that case, how do you code a right-hand padding to a <li> in CSS?
I have found out how to adapt the <li> tag to show a custom image
instead of the standard bullets but can't pad it to keep a visually
pleasing gap between the bullet and the text without resorting to a
spacer image.
Helen
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 10:10AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> As a general rule of thumb, the more compliant the markup is,
> the more accessible to more devices it would be.
That is the general idea, but I'm not sure that it is actually
defensible. Are there any browsers that _require_ valid HTML? If not,
are you saying that there is no way to write a page that will display
and read (when applicable) correctly in these without that page being
valid? I'm not asking whether it is easier or not, just whether the
statement is accurate.
> > My problem is with the categorical dismissal of any suggestion that
> > doesn't validate. If a technique works in browsers and
> works for the
> > users, and the site is monitored and updated as user-agent support
> > changes over time, is it a horrible thing if it doesn't validate
> > today?
>
> If there are two options, but equally easy to implement, with
> one being standards compliant and the other not, it only
> makes sense to recommend the compliant method.
That's part of the point. Ava said, "[spacer] is better than and
img and has no impact on readers". She says that it is better, so that
is her reason to implement it instead of a standards-based method. If
you don't agree, talk about the issue. Maybe it is better, maybe it
isn't. Using the standard techniques isn't better unless the support
for the standards also exists.
AWK
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 10:20AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> > I have no problem with that technique or valid code in general. My
> > problem is with the categorical dismissal of any suggestion that
> > doesn't validate. If a technique works in browsers and
> works for the
> > users, and the site is monitored and updated as user-agent support
> > changes over time, is it a horrible thing if it doesn't validate
> > today?
>
> The better question is: What valid reason is there to NOT
> author to standards?
> There isn't one good reason to purposely avoid a
> standards-compliant alternative.
Maybe it is a better question, but I'd like the answer to my question.
For your question, as I mentioned in my response to Darryl, the likely
answer is incomplete user agent support. If UA's support a non-valid
technique and don't support a valid technique, you don't have a lot of
choice if you need a specific result.
AWK
From: Austin, Darrel
Date: Tue, Mar 07 2006 10:30AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> In that case, how do you code a right-hand padding to a <li> in CSS?
Li {
Padding-right: 1em;
}
> I have found out how to adapt the <li> tag to show a custom
> image instead of the standard bullets but can't pad it to
> keep a visually pleasing gap between the bullet and the text
> without resorting to a spacer image.
I use this:
Ul {
List-style: none;
}
Li {
Background: url('yourBulletImage.gif') no-repeat top left;
Padding-left: [theWidthOfYourImage];
}
-Darrel
From: Alastair Campbell
Date: Tue, Mar 07 2006 10:40AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> In that case, how do you code a right-hand padding to a <li> in CSS?
>
> I have found out how to adapt the <li> tag to show a custom
> image instead of the standard bullets but can't pad it to
> keep a visually pleasing gap between the bullet and the text
That wouldn't be right-hand padding, but left hand padding. You could
also try applying the image as a background to the <li> element, I've
found that works better across browsers. I'd suggest that the
CSS-discuss list is the best place for those type of questions:
http://www.css-discuss.org/
I haven't used a spacer image for about 5 years, so I can assure you
that they are not needed. However, a good knowledge of CSS is needed to
apply complex presentation to simple HTML.
Kind regards,
-Alastair
--
Alastair Campbell | Director of User Experience
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.html
From: Andrew Kirkpatrick
Date: Tue, Mar 07 2006 10:50AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> There are more things that access web content than just web
> browsers. Do any of them REQUIRE valid markup? Other than RSS
> readers and XML parsers, I don't know. Still, that's not a
> reason to purposely make invalid markup when a valid
> alternative works just as well.
That's just the point. The knee-jerk reaction is to ridicule a
non-standard approach rather than actually determine what the facts are.
Ridicule: "I prefer the <chicken> tag myself"
Fact-seeking: "<spacer> is not valid and as far as I can tell is only
supported in some older versions of Netscape. What have you found that
makes you think it is better?"
I'm not trying to promote invalid code, just more respectful responses.
AWK
From: Don Hinshaw
Date: Tue, Mar 07 2006 11:00AM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
Helen A wrote:
> I have found out how to adapt the <li> tag to show a custom image
> instead of the standard bullets but can't pad it to keep a visually
> pleasing gap between the bullet and the text without resorting to a
> spacer image.
>
>
Helen,
I found this tutorial very helpful in replacing html bullets and
precisely positioning them:
http://css.maxdesign.com.au/listutorial/master.htm
--
Don Hinshaw
Hinshaw Design Group
From: Karl Groves
Date: Tue, Mar 07 2006 11:10AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> >
> > The better question is: What valid reason is there to NOT author to
> > standards?
> > There isn't one good reason to purposely avoid a
> standards-compliant
> > alternative.
>
> Maybe it is a better question, but I'd like the answer to my question.
> For your question, as I mentioned in my response to Darryl,
> the likely answer is incomplete user agent support. If UA's
> support a non-valid technique and don't support a valid
> technique, you don't have a lot of choice if you need a
> specific result.
>
You state that your response would be "the likely answer is incomplete user
agent support". I'd be willing to bet that there are more UAs out there
that support CSS's margin and padding properties than there are the <spacer>
tag.
Karl L. Groves
User-Centered Design, Inc.
Office: 703-729-0998
Mobile: 571-214-1714
E-Mail: = EMAIL ADDRESS REMOVED =
Web: http://www.user-centereddesign.com
From: Austin, Darrel
Date: Tue, Mar 07 2006 11:20AM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
> That is the general idea, but I'm not sure that it is
> actually defensible. Are there any browsers that _require_
> valid HTML?
There are more things that access web content than just web browsers. Do
any of them REQUIRE valid markup? Other than RSS readers and XML
parsers, I don't know. Still, that's not a reason to purposely make
invalid markup when a valid alternative works just as well.
-Darrel
From: Helen A
Date: Tue, Mar 07 2006 1:30PM
Subject: RE: spacing - versus clear images
← Previous message | Next message →
At 16:58 07/03/2006, I wrote:
In that case, how do you code a right-hand padding to a <li> in CSS?
>I have found out how to adapt the <li> tag to show a custom image
>instead of the standard bullets but can't pad it to keep a visually
>pleasing gap between the bullet and the text without resorting to a
>spacer image.
>
>Helen
Thanks for your suggestions though I'm puzzled as to *why* its a
_left_ padding I need to put a space between the bullet and the text
to its right as one looks at it!
Helen
From: Kynn Bartlett
Date: Tue, Mar 07 2006 1:40PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
On 3/7/06, Helen A < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thanks for your suggestions though I'm puzzled as to *why* its a _left_
> padding I need to put a space between the bullet and the text to its right
> as one looks at it!
>
That's because the bullet isn't actually an element in the HTML/CSS scheme.
It doesn't have its own separate padding and so forth. So you can't style
it separately.
<plug type="obligatory">
By the way, the second edition of my CSS book will be out this summer.
</plug>
--Kynn
From: Tim Beadle
Date: Tue, Mar 07 2006 2:00PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
On 07/03/06, Helen A < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for your suggestions though I'm puzzled as to *why* its a _left_
> padding I need to put a space between the bullet and the text to its right
> as one looks at it!
You're padding the left of the li element, which makes room (opens up
space) for the bullet (as a background image) to be displayed in.
I recommend getting Web Standards Solutions by Dan Cederholm for some
more about this and other techniques.
Hope that helps,
Tim
From: Patrick H. Lauke
Date: Tue, Mar 07 2006 2:50PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
Helen A wrote:
> In that case, how do you code a right-hand padding to a <li> in CSS?
li { padding-right: 2em; }
or whatever measurement you want
--
Patrick H. Lauke
___________
re
From: Patrick H. Lauke
Date: Tue, Mar 07 2006 3:00PM
Subject: Re: spacing - versus clear images
← Previous message | Next message →
Andrew Kirkpatrick wrote:
> I'm going to reply to myself that Patrick's site do look like they are
> valid, which is great. I looked at the redux.deviantart.com site and
> saw that it wasn't before later noticing the other links in Patrick's
> footer. (the deviantart.com site uses a "thumb" attribute on anchors,
> which was part of the reason for my asking).
FWIW, I don't control the code of deviantart. But you're, I do apologise
for my flippant answer to Ava's point.
--
Patrick H. Lauke
___________
re
From: Patrick H. Lauke
Date: Tue, Mar 07 2006 3:10PM
Subject: Re: spacing - versus clear images
← Previous message | No next message
Andrew Kirkpatrick wrote:
>> As a general rule of thumb, the more compliant the markup is,
>> the more accessible to more devices it would be.
>
> That is the general idea, but I'm not sure that it is actually
> defensible. Are there any browsers that _require_ valid HTML? If not,
> are you saying that there is no way to write a page that will display
> and read (when applicable) correctly in these without that page being
> valid? I'm not asking whether it is easier or not, just whether the
> statement is accurate.
Once you go outside of the spec, you're effectively at the mercy of each
individual browser's error correction/compensation mechanisms, which can
vary considerably. This increases the likelihood that your page breaks
apart or otherwise fails to display correctly.
--
Patrick H. Lauke
___________
re