Re: [WSG] images against color backgrounds

[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
 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] images against color backgrounds

[Stuart Foulstone]

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
***

Re: [WSG] images against color backgrounds

[Joseph Taylor]

Good point on the javascript repairs (there are a couple techniques of 
fixing .png support in IE6)


Trouble with this method is it can cause other troubles (like links over 
.png backgrounds etc) so be careful.


It all depends on what you're trying to do.

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 5:11 PM, Henrik Madsen wrote:

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the transparent 
background gray.


Can be conditionally fixed with js, for example: 
http://www.dillerdesign.com/experiment/DD_belatedPNG/




Based on my site audience I'll make fallback .gif replacements for 
the .png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave 
just like .gif


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4: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
*** 



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

Re: [WSG] images against color backgrounds

[Henrik Madsen]

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the  
transparent background gray.


Can be conditionally fixed with js, for example: 
http://www.dillerdesign.com/experiment/DD_belatedPNG/



Based on my site audience I'll make fallback .gif replacements for  
the .png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave  
just like .gif

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4: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] images against color backgrounds

[Joseph Taylor]

.png with alpha channel is the best way to go.

IE6 and lower can't handle the alpha channel and make the transparent 
background gray.


Based on my site audience I'll make fallback .gif replacements for the 
.png images (that look crappier but are at least transparent)


You can also make 8 bit .pngs (with no alpha channel) that behave just 
like .gif


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 12/8/10 4: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
***

Re: [WSG] Images & Paragraph Width

[David Hucklesby]

On Fri, 29 Aug 2008 15:39:04 +1000, Aldona wrote:
> [...]
> I have an image which my CSS doesn't know (and will never know) the size of. 
> The image
> is in a paragraph with the class of 'img'.
>
> Regular Image
>
> What I want to do is put a border around the paragraph (not the image so it 
> goes around
> the text as well). What happens is the border winds up the width of the whole 
> page even
> though I have margin and padding set to zero.
>
> The CSS is:
>
> p.img{
> padding: 0.3em;
> margin: 0em;
> border: 2px solid red;
> font-size: 0.9em;
> }
>
> How can I stop the border stretching the entire width of the page. 
> Unfortunately in
> this case float is not an option and I have a limitation in that the HTML 
> needs to
> remain as basic as possible. The CSS can be as complicated as anything but 
> the HTML
> needs to be simple.
>
[...]

As Bill Brown suggests, 'display: inline-block;" should do it for
most browsers. Being on a Mac right now, I can't vouch for IE, but
'inline-block' sets "hasLayout" for IE, so results will depend on the
context of your design. Post an example if you run into trouble.

Firefox 2 does not understand 'display: inline-block;' - try using
'display: -moz-inliine-box;' for that one.

Cordially,
David
--




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

Re: [WSG] Images & Paragraph Width

[Michael Turnwall]

What about a _javascript_
solution? Find the width of the image and give the paragraph tag a
width to match.

-- 
Michael
Turnwall
for all
your web code needs
turnwall.net


Aldona wrote:
Hi,
  
  
I have a problem which I feel like I should know but apparently don't.
:-)
  
  
I have an image which my CSS doesn't know (and will never know) the
size of. The image is in a paragraph with the class of 'img'.
  
  
   Regular
  
   Image
  
  
What I want to do is put a border around the paragraph (not the image
so it goes around the text as well). What happens is the border winds
up the width of the whole page even though I have margin and padding
set to zero.
  
  
The CSS is:
  
  
   p.img{
  
   padding: 0.3em;
  
   margin: 0em;
  
   border: 2px solid red;
  
   font-size: 0.9em;
  
   }
  
  
How can I stop the border stretching the entire width of the page.
Unfortunately in this case float is not an option and I have a
limitation in that the HTML needs to remain as basic as possible. The
CSS can be as complicated as anything but the HTML needs to be simple.
  
  
Hopefully someone will have come across this problem before and be able
to point me in the right direction.
  
  
  
Thanks to all.
  
IceKat.
  
  
  
  
  
***
  
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
  
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
  
Help: [EMAIL PROTECTED]
  
***
  
  




***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

RE: [WSG] Images & Paragraph Width

[Conyers, Dwayne]

Just a thought... but perhaps a  would better suit your design 
requirements than a ?


--
The generation that took acid to escape reality is now taking antacid to deal 
with reality
http://blog.dwacon.com





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

Re: [WSG] Images & Paragraph Width

[kate]

Hi,

I had a quick look on Google:









Here you go





Not sure if it works.

A link or two:
http://www.homeandlearn.co.uk/CSS/css1p8.html

http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-single/
Kate

- Original Message - 
From: "Aldona" <[EMAIL PROTECTED]>

To: 
Sent: Friday, August 29, 2008 6:39 AM
Subject: [WSG] Images & Paragraph Width



Hi,

I have a problem which I feel like I should know but apparently don't. :-)

I have an image which my CSS doesn't know (and will never know) the size 
of. The image is in a paragraph with the class of 'img'.


   Regular
   Image

What I want to do is put a border around the paragraph (not the image so 
it goes around the text as well). What happens is the border winds up the 
width of the whole page even though I have margin and padding set to zero.


The CSS is:

   p.img{
   padding: 0.3em;
   margin: 0em;
   border: 2px solid red;
   font-size: 0.9em;
   }

How can I stop the border stretching the entire width of the page. 
Unfortunately in this case float is not an option and I have a limitation 
in that the HTML needs to remain as basic as possible. The CSS can be as 
complicated as anything but the HTML needs to be simple.


Hopefully someone will have come across this problem before and be able to 
point me in the right direction.



Thanks to all.
IceKat.




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





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

Re: [WSG] Images & Paragraph Width

[Bill Brown]

Aldona wrote:
> What I want to do is put a border around the paragraph (not the image so
> it goes around the text as well). What happens is the border winds up
> the width of the whole page even though I have margin and padding set to
> zero.

Since paragraphs are block level elements, stretching to fill the
available area is what would be expected in this case. Setting margin
and padding to zero would actually ensure that your paragraph did
exactly that.

> How can I stop the border stretching the entire width of the page.
> Unfortunately in this case float is not an option and I have a
> limitation in that the HTML needs to remain as basic as possible. The
> CSS can be as complicated as anything but the HTML needs to be simple.

Without floating, your only option that I can imagine would be applying
display:inline-block on the paragraph element. In theory, this should
cause a sort of shrink-wrap effect on the paragraph allowing it to
shrink to the size of the content (in this case, your image) and then
apply a border.

This code appeared to work for me on FF3/Ubuntu:

  http://www.google.com/intl/en_ALL/images/logo.gif";>
  Regular Image

...but bear in mind, you'll need to apply adjustments for some versions
of Internet Explorer and FF lte 2 (and maybe others).

Hope it helps.
--Bill

-- 
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - "From dot concept to dot com since 1999"
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~


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

RE: [WSG] Images

[Elizabeth Spiegel]

Personally I would place the border in the CSS (although unless the image is
a link, it's surely unncessary), but the height and width in the HTML. My
reasoning is that these will (or at least may) vary for each image, and I
can't see the benefit of giving every image its own id just so that you can
move the dimensions into a style sheet.  If the images are all the same
size, then maybe.

 

Elizabeth Spiegel

Web editing

0409 986 158

GPO Box 729, Hobart TAS 7001

www.spiegelweb.com.au

 

 

 

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Likely, James A.
Sent: Friday, 9 May 2008 7:22 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Images

 

I have a quick question and would like your thoughts. 

I am working with a team of coders that code images like: 

 

My question is, do you need the border, height, and width or should that be
done in the style sheet or is it needed? 

 

Thoughts? 

Thanks 

James 

 


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



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

Re: [WSG] Images

[Mike at Green-Beast.com]

Hi James,


do you need the border, height, and width or should that
be done in the style sheet or is it needed?


Exactly what Tony said regarding width and height, they're beneficial. Lose 
the border attribute, though. That should be done in the style sheet as you 
suspected.


Cheers.
Mike Cherim
http://green-beast.com




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

Re: [WSG] Images

[toneee]

Hi James,

By specifying the dimensions in the markup, you're helping the browser to know 
what space is taken up while it is fetching the files. This means the page 
doesn't jog up and down as images are loaded.

Cheers,

Tony 
-Original Message-
From: "Likely, James A." <[EMAIL PROTECTED]>

Date: Thu, 8 May 2008 16:22:27 
To:
Subject: [WSG] Images


I have a quick question and would like your thoughts. 
I am working with a team of coders that code images like: 
 
My question is, do you need the border, height, and width or should that be 
done in the style sheet or is it needed? 
 
Thoughts? 
Thanks 
James 
 



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

Re: [WSG] Images as content vs. images as backgrounds

[Melissa Forrest]

It really depends on the situation, there may very well be a valid reason
for using an img tag opposed to a background image for textual content.

For example you could have a list of clients, rather than just displaying
you may want to display the logos, now adding an id to each logo. These may
or may not seem like text content to some people because they are logos
after all, but its a list of clients so text would also be valid however it
doesnt make much sense using background images because you would need to
give each image an id and write css for each image.

Another reason you may use an  of background image is that you may want
the image to be on the print version of the page, using a background image
will not work as default browser settings disabled printing of backgrounds
by default so the only way to get it to print is to use an .

As long as the images has relevant alt text there is no problem, you have a
valid reason why it needs to be an image and you are not over doing it than
I personally think its fine.


On 7/11/07, Christian Montoya <[EMAIL PROTECTED]> wrote:


Hello list,

I've been talking to someone who thinks that a perfectly semantic
website has absolutely no  tags used for text in images. Could
anyone help me find some articles about using img tags vs. using
background images for navigation links or textual content where images
are being used?

--
--
Christian Montoya
christianmontoya.net .. designtocss.com


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





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

Re: [WSG] Images as DIV Background with and without link (w3c friendly)

[Paul Collins]

Martin,
 
That works on every site I need to test on, can't 
believe the solution is that easy!!
 
Tested on PC:
IE6, IE5.5, IE5.0, Opera 7, Netscape 
6.
 
Tested on Mac:
IE5.2, Safari, Firefox
 
Can't thank you enough for that solution, really 
appreciate it.
 
Now I have to go and overhaul all my rollover 
graphics!
 
Paul
 

  - Original Message - 
  From: 
  Martin 
  Heiden 
  To: Paul Collins 
  Sent: Wednesday, January 04, 2006 4:07 
  PM
  Subject: Re: [WSG] Images as DIV 
  Background with and without link (w3c friendly)
  Paul,on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org 
  wrote:> I thought the Gilder/Levin/Shea Enhancement Method was 
  best, but> you can't have a hover state on a graphic link using 
  this.> Example HTML would be: > > 
  href="">Revised Image 
  ReplacementWhy?a#header:hover span {  
  background: url(another url) no-repeat (or shift);}should 
  work.regards  
  Martin **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 as DIV Background with and without link (w3c friendly)

[Martin Heiden]

Paul,

on Wednesday, January 4, 2006 at 17:35 wsg@webstandardsgroup.org wrote:

> You can't use the :hover pseudo class on any element other than an
> anchor in IE unfortunately. I don't have time to look too far, but
> with a brief search I found this link that mentions it:
> http://4umi.com/web/css/hover.htm

Yes, you're right! You have to use a behavior, expression or some
other javascript solution to make :hover work on other elements than a
in ie < 7, but if you take a closer look at the css I sent, you'll see
that you don't need a :hover on the span to change the background. The
:hover is set on the a(!):

>   a#header:hover span {
> background: url(another url) no-repeat (or shift);
>   }

(it could be that you have to change the background of the a tag too,
but if I recall it right, it sometimes solves the :focus, which
doesn't work well at all).

I use this quite often and it works.

regards

  Martin

 



**
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 as DIV Background with and without link (w3c friendly)

[Paul Collins]

Hi Martin, thanks for your reply...
 
You can't use the :hover pseudo class on any 
element other than an anchor in IE unfortunately. I don't have time to look too 
far, but with a brief search I found this link that mentions it:
http://4umi.com/web/css/hover.htm
 
They say it will be fixed in the IE7 blog, but I'm 
still developing back to version 5!
http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
 
I've seen a _javascript_ solution, but again that 
would cause Accessibility issues. Would love to hear if anyone has a solution to 
this??!
 

  - Original Message - 
  From: 
  Martin 
  Heiden 
  To: Paul Collins 
  Sent: Wednesday, January 04, 2006 4:07 
  PM
  Subject: Re: [WSG] Images as DIV 
  Background with and without link (w3c friendly)
  Paul,on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org 
  wrote:> I thought the Gilder/Levin/Shea Enhancement Method was 
  best, but> you can't have a hover state on a graphic link using 
  this.> Example HTML would be: > > 
  href="">Revised Image 
  ReplacementWhy?a#header:hover span {  
  background: url(another url) no-repeat (or shift);}should 
  work.regards  
  Martin **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 as DIV Background with and without link (w3c friendly)

[Fausto Balloni]

Thank 
you for your help, Paul.
 
This 
link will be very useful!!! It is in my bookmark allready.
 
(-:
 
Regards from Rio de Janeiro (Brazil),
 
Fausto.
 
 

  -Original Message-From: 
  [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]On 
  Behalf Of Paul CollinsSent: quarta-feira, 4 de janeiro de 2006 
  12:48To: wsg@webstandardsgroup.orgSubject: Re: [WSG] 
  Images as DIV Background with and without link (w3c 
  friendly)
  Hi Fausto,
   
  A good way of doing it, but It doesn't work with 
  Images off and CSS still turned on, which 
  becomes an Accessibility issue. Has anyone ever resolved a way of doing 
  this for graphic links containing a rollover state? The problem is, IE doesn't 
  let you add a hover state to anything other than the  tag. So 
  the common methods of image replacement don't seem to work in those 
  instances:
   
  I thought the Gilder/Levin/Shea Enhancement Method was best, but you 
  can't have a hover state on a graphic link using this.
   
  Example HTML would be: 
  Revised Image 
  Replacement
   
  Anyone found another 
  method?
   
  For a good list of ideas Fausto, you could try 
  this page if you haven't already seen it:
  http://www.mezzoblue.com/tests/revised-image-replacement/
   
  Cheers,Paul
   
   
   
  
- Original Message - 
From: 
Fausto Balloni 
To: wsg@webstandardsgroup.org 
Sent: Wednesday, January 04, 2006 2:16 
PM
Subject: [WSG] Images as DIV Background 
with and without link (w3c friendly)
Hi All,We came with a W3C friendly solution to insert 
images with or without link in the layout, being able to control it via CSS 
only, without writing the IMG tag on the HTML code). It also helps Google 
and other search engines to find the name, "title" or "alt" of the 
image.Image Without Link:http://www.sugarman.ca/temp/w3c/imagem_sem_link.htmImage 
With Link:http://www.sugarman.ca/temp/w3c/imagem_com_link.htmWe 
would like to have your opinion about it and sugestions are 
welcome![]'sFausto Balloni FilhoClient-Side - 
Globo.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**

Re: [WSG] Images as DIV Background with and without link (w3c friendly)

[Martin Heiden]

Paul,

on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org wrote:

> I thought the Gilder/Levin/Shea Enhancement Method was best, but
> you can't have a hover state on a graphic link using this.

> Example HTML would be: 
>  href="revised.html">Revised Image Replacement

Why?

a#header:hover span {
  background: url(another url) no-repeat (or shift);
}

should work.

regards

  Martin

 



**
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 as DIV Background with and without link (w3c friendly)

[webmaster]

Hi Fausto,

To cut things short:

there is nothing wrong with images used as background via CSS as long
as theses images are used as layout and not to give meaningful pieces
of information to the visitors.

You may end up confusing people who use text-only or speech devices.

Read this article from 24ways.org, I've found it very helpful, myself.

You're from Brazil, hu? I'm living in Florianópolis, WONDERFUL!!!

Cheers mate!!!

Re: [WSG] Images as DIV Background with and without link (w3c friendly)

[Patrick H. Lauke]

Fausto Balloni wrote:
> It also helps Google and other search engines to find the name,
> "title" or "alt" of the image.

Somehow I don't think Google and co. have any trouble finding the ALT 
attribute on images already...


--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
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 as DIV Background with and without link (w3c friendly)

[Paul Collins]

Hi Fausto,
 
A good way of doing it, but It doesn't work with 
Images off and CSS still turned on, which becomes 
an Accessibility issue. Has anyone ever resolved a way of doing this for 
graphic links containing a rollover state? The problem is, IE doesn't let you 
add a hover state to anything other than the  tag. So the common 
methods of image replacement don't seem to work in those instances:
 
I thought the Gilder/Levin/Shea Enhancement Method was best, but you 
can't have a hover state on a graphic link using this.
 
Example HTML would be: 
Revised Image 
Replacement
 
Anyone found another method?
 
For a good list of ideas Fausto, you could try this 
page if you haven't already seen it:
http://www.mezzoblue.com/tests/revised-image-replacement/
 
Cheers,Paul
 
 
 

  - Original Message - 
  From: 
  Fausto 
  Balloni 
  To: wsg@webstandardsgroup.org 
  Sent: Wednesday, January 04, 2006 2:16 
  PM
  Subject: [WSG] Images as DIV Background 
  with and without link (w3c friendly)
  Hi All,We came with a W3C friendly solution to insert 
  images with or without link in the layout, being able to control it via CSS 
  only, without writing the IMG tag on the HTML code). It also helps Google and 
  other search engines to find the name, "title" or "alt" of the 
  image.Image Without Link:http://www.sugarman.ca/temp/w3c/imagem_sem_link.htmImage 
  With Link:http://www.sugarman.ca/temp/w3c/imagem_com_link.htmWe 
  would like to have your opinion about it and sugestions are 
  welcome![]'sFausto Balloni FilhoClient-Side - 
  Globo.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**

Re: [WSG] images in html or css

[David Hucklesby]

On Fri, 16 Sep 2005 14:48:13 -0700, Ben Curtis wrote:
>
> On Sep 16, 2005, at 1:43 PM, kvnmcwebn wrote:
>
>> "browsers do not cache the images
>> linked from the stylesheet so caching is a little more work"
>>
>> wow, thats news to me.
>>
>
> I believe that's actually "browser", singular. Who else, but IE?
>
Hi Ben -

[quote cite="http://www.ryanbrill.com/archives/form_highlighting_redux/";]
"to tell all browsers to cache the images, you can use apache's .htaccess

"put this in a .htaccess file in your images folder. this will cause ALL
 files/images in that folder to be cached for 2 months.

  ExpiresActive On
  ExpiresDefault "access plus 2 months"

[/quote]

See comment #13 in the cited article.

Cordially,
David
--
David Hucklesby, on 9/17/2005

--




**
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 html or css

[Ben Curtis]

On Sep 16, 2005, at 1:43 PM, kvnmcwebn wrote:


"browsers do not cache the images
linked from the stylesheet so caching is a little more work"

wow, thats news to me.



I believe that's actually "browser", singular. Who else, but IE?

IE's problem will crop up (I believe -- someone who uses Windows,  
please correct me) when anything changes a layout property of the box  
the background is applied to, such as javascript or css rollovers.  
Then, the browser will check the server to see if the file has  
changed (I'm not sure it actually automatically downloads).


Actually, although I think the statement is wrong, I don't know  
enough of the right stuff to argue. Anyone? Anyone? Beuller?


More, from The Great Google: http://tinyurl.com/cr44n

--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
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 html or css

[kvnmcwebn]

"browsers do not cache the images
linked from the stylesheet so caching is a little more work"

wow, thats news to me.

I might have to rethink my tactics.

So even if a sitewide image was placed in one page as an  and on
subsequent pages as a css background it would still reload?

thanks
kvnmcwebn


**
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 html or css

[Chris Hardy]

I find that centralizing images in css is useful for maintainability.  

However, if page load time is an issue, it's a good idea to stress test the
site with both images in html and css. when they're in html, the height and
width tells the browser how big the image is which helps it load a little
faster and you can use preload scripts that you can't use for
background-images. 

Of course you can get fancy with squid or some other caching engine, but
even though browsers cache the stylesheet, they do not cache the images
linked from the stylesheet so caching is a little more work. 


ymmv

-chris

**
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 html or css

[Ben Curtis]

Is the  tag still widly used among list members. Should
we put as many of the images we can in the css as backgrounds etc.

Right now i put most sitewide images in the css and the page by  
page content

in with the  tag.



Content goes in the html.
Presentation guides for content go in the css.

One way to tell if an image is content is to ask yourself these two  
questions:


- With images off, would the user miss it? (yes = it's content)
- Will this change if we redesign? (yes = presentation)

--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
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 html or css

[Jan Brasna]

techniques like FIR of hiding foreground text and putting images in CSS
have problems in accessibility software


So the designer should use a smart IR solution.

--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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
**

Re: [WSG] images in html or css

[Matthew Cruickshank]

On Thu, 2005-09-15 at 16:03 +0100, kvnmcwebn wrote:
> Is the  tag still widly used among list members. Should
> we put as many of the images we can in the css as backgrounds etc.
> Right now i put most sitewide images in the css and the page by page content
> in with the  tag.

I don't think that it should be based on whether it's page-by-page or
sitewide, but on whether it's content or decoration. If it's content it
should be an  tag, and decoration goes in the CSS.

I think it's a faddy thing to put a lot of images in CSS, especially
things like site logos like plone.org does, or common icons. It's using
CSS like an includes file, to save updating multiple  tags across a
site, which I think is a misuse of CSS.

Keeping  for content and CSS for style is especially important as
techniques like FIR of hiding foreground text and putting images in CSS
have problems in accessibility software:
http://www.alistapart.com/articles/fir/


.Matthew Cruickshank
http://holloway.co.nz/

**
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 html or css

[Claudio Dias]

I agree with Bert!

Regards,
-- Cláudio Diashttp://www.mundonu.com

Re: [WSG] images in html or css

[Patrick H. Lauke]

kvnmcwebn wrote:

hello,
Just Wondering-
Is the  tag still widly used among list members. Should
we put as many of the images we can in the css as backgrounds etc.

Right now i put most sitewide images in the css and the page by page content
in with the  tag.


IMG elements should always be used when the image is actual content. 
Fluff images (flowery borders, an abstract little mood image, etc) 
should go in the CSS. Don't go overboard in "abolishing" IMG...just as 
with tables (for tabular data), there is still a need for them.



--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
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 html or css

[Bert Doorn]

G'day


Is the  tag still widly used among list members. Should
we put as many of the images we can in the css as backgrounds etc.
Right now i put most sitewide images in the css and the page by page content
in with the  tag.
 

My approach is (generally) that purely decorative images should ideally go in the css as backgrounds.  


Images with meaning (e.g. photos of products, mugshots of staff, graphs, etc) 
should be placed in the (x)html via the img element, with appropriate alt 
attribute.

But I am only speaking for myself - others may have a different 
approach/opinion.

Regards 
--

Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites 



**
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 as accessible form buttons

[Patrick H. Lauke]

Andreas Boehmer [Addictive Media] wrote:


I then thought I should use , but realised that this
doesn't work in all browsers. IE, for example, has got the nasty habbit of
submitting name.x=0&name.y=0 when these kind of buttons are clicked, which
can make it really difficult if you have got multiple buttons in one form
and you wish to detect which of them was clicked.


Maybe I'm missing something, but: why not test for the presence of 
name.x or name.y at the receiving end then, rather than name? And, if 
you have multiple buttons, shouldn't it be easy enough to give them 
different names and test for name1.x or name2.x ?


--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
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 as accessible form buttons

[Andreas Boehmer [Addictive Media]]

> -Original Message-
> From: Ben Curtis [mailto:[EMAIL PROTECTED] 
> Sent: Wednesday, 7 September 2005 2:32 AM
> To: wsg@webstandardsgroup.org
> Subject: Re: [WSG] Images as accessible form buttons
> 
> 
> On Sep 5, 2005, at 11:54 PM, Andreas Boehmer [Addictive Media] wrote:
> 
> > I then thought I should use , but 
> realised that  
> > this
> > doesn't work in all browsers. IE, for example, has got the nasty  
> > habbit of
> > submitting name.x=0&name.y=0 when these kind of buttons are  
> > clicked, which
> > can make it really difficult if you have got multiple buttons in  
> > one form
> > and you wish to detect which of them was clicked.
> 
> The .x and .y values are according to spec; any browser that doesn't  
> do this is broken. I suspect this is your best bet. Is the reason  
> it's difficult to use multiple submits because you are not receiving  
> a name=value in addition to the name.x=xx&name.y=yy values? If so,  
> then that browser is broken as well.

When you say it's "broken" you mean it doesn't adhere to the standards?
Well, that seems to be the case with IE 5 and IE 6. These browsers only
submits name.x=xx&name.y=yy values, no name=value in the querystring.
Firefox on the other hand submits both.

Whether you call it "broken" or not, the fact seems to remain that IE
doesn't handle these buttons correctly, which in the long run means they are
inaccessible. 


**
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 as accessible form buttons

[Ben Curtis]

On Sep 5, 2005, at 11:54 PM, Andreas Boehmer [Addictive Media] wrote:

I then thought I should use , but realised that  
this
doesn't work in all browsers. IE, for example, has got the nasty  
habbit of
submitting name.x=0&name.y=0 when these kind of buttons are  
clicked, which
can make it really difficult if you have got multiple buttons in  
one form

and you wish to detect which of them was clicked.


The .x and .y values are according to spec; any browser that doesn't  
do this is broken. I suspect this is your best bet. Is the reason  
it's difficult to use multiple submits because you are not receiving  
a name=value in addition to the name.x=xx&name.y=yy values? If so,  
then that browser is broken as well.


...an input type="image" creates a submit button...
http://www.w3.org/TR/html401/interact/forms.html

...a submit button is successful if clicked...
http://www.w3.org/TR/html401/interact/forms.html#submit-button

...successful form elements have their values submitted paired to  
their names...
http://www.w3.org/TR/html401/interact/forms.html#successful- 
controls


--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
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 not loading...

[ruf fellipe]

Hi,

I'm using FF-1.0.4 on Windows and it works fine. My TIDY Extension
don't find any errors on the W3C syntax, good start!

On 6/26/05, Jeff D. Reid <[EMAIL PROTECTED]> wrote:
> Here is a listing of the image file names I see:  (from top of page to
> bottom)
> 
> vinter_header.jpg
> quickmap.gif
> row of 6 horzontal nav bar mouseovers
> aktivitet.gif
> aktivitetsmenu.gif (in right sidebar)
> colum of 4 javascript links w/small preceding graphic
> rightsidetest.jpg
> rightsidetest1.jpg
> top.gif (at bottom of page)
> 
> 
> HTH,
> Jeff
> 
> - Original Message -
> From: "Kim Kruse" <[EMAIL PROTECTED]>
> To: 
> Sent: Sunday, June 26, 2005 4:53 PM
> Subject: Re: [WSG] Images not loading...
> 
> 
> > Hi Jeff,
> >
> > Thanks for your reply. Perhaps I would a great idea to mention it's the
> > images in the navbar below the header image.
> >
> > Do they still show?
> >
> > Kim
> >
> > Jeff D. Reid wrote:
> >
> > >All images load just fine using the following:
> > >
> > >Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
> > >Firefox/1.0.3 and Windows XP Pro
> > >
> > >I am located in Cincinnati, Ohio, USA and it is Sunday, June 26, 2005,
> 3:12
> > >pm EST..
> > >
> > >HTH,
> > >Jeff
> > >
> > >- Original Message -
> > >From: "Kim Kruse" <[EMAIL PROTECTED]>
> > >To: 
> > >Sent: Sunday, June 26, 2005 2:27 PM
> > >Subject: [WSG] Images not loading...
> > >
> > >
> > >
> > >
> > >>Hi,
> > >>
> > >>On this page http://mouseriders.dk/esrum/test.htm I have some sort of
> > >>problem in FF and other Gecko browsers.
> > >>
> > >>The images just don't show up unless I scroll the page, mouseover the
> > >>links or reload the page. Does anybody know why?
> > >>
> > >>I would really appreciate some help as I have no idea what's causing
> this.
> > >>
> > >>Thank you very much
> > >>Kim
> > >>**
> > >>The discussion list for  http://webstandardsgroup.org/
> > >>
> > >> See http://webstandardsgroup.org/mail/guidelines.cfm
> > >> for some hints on posting to the list & getting help
> > >>**
> > >>
> > >>
> > >>
> > >>
> > >
> > >
> > >**
> > >The discussion list for  http://webstandardsgroup.org/
> > >
> > > See http://webstandardsgroup.org/mail/guidelines.cfm
> > > for some hints on posting to the list & getting help
> > >**
> > >
> > >
> > >
> > >
> > >
> > **
> > The discussion list for  http://webstandardsgroup.org/
> >
> >  See http://webstandardsgroup.org/mail/guidelines.cfm
> >  for some hints on posting to the list & getting help
> > **
> >
> >
> 
> 
> **
> The discussion list for  http://webstandardsgroup.org/
> 
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
> 
> 


-- 
Fellipe Cicconi
http://ruf.rockgrafia.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
**

Re: [WSG] Images not loading...

[Jeff D. Reid]

Here is a listing of the image file names I see:  (from top of page to
bottom)

vinter_header.jpg
quickmap.gif
row of 6 horzontal nav bar mouseovers
aktivitet.gif
aktivitetsmenu.gif (in right sidebar)
colum of 4 javascript links w/small preceding graphic
rightsidetest.jpg
rightsidetest1.jpg
top.gif (at bottom of page)


HTH,
Jeff

- Original Message - 
From: "Kim Kruse" <[EMAIL PROTECTED]>
To: 
Sent: Sunday, June 26, 2005 4:53 PM
Subject: Re: [WSG] Images not loading...


> Hi Jeff,
>
> Thanks for your reply. Perhaps I would a great idea to mention it's the
> images in the navbar below the header image.
>
> Do they still show?
>
> Kim
>
> Jeff D. Reid wrote:
>
> >All images load just fine using the following:
> >
> >Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
> >Firefox/1.0.3 and Windows XP Pro
> >
> >I am located in Cincinnati, Ohio, USA and it is Sunday, June 26, 2005,
3:12
> >pm EST..
> >
> >HTH,
> >Jeff
> >
> >- Original Message - 
> >From: "Kim Kruse" <[EMAIL PROTECTED]>
> >To: 
> >Sent: Sunday, June 26, 2005 2:27 PM
> >Subject: [WSG] Images not loading...
> >
> >
> >
> >
> >>Hi,
> >>
> >>On this page http://mouseriders.dk/esrum/test.htm I have some sort of
> >>problem in FF and other Gecko browsers.
> >>
> >>The images just don't show up unless I scroll the page, mouseover the
> >>links or reload the page. Does anybody know why?
> >>
> >>I would really appreciate some help as I have no idea what's causing
this.
> >>
> >>Thank you very much
> >>Kim
> >>**
> >>The discussion list for  http://webstandardsgroup.org/
> >>
> >> See http://webstandardsgroup.org/mail/guidelines.cfm
> >> for some hints on posting to the list & getting help
> >>**
> >>
> >>
> >>
> >>
> >
> >
> >**
> >The discussion list for  http://webstandardsgroup.org/
> >
> > See http://webstandardsgroup.org/mail/guidelines.cfm
> > for some hints on posting to the list & getting help
> >**
> >
> >
> >
> >
> >
> **
> The discussion list for  http://webstandardsgroup.org/
>
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
>
>


**
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 not loading...

[Carl Reynolds]

Kim Kruse wrote:


Hi,

On this page http://mouseriders.dk/esrum/test.htm I have some sort of 
problem in FF and other Gecko browsers.


The images just don't show up unless I scroll the page, mouseover the 
links or reload the page. Does anybody know why?



The page looks the same in FF-1.0.4 and IE-6 on Windows-2000.

There is an image of  some buildings with the words "Esrum Mollegard" at 
the top of the page.
The nav bar with six items is directly under that image. The nav items 
roll-over.

Under the nav bar is an image with the words "Aktivitets eksempel"
Under that is a lot of text with an up-arrow at the bottom.
On the right side is a side bar with some links and two pictures of people.
All of this is followed by a horizontal blue bar with what looks like 
contact information.


This is in both Firefox and InterNET Explorer.


The page looks pretty complete to me, but then I can't read it.
What are you missing?



Carl.



**
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 not loading...

[Zachary Hopkins]

Kim,

I see what you're talking about.  When the page first loaded for me 
(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) 
Gecko/20050511 Firefox/1.0.4 (ax)), I saw images for only the first 2 
navigation buttons.  When I clicked away to another application and then 
came back, they were there.


I'm not really sure as to exactly why this occurs, but if you don't mind 
me asking, why is the height set to 0?


--Zachary

Kim Kruse wrote:


Hi Jeff,

Thanks for your reply. Perhaps I would a great idea to mention it's 
the images in the navbar below the header image.


Do they still show?

Kim

Jeff D. Reid wrote:


All images load just fine using the following:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
Firefox/1.0.3 and Windows XP Pro

I am located in Cincinnati, Ohio, USA and it is Sunday, June 26, 
2005, 3:12

pm EST..

HTH,
Jeff

- Original Message - From: "Kim Kruse" <[EMAIL PROTECTED]>
To: 
Sent: Sunday, June 26, 2005 2:27 PM
Subject: [WSG] Images not loading...


 


Hi,

On this page http://mouseriders.dk/esrum/test.htm I have some sort of
problem in FF and other Gecko browsers.

The images just don't show up unless I scroll the page, mouseover the
links or reload the page. Does anybody know why?

I would really appreciate some help as I have no idea what's causing 
this.


Thank you very much
Kim
**
The discussion list for  http://webstandardsgroup.org/

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


  




**
The discussion list for  http://webstandardsgroup.org/

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



 


**
The discussion list for  http://webstandardsgroup.org/

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




--

"The best way to predict the future is to invent it." 


[EMAIL PROTECTED]
http://www.hopkinsprogramming.net

**
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 not loading...

[Kim Kruse]

Hi Jeff,

Thanks for your reply. Perhaps I would a great idea to mention it's the 
images in the navbar below the header image.


Do they still show?

Kim

Jeff D. Reid wrote:


All images load just fine using the following:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
Firefox/1.0.3 and Windows XP Pro

I am located in Cincinnati, Ohio, USA and it is Sunday, June 26, 2005, 3:12
pm EST..

HTH,
Jeff

- Original Message - 
From: "Kim Kruse" <[EMAIL PROTECTED]>

To: 
Sent: Sunday, June 26, 2005 2:27 PM
Subject: [WSG] Images not loading...


 


Hi,

On this page http://mouseriders.dk/esrum/test.htm I have some sort of
problem in FF and other Gecko browsers.

The images just don't show up unless I scroll the page, mouseover the
links or reload the page. Does anybody know why?

I would really appreciate some help as I have no idea what's causing this.

Thank you very much
Kim
**
The discussion list for  http://webstandardsgroup.org/

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


   




**
The discussion list for  http://webstandardsgroup.org/

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



 


**
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 not loading...

[Jeff D. Reid]

All images load just fine using the following:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
Firefox/1.0.3 and Windows XP Pro

I am located in Cincinnati, Ohio, USA and it is Sunday, June 26, 2005, 3:12
pm EST..

HTH,
Jeff

- Original Message - 
From: "Kim Kruse" <[EMAIL PROTECTED]>
To: 
Sent: Sunday, June 26, 2005 2:27 PM
Subject: [WSG] Images not loading...


> Hi,
>
> On this page http://mouseriders.dk/esrum/test.htm I have some sort of
> problem in FF and other Gecko browsers.
>
> The images just don't show up unless I scroll the page, mouseover the
> links or reload the page. Does anybody know why?
>
> I would really appreciate some help as I have no idea what's causing this.
>
> Thank you very much
> Kim
> **
> The discussion list for  http://webstandardsgroup.org/
>
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
>
>


**
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 breaking out of their bounding box in MSIE/win

[Mordechai Peller]

Todd Baker wrote:
Try applying this fix...
http://www.positioniseverything.net/easyclearing.html
to the .entry selector..
Won't help; IE doesn't understand generated content. Besides, that fix 
is for non-IE browsers and the problem is in IE.
**
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 breaking out of their bounding box in MSIE/win

[Todd Baker]

Try applying this fix...

http://www.positioniseverything.net/easyclearing.html

to the .entry selector..



On Tue, 21 Dec 2004 04:02:41 +0200, Mordechai Peller <[EMAIL PROTECTED]> wrote:
> Marco van Hylckama Vlieg wrote:
> 
> > I have a nagging CSS problem I don't understand... I guess a click on
> > a link will say more than a thousand words:
> 
> While I don't see what the source of the problem, I can put you on the
> proper path to fixing it.
> 
> 1. Clean up you errors. Your page doesn't validate. Fix this and it's
> possible that your problem will be solved. Even if this doesn't solve
> the problem, it'll make it easier to find.
> 
> 2. Don't use inline styles. Having all the styles in one place makes
> them easier to work with and reduces page weight.
> 
> 3. The text goes in the , not the image. OK, this has nothing to do
> with the problem, but it will improve the page semantically, and may
> help with the search engines. Think about, what, after all, is a
> paragraph? Yes, I know, as you said, a picture's worth a thousand word,
> but that doesn't mean it *IS* a thousand words.
> **
> The discussion list for  http://webstandardsgroup.org/
> 
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
> 
> 


-- 
Todd Baker
http://electronet.com.au - Where electrons go for a good time!
**
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 breaking out of their bounding box in MSIE/win

[Mordechai Peller]

Marco van Hylckama Vlieg wrote:
I have a nagging CSS problem I don't understand... I guess a click on 
a link will say more than a thousand words: 
While I don't see what the source of the problem, I can put you on the 
proper path to fixing it.

1. Clean up you errors. Your page doesn't validate. Fix this and it's 
possible that your problem will be solved. Even if this doesn't solve 
the problem, it'll make it easier to find.

2. Don't use inline styles. Having all the styles in one place makes 
them easier to work with and reduces page weight.

3. The text goes in the , not the image. OK, this has nothing to do 
with the problem, but it will improve the page semantically, and may 
help with the search engines. Think about, what, after all, is a 
paragraph? Yes, I know, as you said, a picture's worth a thousand word, 
but that doesn't mean it *IS* a thousand words.
**
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 and the dl

[Mordechai Peller]

Ted Drake wrote:
As for the image being a definition term,...why wouldn't it be semantic?
I don't know the W3C codes by heart, so I could easily be missing an important part of the puzzle and would be interested in seeing what I am missing.
 



Name
Title
Ext

   

Whether the image should be a term or data is open for debate. While I 
tend to favor having them as data, there is also a good case for as a 
term. This, however, isn't the source of my contention. In a dl the dd's 
must follow their associated dt, not precede them.

Andy Clarke has an interesting post on creating an e-commerce site with 
definition lists.
I skimmed it and it looks interesting. Thanks.
I don't remember the use of the position relative.
Been there; done that. Having artifacts in my CSS has caused me more 
than one headache.
**
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.

[Dejan Kozina]

No, I was afraid of what could I find inside. Been hard enough to 
convince my customer I was not going to take it as an example. Since 
then I've learned not to ask prospective clients what kind of website 
they would like to have...

Bennie Shepherd wrote:
Did ya sign up so you could enter? :o)
>
P.S. they're denim fabric wholesalers, I think.
Dejan Kozina Web Design Studio
Dolina 346 (TS)
I-34018 Trst/Trieste - Italy
tel./fax: +39 040 228 436
cell.: +39 348 7355 225
http://www.kozina.com/
e-mail: [EMAIL PROTECTED]
begin:vcard
fn:Dejan Kozina
n:Kozina;Dejan
org:Dejan Kozina Web Design Studio
adr:;;Dolina 346;Dolina;TS;I-34018;Italy
email;internet:[EMAIL PROTECTED]
tel;work:+39 348 7355 225
tel;fax:+39 040 228 436
tel;home:+39 040 228 436
tel;cell:+39 348 7355 225
x-mozilla-html:TRUE
url:http://www.kozina.com/
version:2.1
end:vcard

Re: [WSG] Images in Nav, Splash Screens.

[Jonathan T. Sage]

and as a side note - if you (royal you, not directed to anybody in
particular on this list) are ever going to use a 'loading' graphic... 
for the love of everything right, let 100% mean it.  The bars that
start over hurt my soul...

~j



On Wed, 1 Dec 2004 15:46:19 -0500, Tom Livingston
<[EMAIL PROTECTED]> wrote:
> Ha! I bet they're not gathering much!
> 
> 
> 
> >>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
> >**
> 
> --
> -
> Tom Livingston
> Senior Multimedia Artist
> mlinc.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
> **
> 
> 


-- 
Jonathan T. Sage
Theatrical Lighting / Set Designer
Professional Web Design

[HTTP://www.JTSage.com]
[HTTP://design.JTSage.com]
[EMAIL PROTECTED]
**
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.

[Tom Livingston]

Ha! I bet they're not gathering much!
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
**

--
-
Tom Livingston
Senior Multimedia Artist
mlinc.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
**

Re: [WSG] Images in Nav, Splash Screens.

[Ben Curtis]

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
**

Re: [WSG] Images in Nav, Splash Screens.

[Bennie Shepherd]

Did ya sign up so you could enter? :o)
On 12/1/2004 1:19:10 PM, [EMAIL PROTECTED] wrote:
> I guess this one wins the gold medal: http://www.italdenim.com.
>
> Bert Doorn wrote:
>
> > Bailout rates up to 71% have been reported with some splash pages.
> >
>
> --
> Dejan Kozina Web Design Studio
> Dolina 346 (TS)
> I-34018 Trst/Trieste - Italy
> tel./fax: +39 040 228 436
> cell.: +39 348 7355 225
> http://www.kozina.com/
> e-mail: [EMAIL PROTECTED]
**
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.

[Tom Livingston]

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?

I guess this one wins the gold medal: http://www.italdenim.com.
Bert Doorn wrote:
Bailout rates up to 71% have been reported with some splash pages.
--
Dejan Kozina Web Design Studio
Dolina 346 (TS)
I-34018 Trst/Trieste - Italy
tel./fax: +39 040 228 436
cell.: +39 348 7355 225
http://www.kozina.com/
e-mail: [EMAIL PROTECTED]
Attachment converted: MacHD:dejan.vcf (TEXT/ttxt) (000436DD)

--
-
Tom Livingston
Senior Multimedia Artist
mlinc.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
**

Re: [WSG] Images in Nav, Splash Screens.

[Warren Puckett]

Yep, I think it breaks all the rules alright. Don't show Nielsen, he might
have a stroke.

Yikes!


On 1/12/04 6:19 pm, "Dejan Kozina" <[EMAIL PROTECTED]> wrote:

> 
> I guess this one wins the gold medal: http://www.italdenim.com.
> 
> Bert Doorn wrote:
> 
>> Bailout rates up to 71% have been reported with some splash pages.
>> 


**
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.

[Sam Hutchinson]

and I thought the wait would be worth it!
ohh, that's just lovely ! what a waste of 2 minutes of my life !



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Dejan Kozina
Sent: Wednesday, December 01, 2004 06:19
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Images in Nav, Splash Screens.



I guess this one wins the gold medal: http://www.italdenim.com.

Bert Doorn wrote:

> Bailout rates up to 71% have been reported with some splash pages. 
>

-- 
Dejan Kozina Web Design Studio
Dolina 346 (TS)
I-34018 Trst/Trieste - Italy
tel./fax: +39 040 228 436
cell.: +39 348 7355 225
http://www.kozina.com/
e-mail: [EMAIL PROTECTED]


**
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.

[Dejan Kozina]

I guess this one wins the gold medal: http://www.italdenim.com.
Bert Doorn wrote:
Bailout rates up to 71% have been reported with some splash pages. 

--
Dejan Kozina Web Design Studio
Dolina 346 (TS)
I-34018 Trst/Trieste - Italy
tel./fax: +39 040 228 436
cell.: +39 348 7355 225
http://www.kozina.com/
e-mail: [EMAIL PROTECTED]
begin:vcard
fn:Dejan Kozina
n:Kozina;Dejan
org:Dejan Kozina Web Design Studio
adr:;;Dolina 346;Dolina;TS;I-34018;Italy
email;internet:[EMAIL PROTECTED]
tel;work:+39 348 7355 225
tel;fax:+39 040 228 436
tel;home:+39 040 228 436
tel;cell:+39 348 7355 225
x-mozilla-html:TRUE
url:http://www.kozina.com/
version:2.1
end:vcard

RE: [WSG] Images in Nav, Splash Screens.

[Tom Livingston]

I agree on the splash screen. Waste. You could argue that this is why 
many home pages look different than sub pages. The branding, in all 
it's glory, is done on the home page along with some actual useful 
information!

As far as graphical navbars go, well... designers and possibly 
clients are gonna argue that the custom font is upholding the 
brand/style. Which is true. Even though my dept. argues against them 
here for the same reasons mentioned below, some designers won't give 
in. Your job then becomes making the nav graphics as light as 
possible. To the contrary of many people on this list and others, 
graphics are not evil. If you are frugal with them, include alt info 
or maybe even image replacement code, you'll be fine. You can't 
please all the people all of the time. If I need to use your site, or 
need/want info from it, I'm not gonna leave just because your nav is 
graphical.

But the bottom line is, the client's paying the bills. They want 
graphics in the nav, they get graphics in the nav.



G'day
 1. They want to use a full page graphic Splash Screen, which displays
 the brand in all its glory before the user can enter the site.
My opinion:
* Waste of space
* Waste of bandwidth (at the server and user's end)
* Annoying. 

 I don't have stats on it, but know many people who get annoyed by them
(myself included).   If there's a "click-through" and I'm still interested
after the annoyance, I click on it immediately.  If not, I leave.
Here's some links you might show the client:
http://www.websiteoptimization.com/speed/tweak/splash/  concludes:
"Splash pages can backfire with users. Rather than enticing them to explore
further you repel them clicking and screaming. Splash pages decrease
performance, credibility, traffic, and search engine rankings. Bailout rates
up to 71% have been reported with some splash pages. If you must use a
splash page, make sure it loads quickly, provides bypass links and keywords,
and optionally uses cookies to display it just once."
http://www.webpagesthatsuck.com/amazon.html   "Would Amazon.com use that
design element on its site?"
 2. They want to use images in the Navigation bar to
 give tight control over the fonts, instead of text.
* They have no control over me turning the images off
* The site will take longer to load
* Poor eyesight?  Can't read the buttons?  Can't increase the text size, so
I leave
They talk about "old school".   Using images for links, just to show a fancy
font, is about as old school as it gets.  I can't remember the last site I
did this on - must be years ago.
Regards
--
Bert Doorn, Web Developer
Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites



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

--
-
Tom Livingston
Senior Multimedia Artist
mlinc.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
**

Re: [WSG] Images in Nav, Splash Screens.

[Jonathan T. Sage]

Patrick -

On Wed, 01 Dec 2004 08:41:27 +, Patrick H. Lauke
<[EMAIL PROTECTED]> wrote:
> Jonathan T. Sage wrote:
> 
> > hear hear!  take a look at google with a term like '3 click rule'.
> > Use a splash screen, and you've limited yourself to delivering your
> > product in 2 clicks.  that's a challange.  Not to mention, if you use
> > something fancy like flash for the splash screen, 9 times out of 10,
> > I'm already done.
> 
> although your reasoning is sensible in this case, I'd nonetheless like
> to point out that the '3 click rule' is one of those usability
> 'commandments'
> which is all too often used as if it was cast in stone...but it's not. It
> obviously depends on the specific site structure. Applying it
> indiscriminately
> is a bad thing, and would result - in complex sites - with a limited,
> squashed
> and sub-optimal site structure. Sometimes it does take 4, 5 or more clicks
> to get to the right place. The important thing is that the journey needs to
> be logical.


Absolutly.  I think even more important is the 1 click rule.  For
instance, if I come in from a search engine looking for specific
information, and I don't find it on that page (or even if it's buried
because the page is way too text-heay), I'm done.  Logical layout
always wins out.  That said, by the time I move past the splash
screen, I'm already getting punchy and ready to throw in the towel. 
The hit after the splash has to be pretty amazing to get me interested
again.
-- 
Jonathan T. Sage
Theatrical Lighting / Set Designer
Professional Web Design

[HTTP://www.JTSage.com]
[HTTP://design.JTSage.com]
[EMAIL PROTECTED]
**
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.

[Bert Doorn]

G'day

> 1. They want to use a full page graphic Splash Screen, which displays 
> the brand in all its glory before the user can enter the site. 

My opinion: 

* Waste of space
* Waste of bandwidth (at the server and user's end)
* Annoying.  

 I don't have stats on it, but know many people who get annoyed by them
(myself included).   If there's a "click-through" and I'm still interested
after the annoyance, I click on it immediately.  If not, I leave.

Here's some links you might show the client:

http://www.websiteoptimization.com/speed/tweak/splash/  concludes: 

"Splash pages can backfire with users. Rather than enticing them to explore
further you repel them clicking and screaming. Splash pages decrease
performance, credibility, traffic, and search engine rankings. Bailout rates
up to 71% have been reported with some splash pages. If you must use a
splash page, make sure it loads quickly, provides bypass links and keywords,
and optionally uses cookies to display it just once."

http://www.webpagesthatsuck.com/amazon.html   "Would Amazon.com use that
design element on its site?"

> 2. They want to use images in the Navigation bar to 
> give tight control over the fonts, instead of text.

* They have no control over me turning the images off
* The site will take longer to load
* Poor eyesight?  Can't read the buttons?  Can't increase the text size, so
I leave

They talk about "old school".   Using images for links, just to show a fancy
font, is about as old school as it gets.  I can't remember the last site I
did this on - must be years ago.

Regards
--
Bert Doorn, Web Developer
Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites







**
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.

[Kornel Lesinski]

 I try to explain to clients (and designers...) that user always knows  
where he got to - people just don't type random adresses :)

 Site design should already have logo and "corporate look'n'feel" so such  
splash screen basically has no information on meaningful content.

 Visitors seeking information will get annoyed and bored by splash screen,  
because it is not what they came for.

 There is also an explanation on useit.com:
 http://www.useit.com/alertbox/990530_comments.html
--
regards, Kornel Lesiński
**
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.

[Patrick H. Lauke]

Jonathan T. Sage wrote:
hear hear!  take a look at google with a term like '3 click rule'. 
Use a splash screen, and you've limited yourself to delivering your
product in 2 clicks.  that's a challange.  Not to mention, if you use
something fancy like flash for the splash screen, 9 times out of 10,
I'm already done.
although your reasoning is sensible in this case, I'd nonetheless like
to point out that the '3 click rule' is one of those usability 
'commandments'
which is all too often used as if it was cast in stone...but it's not. It
obviously depends on the specific site structure. Applying it 
indiscriminately
is a bad thing, and would result - in complex sites - with a limited, 
squashed
and sub-optimal site structure. Sometimes it does take 4, 5 or more clicks
to get to the right place. The important thing is that the journey needs to
be logical.
See for instance 
http://web.archive.org/web/20040316081516/http://www.uie.com/articles/three_click_rule/
(sending you to the web archive version, as the live site seems to have some
trouble getting their XSL to work properly).

Same goes for the "magic 7 +/- 2" rule
http://www.clickz.com/experts/crm/traffic/article.php/3427631
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.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
**

Re: [WSG] Images in Nav, Splash Screens.

[Neerav]

Use Andy King's article at 
http://www.websiteoptimization.com/speed/tweak/splash/ he definitely 
isnt old school

In the end however, they may ignore you. Thats their choice. As long as 
you've stated your objections in documentation they can't blame you 
later when the problems you predict appear

Neerav Bhatt
http://www.bhatt.id.au
Web Development & IT consultancy
http://www.bhatt.id.au/blog/ - Ramblings Thoughts
http://www.bhatt.id.au/photos/
http://www.bookcrossing.com/mybookshelf/neerav
Matt wrote:
Hi Everyone,
I am setting up a sports website for a client, where all of the
content is in Article format which rotates regularly - essentially a
news type site. I am determined to build the site in valid XHTML/CSS.
I am debating with their designers about 2 things:
1. They want to use a full page graphic Splash Screen, which displays
the brand in all its glory before the user can enter the site.
2. They want to use images in the Navigation bar to give tight control
over the fonts, instead of text.
I do not want to use a splash screen, because it will just get in the
way, and could turn viewers away. I do not want to use images in the
navigation, not only for usability / accessibility  / SEO reasons, but
because the site is dynamic and I want the Nav to be dynamically
driven.
I just wondered if any of you know of any websites which show solid
convincing arguments against these things, so that I can prove my
point. At this stage the accessibility argument isn't cutting it
(enough)!...
I can show them some stuff from Jacob Nielsen, but I found that they
essentially scoff at his comments claiming that he is too 'old
school'...
Also, if anyone can assist with my message from yesterday (Nov 30)
subject "Help with a layout" I'd be very grateful : )
Thanks in advance, Matt
**
The discussion list for  http://webstandardsgroup.org/
 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**
**
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.

[Jonathan T. Sage]

Matt -

On Wed, 1 Dec 2004 15:23:49 +1100, Matt <[EMAIL PROTECTED]> wrote:

> I am setting up a sports website for a client, where all of the
> content is in Article format which rotates regularly - essentially a
> news type site. I am determined to build the site in valid XHTML/CSS.

excellent!

> 
> I do not want to use a splash screen, because it will just get in the
> way, and could turn viewers away. 

hear hear!  take a look at google with a term like '3 click rule'. 
Use a splash screen, and you've limited yourself to delivering your
product in 2 clicks.  that's a challange.  Not to mention, if you use
something fancy like flash for the splash screen, 9 times out of 10,
I'm already done.

>I do not want to use images in the
> navigation, not only for usability / accessibility  / SEO reasons, but
> because the site is dynamic and I want the Nav to be dynamically
> driven.
> 

a valid argument.  Perhaps doing some general surfing and giving them
research examples could help?  Show them how nice your method can
look, how effective it can be?


Also, there are too many articles to count covering the topic of how
web publishing is drastically different from print publishing.  Maybe
a selection of them from the big hitters (CNN/tech, O'Reiley, etc.)
would help your case?

hope this is of some use

~j

-- 
Jonathan T. Sage
Theatrical Lighting / Set Designer
Professional Web Design

[HTTP://www.JTSage.com]
[HTTP://design.JTSage.com]
[EMAIL PROTECTED]
**
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 without float

[Ted Drake]

The dl 
tag to the rescue.
put 
the image and caption in dd tags, the text in the dt. float the dt to the left 
or the dd's to the right or some other variation.
An 
example can be seen here:
http://v4.csatravelprotection.com/csa/asalescontact.do
 
Each 
of the account reps sits in their own dl which also floats, has a background, 
border, etc...
 
Ted
 

  -Original Message-From: Trusz, Andrew 
  [mailto:[EMAIL PROTECTED]Sent: Thursday, September 30, 2004 
  9:47 AMTo: '[EMAIL PROTECTED]'Subject: RE: [WSG] 
  Images without float
  
   
   
  
  
  
  
  Sent: Thursday, September 30, 2004 11:55 
  AMTo: 
  [EMAIL PROTECTED]Subject: [WSG] Images without 
  float
   
  
  How can one have an image on the left with a 
  caption below the image, and text on the right. I don't want to text to float 
  around the image and I don't want to use a 
  table.
  
   
  
  Thanks,
  
   
  
  Nancy Johnson
  
   
  
   -
   
   
  You have to float 
  something. If you don't want to float the text, then float the image in a div 
  with the caption under it. Add padding, margin, or border to taste. Start the 
  text after the float and you are good to go.
   
  drew
   

RE: [WSG] Images without float

[Trusz, Andrew]

 

 










Sent: Thursday, September 30, 2004
11:55 AM
To: [EMAIL PROTECTED]
Subject: [WSG] Images without
float



 



How can one have an image on the left with a caption below the
image, and text on the right. I don't want to text to float around the image
and I don't want to use a table.





 





Thanks,





 





Nancy Johnson





 





 -

 

 

You have to float something. If you don't
want to float the text, then float the image in a div with the caption under
it. Add padding, margin, or border to taste. Start the text after the float and
you are good to go.

 

drew



 

RE: [WSG] Images inside a div class with specified link style

[Jaime W]

Thanks Patrick

So there is no other way besides making an extra div just for images with
links? :< Trying to prevent from creating more divs.


Best Wishes, 
Jaime ...


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Patrick Griffiths
Sent: Monday, 3 May 2004 12:25 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Images inside a div class with specified link style

.divRight a
{
border-bottom : none;
}

Your code was looking for an a element nested inside an image!

If there are other links in .divRight boxes that you want the border
applied to, you'll need to apply a different class to the a element
surrounding the image.


Patrick Griffiths (PTG)
 http://www.htmldog.com/ptg/
 http://www.htmldog.com


> How do I prevent link styles from showing on the images that are
positioned
> inside a div class with specified link style? An example below.
>
> 
> Content text here Content text here Content text here Content text
here
> 
>  height="10" />
> 
> 
>
> .aCol a
> {
> color : #AE0D2D;
> text-decoration : none;
> border-bottom : 1px dashed #90AAAB;
> }
>
>
> I have tried doing..
>
> .divRight img a
> {
> border-bottom : none;
> }
>

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


*
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 inside a div class with specified link style

[Patrick Griffiths]

.divRight a
{
border-bottom : none;
}

Your code was looking for an a element nested inside an image!

If there are other links in .divRight boxes that you want the border
applied to, you'll need to apply a different class to the a element
surrounding the image.


Patrick Griffiths (PTG)
 http://www.htmldog.com/ptg/
 http://www.htmldog.com


> How do I prevent link styles from showing on the images that are
positioned
> inside a div class with specified link style? An example below.
>
> 
> Content text here Content text here Content text here Content text
here
> 
>  height="10" />
> 
> 
>
> .aCol a
> {
> color : #AE0D2D;
> text-decoration : none;
> border-bottom : 1px dashed #90AAAB;
> }
>
>
> I have tried doing..
>
> .divRight img a
> {
> border-bottom : none;
> }
>

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