Re: [WSG] images against color backgrounds
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
Or, try the CSS3 box-shadow http://www.css3.info/preview/box-shadow/ Tim On Thu, Dec 9, 2010 at 11:01 AM, Stuart Foulstone stu...@bigeasyweb.co.uk wrote: Might get some ideas from CSS Drop Shadows @ http://www.alistapart.com/articles/cssdropshadows/ On Wed, December 8, 2010 9:01 pm, cat soul wrote: I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page (s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] images against color backgrounds
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 ***
Re: [WSG] images against color backgrounds
.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 against color backgrounds
.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
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 mailto: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 Paragraph Width
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: p style=border:2px solid #000;display:inline-block; img src=http://www.google.com/intl/en_ALL/images/logo.gif;br Regular Image /p ...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 Paragraph Width
Hi,
I had a quick look on Google:
html
head
style
!--
.textborder {border: 1px solid black; padding: 2px;}
--
/style
/head
body
span class=textborderHere you go/span
/body
/html
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: wsg@webstandardsgroup.org
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'.
p class=imgimg src=images/image.gif alt=pic /br /Regular
Image/p
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
Just a thought... but perhaps a blockquote would better suit your design requirements than a p? -- 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
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'.
p class="img"img src="" alt="pic"
/br /Regular
Image/p
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
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'.
p class=imgimg src=images/image.gif alt=pic /br /Regular Image/p
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]
***
[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'.
p class=imgimg src=images/image.gif alt=pic /br /Regular
Image/p
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]
***
[WSG] Images
I have a quick question and would like your thoughts. I am working with a team of coders that code images like: img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases border=0 height=150 width=388 / My question is, do you need the border, height, and width or should that be done in the style sheet or is it needed? img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases / Thoughts? Thanks James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Images
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: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: img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases border=0 height=150 width=388 / My question is, do you need the border, height, and width or should that be done in the style sheet or is it needed? img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases / Thoughts? Thanks James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Images
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
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: img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases border=0 height=150 width=388 / My question is, do you need the border, height, and width or should that be done in the style sheet or is it needed? img src=/images/18-digestive-diseases-2col.jpg alt=Digestive Diseases / 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] ***
[WSG] Images not showing on the MAC (JavaScript issue)
Hi all,
I hope its not off-topic, it is after all to do with user friendliness.
I'm using some JavaScript to hide any images that have not loaded properly
or are missing. I don't like seeing the red crosses on a site, it looks
unprofessional.
http://www.sellmystuff.com.au/buystuff/generalstuff/parent-category.cfm?cate
goryIdentity=1
The problem is that on the MAC it removes all images like they have not
loaded properly. It only removes the ones within the HTML, not those placed
by CSS.
Following is the code used to check, obviously isLoadedImage always seems to
return false on the MAC for some reason. Would anyone know why?
function isLoadedImage( obj ) {
if (!obj.complete) {
return false;
}
if ( typeof obj.naturalWidth != undefined obj.naturalWidth == 0 ) {
return false;
}
return true;
}
function checkImage() {
for ( var i = 0; i document.images.length; i++ ) {
if ( !isLoadedImage( document.images[ i ] ) ) {
document.images[ i ].style.visibility = hidden;
}
}
};
myWindow.doAddOnloadListener( checkImage );
Thanks in advance.
Kind regards, Taco Fleur
clickfindT
www.clickfind.com.au the new Australian search engine for businesses,
products and services .
***
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,
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)
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: a id="header"
title="Revised Image Replacement"
href=""span/spanRevised Image
Replacement/aWhy?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.cfmfor
some hints on posting to the list getting
help**
[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.htm Image With Link: http://www.sugarman.ca/temp/w3c/imagem_com_link.htm We would like to have your opinion about it and sugestions are welcome! []'s Fausto Balloni Filho Client-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)
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 ofdoing 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 a tag. So thecommon 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 HTMLwould be: a id="header" title="Revised Image Replacement" href=""span/spanRevised Image Replacement/a Anyonefoundanother 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.cfmfor some hints on posting to the list getting help**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
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)
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)
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:
a id=header title=Revised Image Replacement
href=revised.htmlspan/spanRevised Image Replacement/a
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)
Thank
you foryour 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 ofdoing
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 a tag. So
thecommon 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 HTMLwould be:
a id="header" title="Revised Image
Replacement" href=""span/spanRevised Image
Replacement/a
Anyonefoundanother
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.cfmfor
some hints on posting to the list getting
help**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
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: a id="header"
title="Revised Image Replacement"
href=""span/spanRevised Image
Replacement/aWhy?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.cfmfor
some hints on posting to the list getting
help**
Re: [WSG] images in html or css
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 http://www.hucklesby.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
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 img 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
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 **
[WSG] images in html or css
hello, Just Wondering- Is the img 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 img tag. ** 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
G'day Is the img 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 img 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 in html or css
kvnmcwebn wrote: hello, Just Wondering- Is the img 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 img 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
I agree with Bert! Regards, -- Cláudio Diashttp://www.mundonu.com
Re: [WSG] images in html or css
On Thu, 2005-09-15 at 16:03 +0100, kvnmcwebn wrote: Is the img 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 img 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 img 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 img tags across a site, which I think is a misuse of CSS. Keeping img 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
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
Is the img 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 img 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
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 as accessible form buttons
Andreas Boehmer [Addictive Media] wrote: I then thought I should use input type=image, but realised that this doesn't work in all browsers. IE, for example, has got the nasty habbit of submitting name.x=0name.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 **
[WSG] Images as accessible form buttons
I know we had this discussion once before, but I was hoping to return to it to see if there are any new opinions on this topic. The question I have is what would be the best option to create images as form buttons in an accessible manner? So far I have always tried to use css to assign a background image to a input type=button, but that doesn't always work, in particular if your button text does not contain a standard font. I then thought I should use input type=image, but realised that this doesn't work in all browsers. IE, for example, has got the nasty habbit of submitting name.x=0name.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. Then there is button, but to be honest I don't know much about this one. I assume it is not being supported in older browsers, so probably not the best accessible solution, either. Which leaves me with no solution, really. Is there a way of making it accessible? Or are our browser limitations that strong that there is really no way to use images as form buttons? Thanks for the opinions. Andreas ** 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
On Sep 5, 2005, at 11:54 PM, Andreas Boehmer [Addictive Media] wrote: I then thought I should use input type=image, but realised that this doesn't work in all browsers. IE, for example, has got the nasty habbit of submitting name.x=0name.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=xxname.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 as accessible form buttons
-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 input type=image, but realised that this doesn't work in all browsers. IE, for example, has got the nasty habbit of submitting name.x=0name.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=xxname.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=xxname.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 not loading...
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: wsg@webstandardsgroup.org 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: wsg@webstandardsgroup.org 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 **
[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 **
Re: [WSG] Images not loading...
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: wsg@webstandardsgroup.org 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 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: wsg@webstandardsgroup.org 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...
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: wsg@webstandardsgroup.org 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 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...
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: wsg@webstandardsgroup.org 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: wsg@webstandardsgroup.org 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 **
[WSG] images breaking out of their bounding box in MSIE/win
Hello all, I have a nagging CSS problem I don't understand... I guess a click on a link will say more than a thousand words: http://www.kontverhaal.com/kv/ There are divs with images in them that float to the right. When the text which is in the div is rather short, the image 'breaks out of the box' in MSIE for windows. It works fine in all other browsers I've tested including MSIE for mac. Anyone know how to fix this? Best regards, Marco -- Marco van Hylckama Vlieg Senior Internet Developer email: [EMAIL PROTECTED] www: http://www.i-marco.nl/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] images and the dl
Hi Mordechai
As for the image being a definition term, I first used this format for
illustrating a gallery of objects in a museum's collection. The image
represented the work of art. As such, it seems to fit the semantics of a
definition list for ME. That may not mean I'm correct.
If the information in the dd is adding to the definition of the dt, and an
image can do this, 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.
Andy Clarke has an interesting post on creating an e-commerce site with
definition lists:
http://www.stuffandnonsense.co.uk/archives/ecommerce_definition_lists.html
He is using an image of a book in a dt tag. Would tht be more appropriate?
I don't remember the use of the position relative. This was one of those styles
I threw together and it worked the first time and never went back and
optimized. It probably would be fine without it.
Ted
-Original Message-
From: Mordechai Peller [mailto:[EMAIL PROTECTED]
Sent: Monday, December 20, 2004 2:35 PM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Need better markup
Ted Drake wrote:
dl
ddimg src=../images/rodriguezLO.jpg alt=Photo of Gina Rodriguez
height=108 width=72/dd
dtGina Rodriguez/dt
ddAccount Manager/dd
ddExt. 2412/dd
/dl
Ted, I don't think your dl's are very semantic, though they could (and
should) be. A dl is a list (even a list of one, which works for dl's,
but generally not ul's nor ol's) of pairs: a group of terms followed by
a group of datum. In your example, Gina is paired with her job title and
her extension, which is a very good use a dl (though adding a class
and/or title would probably improve it even more, that's a separate
discussion); however Gina's picture is unassociated data.
Just to restate my general opinion regarding your suggestion of dl's for
Collin's mark-up, I'm in 100% agreement. The only failing here is that
you need to use separate dl's for each item. This will be corrected in
XHTML 2 with the addition of the data item (di)[1] container to group
the dt's and dd's together and provide a much needed CSS hook.
[1] http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-list.html#edef_list_di
#salescontacts dt {position:relative; margin: 0; font-weight:bold;}
Just curios, but why position:relative? Is it to rectify an IE float bug?
**
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 and the dl
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. dl ddimg/dd dtName/dt ddTitle/dd ddExt/dd /dl 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 breaking out of their bounding box in MSIE/win
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 p, 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 breaking out of their bounding box in MSIE/win
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 p, 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
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 in Nav, Splash Screens.
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 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.
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 Lesiski ** 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 **
[WSG] Images in Nav, Splash Screens.
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 **
Re: [WSG] Images in Nav, Splash Screens.
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 in Nav, Splash Screens.
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 **
[WSG] Images without float
How canone 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 Do you Yahoo!? Yahoo! Mail - 50x more storage than other providers!
RE: [WSG] Images without float
Sent: Thursday, September 30, 2004 11:55 AM To: [EMAIL PROTECTED] Subject: [WSG] Images without float How canone 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
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 canone 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
[WSG] Images inside a div class with specified link style
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.
div class=aCol
Content text here Content text here Content text here Content text here
div class=divRight
a href=#img src=top.gif alt=Back to top of the page width=30
height=10 //a
/div
/div
.aCol a
{
color : #AE0D2D;
text-decoration : none;
border-bottom : 1px dashed #90AAAB;
}
I have tried doing..
.divRight img a
{
border-bottom : none;
}
and
.aCol img a
{
border-bottom : none;
}
..obviously weren't right so they didn't work :P
In the end I cheated by doing this:
div class=aCol
Content text here Content text here Content text here Content text here
/div
div class=divRight
a href=#img src=top.gif alt=Back to top of the page width=30
height=10 //a
/div
Feel bad cheating without knowing why it can't be solved...
Best Wishes,
Jaime ...
*
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
.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.
div class=aCol
Content text here Content text here Content text here Content text
here
div class=divRight
a href=#img src=top.gif alt=Back to top of the page
width=30
height=10 //a
/div
/div
.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
*
RE: [WSG] Images inside a div class with specified link style
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.
div class=aCol
Content text here Content text here Content text here Content text
here
div class=divRight
a href=#img src=top.gif alt=Back to top of the page
width=30
height=10 //a
/div
/div
.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
*
