Re: [WSG] Image with borders due to Anchor tag

2009-01-16 Thread Johan Douma
I'm not sure if I understand the question...
But it's actually easy to remove the borders from an image in an anchor tag
using css, not inline.

a img{
  border:none;
}

When that's done, you can do whatever you want with the link or with the
image.


Johan Douma
johando...@gmail.com

2009/1/16 Brett Patterson inspiron.patters...@gmail.com

 Okay. That makes sense.

 --
 Brett P.


 On Thu, Jan 15, 2009 at 3:52 PM, David Dorward da...@dorward.me.ukwrote:

 Brett Patterson wrote:
  So, my question is this. Why does the image tag have to have the border
  placed on it, instead of placing the border or text-decoration styles on
  the anchor tag?

 Consider the case:

 a href=/ img src=/foo alt= Ipsum Ipsum /a

 A border around the entire thing would give a very different effect to a
 border around just the image.

 There's no selector in CSS to select an element based on its descendants
 either.

 --
 David Dorward   http://dorward.me.uk/


 ***
 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] Chrome and Safari render the same...or do they?

2009-01-08 Thread Johan Douma
Hi everybody,

Even though Chrome is based on Webkit, Chrome actually uses another
graphics/rendering engine (the drawing layer) called Skia (source code:
http://src.chromium.org/viewvc/chrome/trunk/src/skia/).
A bit like the javascript engines, Google didn't use webkits' javascript
engine (Sqirrelfish or whatever they had before it) but developed one
themselves; V8...

Skia came from an acquisition made by Google in 2005 of a small startup
specialising in Mobile graphics (
http://localtechwire.com/business/local_tech_wire/news/story/1126258/). Skia
seems to be heavily used in Android and is now part of Chrome as well.

Thus there are differences in rounded borders where the antialiasing doesn't
work so well, fonts that are smoothed differently and shadows are rendered
incorrectly.  This was the case a few monts ago, but I haven't tested it
recently; it might be better now.
I've heard about opacity and png problems (rounding alpha values to 1bit)
but I haven't noticed any problems with that.

I'm not sure why Google decided to use Skia, maybe some proprietary bits
from Quartz or from Safari that could not be used, maybe they just wanted to
use their own technology... Maybe somebody else here knows about it ?

Cheers,
Johan Douma
johando...@gmail.com


2009/1/8 Simon Pascal Klein kle...@klepas.org

 I think this comes down more to which font rasterisation engine a system is
 using. I don't think Safari on Windows for example has full access to AAT
 and Quartz and thus will render type using ClearType and GDI on Windows. Add
 Firefox into the mix which uses Cairo and you'll get different results
 again, which are easily visible (for example) when comparing how Firefox
 using Cairo and ATSUI renders fonts that don't have their own small-capitals
 and thus must downsize capitals to a small-cap scale (traditionally the
 x-height of the face) and how Safari handles the same thing. (Safari, I find
 does this better—a good font to test this with is Georgia which sadly lacks
 proper real small-capitals.)

 To fix layout issues with content running outside your boxes use absolute,
 fixed and relative positioning instead of floats, eg:

 div#container {
position: relative;
width: 100%;
}

 div.content_primary {
width: 60%;
left: 0;
}

 div.content_secondary {
width: 40%;
left: 60%;
}

 This way you can also quickly switch your columns around without touching
 your markup; add absolute positioning to the column that appears first in
 the markup (likely to be content_primary) and swap the left property indent.

 Hope any of this helps.


 —Pascal


 On 08/01/2009, at 4:36 PM, Jens-Uwe Korff wrote:

  Hi experts,

 I'm running into big rendering differences between Google Chrome and
 Safari 3.1/PC. They are said to render pages the same, given that
 they're using the same Webkit engine.

 The differences seem to be mainly due to the different font rendering.
 Safari's fonts are way smaller, hence my boxes are smaller and shift up,
 breaking the layout.

 Anyone knows why this is so? Is there a workaround, i.e. a Safari-only
 CSS hack?

 Cheers,

 Jens

 The information contained in this e-mail message and any accompanying
 files is or may be confidential. If you are not the intended recipient, any
 use, dissemination, reliance, forwarding, printing or copying of this e-mail
 or any attached files is unauthorised. This e-mail is subject to copyright.
 No part of it should be reproduced, adapted or communicated without the
 written consent of the copyright owner. If you have received this e-mail in
 error please advise the sender immediately by return e-mail or telephone and
 delete all copies. Fairfax does not guarantee the accuracy or completeness
 of any information contained in this e-mail or attached files. Internet
 communications are not secure, therefore Fairfax does not accept legal
 responsibility for the contents of this message or attached files.


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


 ---
 Simon Pascal Klein
 Concept designer

 (w) http://klepas.org
 (e) kle...@klepas.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] Chrome and Safari render the same...or do they?

2009-01-08 Thread Johan Douma
Just though I'd let you know about this, I actually think this is a pretty
serious problem, because it breaks a lot of scripts and doesn't conform with
the other browsers even though it conforms to the javascript spec.

V8 (chrome's js engine) can take the values in an array in a random order.

If we have my_array = new Array(val1,val2,val3,val4, etc... );
And we loop thru that array with for-in the values might come out as val4,
val1, val3

The js spec actually says that it can loop thru an array in any order, but
it actualy should be fixed to conform with other browsers. (
https://mail.google.com/mail/?zx=zux2r51mnf08shva=1#label/assoc/11eb4c430f775f2c
)

Wait and see... Maybe leave a message behind on the bug page to make Google
fix it.

Johan Douma
johando...@gmail.com


2009/1/8 Johan Douma johando...@gmail.com

 Hi everybody,

 Even though Chrome is based on Webkit, Chrome actually uses another
 graphics/rendering engine (the drawing layer) called Skia (source code:
 http://src.chromium.org/viewvc/chrome/trunk/src/skia/).
 A bit like the javascript engines, Google didn't use webkits' javascript
 engine (Sqirrelfish or whatever they had before it) but developed one
 themselves; V8...

 Skia came from an acquisition made by Google in 2005 of a small startup
 specialising in Mobile graphics (
 http://localtechwire.com/business/local_tech_wire/news/story/1126258/).
 Skia seems to be heavily used in Android and is now part of Chrome as well.

 Thus there are differences in rounded borders where the antialiasing
 doesn't work so well, fonts that are smoothed differently and shadows are
 rendered incorrectly.  This was the case a few monts ago, but I haven't
 tested it recently; it might be better now.
 I've heard about opacity and png problems (rounding alpha values to 1bit)
 but I haven't noticed any problems with that.

 I'm not sure why Google decided to use Skia, maybe some proprietary bits
 from Quartz or from Safari that could not be used, maybe they just wanted to
 use their own technology... Maybe somebody else here knows about it ?

 Cheers,
 Johan Douma
 johando...@gmail.com


 2009/1/8 Simon Pascal Klein kle...@klepas.org

 I think this comes down more to which font rasterisation engine a system is
 using. I don't think Safari on Windows for example has full access to AAT
 and Quartz and thus will render type using ClearType and GDI on Windows. Add
 Firefox into the mix which uses Cairo and you'll get different results
 again, which are easily visible (for example) when comparing how Firefox
 using Cairo and ATSUI renders fonts that don't have their own small-capitals
 and thus must downsize capitals to a small-cap scale (traditionally the
 x-height of the face) and how Safari handles the same thing. (Safari, I find
 does this better—a good font to test this with is Georgia which sadly lacks
 proper real small-capitals.)

 To fix layout issues with content running outside your boxes use absolute,
 fixed and relative positioning instead of floats, eg:

 div#container {
position: relative;
width: 100%;
}

 div.content_primary {
width: 60%;
left: 0;
}

 div.content_secondary {
width: 40%;
left: 60%;
}

 This way you can also quickly switch your columns around without touching
 your markup; add absolute positioning to the column that appears first in
 the markup (likely to be content_primary) and swap the left property indent.

 Hope any of this helps.


 —Pascal


 On 08/01/2009, at 4:36 PM, Jens-Uwe Korff wrote:

  Hi experts,

 I'm running into big rendering differences between Google Chrome and
 Safari 3.1/PC. They are said to render pages the same, given that
 they're using the same Webkit engine.

 The differences seem to be mainly due to the different font rendering.
 Safari's fonts are way smaller, hence my boxes are smaller and shift up,
 breaking the layout.

 Anyone knows why this is so? Is there a workaround, i.e. a Safari-only
 CSS hack?

 Cheers,

 Jens

 The information contained in this e-mail message and any accompanying
 files is or may be confidential. If you are not the intended recipient, any
 use, dissemination, reliance, forwarding, printing or copying of this e-mail
 or any attached files is unauthorised. This e-mail is subject to copyright.
 No part of it should be reproduced, adapted or communicated without the
 written consent of the copyright owner. If you have received this e-mail in
 error please advise the sender immediately by return e-mail or telephone and
 delete all copies. Fairfax does not guarantee the accuracy or completeness
 of any information contained in this e-mail or attached files. Internet
 communications are not secure, therefore Fairfax does not accept legal
 responsibility for the contents of this message or attached files.


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http

Re: [WSG] Chrome and Safari render the same...or do they?

2009-01-08 Thread Johan Douma
I said indeed serious problem, although that is indeed debatable.

for in should indeed be used carefully, it's not quite reliable and browsera
all have different behaviours, although chrome's behaviour is the most
unreliable (if we can call it like that) due to the order of elements
returned.

Even though chrome's behaviour is in agreement with the spec it doesn't do
what all the other browsers do.

Now, do we want to strictly follow the spec and Google leaves it like that?
Or do we want it conform to what's already been done, for what? Is it in
order not to break the web, or is it really to gain market share?
Following the spec to stricly might make a browser too different and might
stop adoption (even tho this is only one problem); most people will consider
this a bug and as per spec... What's Google going to do?

I'll stop there, this is an entirely other debate...

Johan Douma
johando...@gmail.com

2009/1/8 michael.brocking...@bt.com

  Any script that relies on an array being ordered, without actually doing
 a   sort()  is seriously . Asdeficient you mentioned yourself, this
 behaviour is entirely  in agreement with the JS spec.

 Regards,
 Mike

  --
 *From:* li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On
 Behalf Of *Johan Douma
 *Sent:* 08 January 2009 11:22
 *To:* wsg@webstandardsgroup.org
 *Subject:* Re: [WSG] Chrome and Safari render the same...or do they?

 Just though I'd let you know about this, I actually think this is a pretty
 serious problem, because it breaks a lot of scripts and doesn't conform with
 the other browsers even though it conforms to the javascript spec.

 V8 (chrome's js engine) can take the values in an array in a random order.

 If we have my_array = new Array(val1,val2,val3,val4, etc... );
 And we loop thru that array with for-in the values might come out as val4,
 val1, val3

 The js spec actually says that it can loop thru an array in any order, but
 it actualy should be fixed to conform with other browsers. (
 https://mail.google.com/mail/?zx=zux2r51mnf08shva=1#label/assoc/11eb4c430f775f2c
 )

 Wait and see... Maybe leave a message behind on the bug page to make Google
 fix it.

 Johan Douma
 johando...@gmail.com


 ***
 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] re: Firefox v3 and opacity on opacity

2008-12-22 Thread Johan Douma
Hi Mike,

I've just tested it on the 3.1b3pre nighly from yesterday on Mac OSX 10.4 an
it works fine as well.
There shouldn't be any difference between XP and Vista, but he I might be
wrong. I haven't seen anything like this before, it's all a bit weird
indeed. Have you checked bugzilla to see if there's a reported bug about
this? If not maybe report it and see if other people have the same bug.
https://bugzilla.mozilla.org/
And what about firefox without extensions?

Cheers,

Johan Douma
johando...@gmail.com


2008/12/22 Foskett, Mike mike.fosk...@uk.tesco.com

  Good idea Jon,

 Just tried it and the code still has display issues.



 Johan,

 I'm surprised it worked correctly for you.

 The only difference I can see is you are running XP while my testing was on
 Vista.

 Would that be enough to cause an issue?



 Does anyone using FFv3.05 on XP or Vista have mouse-over display issues
 with the code?

 If so, or not, what OS are you using?





 Mike

 http://websemantics.co.uk/







 *From:* li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On
 Behalf Of *James Ducker
 *Sent:* 20 December 2008 12:34
 *To:* wsg@webstandardsgroup.org
 *Subject:* Re: [WSG] re: Firefox v3 and opacity on opacity



 Perhaps try it with Firefox in safe mode, just to be sure it isn't an
 add-on?

 On Sat, Dec 20, 2008 at 12:39 AM, Johan Douma johando...@gmail.com
 wrote:

 It's working fine for me on Windows XP, FF3.1b2
 No issues at all.

 Cheers,
 Johan



 2008/12/19 Foskett, Mike mike.fosk...@uk.tesco.com

 Hi Nick,



 The issue shown occurred on two different PCs and one Mac running windows.

 It doesn't occur on the Mac version of Firefox 3.

 My PC is using version 3.05.



 Here's a cropped screen grab of the supplied code, showing the effect after
 the mouse hover.

 http://websemantics.co.uk/temp/example_firefox_3_opacity_issue.jpg







 mike







 *From:* li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On
 Behalf Of *Nick Cowie
 *Sent:* 19 December 2008 11:56
 *To:* wsg@webstandardsgroup.org
 *Subject:* Re: [WSG] re: Firefox v3 and opacity on opacity



 Mike

 I did not have any of that problem or any other issues with Firefox 3.04,
 3.05 or 3.1b2 on Mac OS X 10.5.6

 Nick

 2008/12/19 Foskett, Mike mike.fosk...@uk.tesco.com

 Hi all,



 After finally upgrading Firefox to version 3.05, I encountered a rather
 unusual bug.



 When opacity is set to more than one level of container, contained links
 render badly on hover.

 Hovered link text turns white on white, which doesn't return to the natural
 state on mouse out.

 Scrolling the link off screen restores the link colour.



 Here's a demo which only causes issues in Firefox v3.



 html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en

 head

   meta http-equiv=content-type content=text/html; charset=utf-8 /

   titleopacity/title

   style type=text/css

  html * {border:0 solid; padding:0; margin:0; list-style:none}

  a,

  a:visited {color:#5E6277}

  a:active,

  a:focus{color:#c60}

  a:hover{color:#000}

  #wrapper{border:1px solid #ccc; width:200px; padding:20px;}

  #panel{border:1px solid #f00; margin:0 auto; background:#eee;
 padding:10px}

   /style

 /head

 body

  div id=wrapper style=opacity:0.9

div id=panel style=opacity:0.9

 ul

  lia href=#Gzip content: Speed up your
 site/a/li

  lia href=#Accessible AJAX glossary/a/li

  lia href=#Displaying code in web pages/a/li

 /ul

/div

  /div

 /body

 /html



 Does anyone out there now of a solution?



 Mike Foskett

 http://websemantics.co.uk/











  Disclaimer 
 This is a confidential email. Tesco may monitor and record all emails. The
 views expressed in this email are those of the sender and not Tesco.

 Tesco Stores Limited
 Company Number: 519500
 Registered in England
 Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8
 9SL
 VAT Registration Number: GB 220 4302 31


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




 --
 Nick Cowie
 http://nickcowie.com

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

 ---Warning

 This e-mail is from outside Tesco - check that it is genuine. Tesco may
 monitor and record all e-mails.


 ***
 List

Re: [WSG] re: Firefox v3 and opacity on opacity

2008-12-19 Thread Johan Douma
It's working fine for me on Windows XP, FF3.1b2
No issues at all.

Cheers,
Johan

2008/12/19 Foskett, Mike mike.fosk...@uk.tesco.com

  Hi Nick,



 The issue shown occurred on two different PCs and one Mac running windows.

 It doesn't occur on the Mac version of Firefox 3.

 My PC is using version 3.05.



 Here's a cropped screen grab of the supplied code, showing the effect after
 the mouse hover.

 http://websemantics.co.uk/temp/example_firefox_3_opacity_issue.jpg







 mike







 *From:* li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On
 Behalf Of *Nick Cowie
 *Sent:* 19 December 2008 11:56
 *To:* wsg@webstandardsgroup.org
 *Subject:* Re: [WSG] re: Firefox v3 and opacity on opacity



 Mike

 I did not have any of that problem or any other issues with Firefox 3.04,
 3.05 or 3.1b2 on Mac OS X 10.5.6

 Nick

 2008/12/19 Foskett, Mike mike.fosk...@uk.tesco.com

 Hi all,



 After finally upgrading Firefox to version 3.05, I encountered a rather
 unusual bug.



 When opacity is set to more than one level of container, contained links
 render badly on hover.

 Hovered link text turns white on white, which doesn't return to the natural
 state on mouse out.

 Scrolling the link off screen restores the link colour.



 Here's a demo which only causes issues in Firefox v3.



 html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en

 head

   meta http-equiv=content-type content=text/html; charset=utf-8 /

   titleopacity/title

   style type=text/css

  html * {border:0 solid; padding:0; margin:0; list-style:none}

  a,

  a:visited {color:#5E6277}

  a:active,

  a:focus{color:#c60}

  a:hover{color:#000}

  #wrapper{border:1px solid #ccc; width:200px; padding:20px;}

  #panel{border:1px solid #f00; margin:0 auto; background:#eee;
 padding:10px}

   /style

 /head

 body

  div id=wrapper style=opacity:0.9

div id=panel style=opacity:0.9

 ul

  lia href=#Gzip content: Speed up your
 site/a/li

  lia href=#Accessible AJAX glossary/a/li

  lia href=#Displaying code in web pages/a/li

 /ul

/div

  /div

 /body

 /html



 Does anyone out there now of a solution?



 Mike Foskett

 http://websemantics.co.uk/











  Disclaimer 
 This is a confidential email. Tesco may monitor and record all emails. The
 views expressed in this email are those of the sender and not Tesco.

 Tesco Stores Limited
 Company Number: 519500
 Registered in England
 Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8
 9SL
 VAT Registration Number: GB 220 4302 31


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




 --
 Nick Cowie
 http://nickcowie.com

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

 ---Warning

 This e-mail is from outside Tesco - check that it is genuine. Tesco may
 monitor and record all e-mails.

 ***
 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] your best practise for CSS sprites for elements that have no height declared

2008-11-25 Thread Johan Douma
Gif Vs PNG

If using PNG 8 / GIF, with the same amount of colours. Say 256.

Gif are often smaller than PNG in small sizes, less than 20px by 20px
example. I'll have to find out at what point a PNG is lighter. I suspect
it's around 500px.
In all the other cases PNG images will be lighter.

Although I haven't tested smshit and other tools, but they might remove
information from the header to make it lighter then GIF in every case.

The header in the PNG file is bigger than the header in GIF files, but uses
less space to save the image information.
That's why a PNG is heavier at really small size but will always be smaller
at larger sizes.

Although if you use the Save As then PNG in Photoshop  instead of Save
for web.
Photoshop adds an overhead of about 35kb-40kb (not really 20%), not sure
why, but probably color preset info, and a load of other stuff.
Shitty converters probably do the same.



Differences between FF and IE:

Gamma differences... That's not a really a browser related problem
(arguable).
The gamma is adjusted to have the images look the same on both Mac and
Windows. (1.8 vs 2.2 gamma)
Some browsers don't adjust gamma and some others do.

I usually don't save any colour information in the files, it's less trouble
with differences in the image colours and the colours set in the style
sheet. And I'm mostly working with print designers which doesn't help.

To remove any colours info, I think http://smushit.com/ can be used. In
photoshop, just uncheck Convert to sRGB.
Although don't forget to colour proof whatever you do; Mac sRGB, Win
sRGB an then Proof Colors.

Cheers,
Johan






Johan Douma
[EMAIL PROTECTED]


2008/11/26 Dennis Lapcewich [EMAIL PROTECTED]

 Return Receipt

   Your   Re: [WSG] your best practise for CSS sprites for elements
   document:  that have no height declared

   wasDennis Lapcewich/R6/USDAFS
   received
   by:

   at:11/25/2008 10:56:38







 ***
 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] your best practise for CSS sprites for elements that have no height declared

2008-11-23 Thread Johan Douma
I often have sprites that are 800px or even more, I usually use 100px in
between the images.
But I think there's a limit on earlier versions of Opera that dont take
images bigger than 2000px (not sure at all might be more). So I generally
use 2 or 3 sprites if they get big, I still save a lot of requests.
Even with the spacing between the pictures, the file is often smaller, and
decreases loading time a lot, especially where the ping is really high;
where I live it's about 140ms.

Another thing you can do is cache all the images, so that it doesn't create
a new request when someboy visits the website again.

Here's an example for a htaccess file.

FilesMatch \.(jpg|jpeg|png|gif|swf)$
Header set Cache-Control max-age=120, public
/FilesMatch

120 seconds is 2 weeks. So if images change the visitor might not see
before another 2 weeks.
If doing updates just change the file name then it will work.

Cheers,

Johan
[EMAIL PROTECTED]


2008/11/24 tee [EMAIL PROTECTED]

 I am trying to optimize a site, though the file sizes of the overall images
 aren't so much of  a problem but the http requests. So I am attempting to
 put 10 icons in one gif file, the individual icon size is merely 600b and
 the dimension is 18px by 12px.

 I made a 18px by 150px to hold 10 icons vertically, that makes the size a
 mere 4kb, problem is, there is no width declared in the list element that
 the icon is declared as background image, so when I make the font size
 bigger, the 2nd icon in the vertically order see through; one more
 increasement, I can see the 3rd and half of the 4th icons.  so I estimate I
 have to give a least 80px space in height to prevent this from happening, by
 doing so, the file size is double.

 I guess this is alright as it reduces 9 http requests, but  for other big
 images, I estimate I might have to make the height over 1500px to solve the
 problem that occurs when font size increases. I guess this is a twofold
 question: 1) How do you do to prevent the above issue from happening, if
 possible?; 2) Does this method really justify the reduces of http requests?


 Thanks!

 tee


 ***
 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] li hover bg preloader

2008-11-06 Thread Johan Douma
Indeed a change in the background position using sprites, would be a good
way.
Besides you save a few http requests as well.

You can checkout an ALA article about it here:
http://www.alistapart.com/articles/sprites2



2008/11/7 Henrik Madsen [EMAIL PROTECTED]


 I have done this previously:

 Have 1 background image and change its position (via css) on rollover (that
 way the whole thing is loaded initially).


   http://www.igenerator.com.au Henrik Madsen
 *Generator*
 +61 8 9387 1250

 [EMAIL PROTECTED]
 www.igenerator.com.au

 On 07/11/2008, at 10:27 AM, kevin mcmonagle wrote:

 Hhi,
 Whats the cleanest way to create a css prelaoder for li hover states.
 Heres the site in question.

 http://cosanglas.com/

 -best
 kevin



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



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

Re: [WSG] li hover bg preloader

2008-11-06 Thread Johan Douma
Ben: Also there is this method I found excellent:
http://inobscuro.com/tutorials/read/19/ :


That's an interesting way of doing it! i'd never thought of that. Cool!



Johan Douma
[EMAIL PROTECTED]
www.johandownunder.com
www.no-mans-land.net


2008/11/7 ben kahans [EMAIL PROTECTED]

 Also there is this method I found excellent:
 http://inobscuro.com/tutorials/read/19/
 Cheers

 Ben

 www.jumpingdogdesign.com.au






 On Fri, Nov 7, 2008 at 12:37 PM, Henrik Madsen [EMAIL PROTECTED]wrote:


 I have done this previously:

 Have 1 background image and change its position (via css) on rollover
 (that way the whole thing is loaded initially).


   http://www.igenerator.com.au Henrik Madsen
 *Generator*
 +61 8 9387 1250

  [EMAIL PROTECTED]
 www.igenerator.com.au

 On 07/11/2008, at 10:27 AM, kevin mcmonagle wrote:

 Hhi,
 Whats the cleanest way to create a css prelaoder for li hover states.
 Heres the site in question.

 http://cosanglas.com/

 -best
 kevin



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



 ***
 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] Mark-up for physical/postal addresses

2008-10-28 Thread Johan Douma
Well, what's wrong with microformats? It's really the way to go, and search
engines like yahoo, technorati already use these formats.
There are already quite a lot of generators like this one:
http://microformats.org/code/hcard/creator
No need to do any code, maybe is you want to change the structure a bit.

Cheers






Johan Douma
[EMAIL PROTECTED]


2008/10/28 David Dorward [EMAIL PROTECTED]

 Darren Lovelock wrote:
  Why not use the address tag
 Because most addresses on webpages do not provide contact details for
 the author.
   and a definition list?
 Because addresses are not definitions of things.

 --
 David Dorward
 http://dorward.me.uk/



 ***
 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] Font-size inheritance issue?

2008-10-24 Thread Johan Douma
Because all the paragraphs are wrapped into a h2
h2OPERATIONh2
pThe network has an executive committee who have been meeting monthly
since 1996. This committee discusses and acts on
 EWAN busin


The h2 after OPERATION hasn't been closed.

Cheers,
Johan


PS. I don't think this is a Support mailing list.






Johan Douma
[EMAIL PROTECTED]
www.johandownunder.com
www.no-mans-land.net


2008/10/25 Lynette Smith [EMAIL PROTECTED]

  Good morning

 http://www.westernwebdesign.com.au/EWAN/index.html

 Two pages uploaded: Home and Operation. Does anyone know why the font-size
 (specified in css -  body  80%) is different on these two pages?  Home is
 the correct one, but it is bigger on the second page and the succeeding page
 (not uploaded).

 Thanks!

 Lyn

 www.westernwebdesign
 Perth, Western Australia

 ***
 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] CSS editors

2008-10-20 Thread Johan Douma
I'm still using Dreamweaver mainly. Textmate (http://macromates.com/) for
anything else, especially if I don't want to wait for Dw to open.
I have coda as well (http://www.panic.com/coda/), but it is damn slow on my
old mac, I don't know how it is on newer G5/Intel machines. If it wasn't
that slow I guess I would be using Coda instead of Dw.
Last one for PHP code, I usually use Komodo IDE. The latest Zend Studio
sucks and I haven't really been able to find anything else.
I haven't really used CSSEdit. Can't tell you if it's any good.
Smultron is pretty good for a free tool, but Textmate is way better and not
that expensive. Additionnally, smultron is pretty heavy for such a simple
text editor. But I guess it's my old mac's fault again.
Cheers,
Johan



Johan Douma
[EMAIL PROTECTED]


2008/10/20 Gicela Morales [EMAIL PROTECTED]

 Hi Everyone,
 I've just migrated form PC to a new macbook  :-) but was wondering about
 the best xhtml/css editors for macs around that people can recommend?

 I can see that BBEdit is still around ( I used to use this back in the
 90's) and CSSedit seem to have some good reviews. Any preferences?

 Kind regards,
 Gicela


 ***
 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] Flash replace Javascript in Future?

2008-10-19 Thread Johan Douma
True indeed,
I'd never really checked on my google analytics what the values actually
were.
Here we go:

95.4% using flash 9
1.8% using 8
0.7% using 7
1.1% using with no flash

The rest with 6 and some other beta/lite versions

Flash 10 wasn't even in the list though. Not yet...

I'm not sure how reliable Google Analytics is when it comes to lash
versions. But looks like 99% of the users do have flash on their machines,
which is a lot more than with the plugins for Quicktime or Windows Media...

These results are from a website that's not targetting web savvy people but
people looking for a holidays overseas, tourists basically... it is getting
about 100 visits a day.

But on the other side, I'm not sure how many people use add ons like no
flash or no script and there's no way to find out.

 Cheers,
Johan





2008/10/20 David Fuller :: magickweb [EMAIL PROTECTED]

 Kerry I agree with you there - while 99% of computers online may have
 access
 to flash 2 or 3 some higher (of course) I think that we would be extremely
 hard pressed to find a majority of online machines with flash above flash
 8.
 Myself, a web developer, only has flash 8 on my machine (I don't code in
 flash, so no real need to upgrade it any further at this stage...)

 A good point raised :)

 David Fuller
 Developer
 magickweb
 Web:http://www.magick.com.au
 Tel:   0434 728 267
 Email:   [EMAIL PROTECTED]

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Webb, KerryA
 Sent: Monday, 20 October 2008 8:09 AM
 To: wsg@webstandardsgroup.org
 Subject: RE: [WSG] Flash replace Javascript in Future?

 Johan Douma wrote:

  Flash is on 99.9% of the computers.

 Which is the sort of claim made often by Adobe.

 But, if we're talking about a recent version of Flash on 99.9% of
 computers, that's a different matter.

 Kerry

 ---
 This email, and any attachments, may be confidential and also privileged.
 If
 you are not the intended recipient, please notify the sender and delete all
 copies of this transmission along with any attachments immediately. You
 should not copy or use it for any purpose, nor disclose its contents to any
 other person.
 ---


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




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

Re: [WSG] Chrome and Safari

2008-10-16 Thread Johan Douma
Not only JS, there are differences in CSS as well.

Shadows appear, but kinda buggy, not as it should. text-shadow and
box-shadow.
The rounded borders are not antialiased (as in aliased or pixelated) in
Chrome whereas FF3 and Safari handle it correctly.
And font-face doesn't work at all, whereas it does in safari.

I know these properties are not part of css2.1, so it's acceptable, but good
to know. That was a few weeks ago as well. Maybe it's been fixed... I
haven't checked today.

I've heard about problems with png as well, but I haven;t seen any problems
on that side of things.

There are probably other things that are different in Chrome than in Safari.


Cheers,

Johan Douma


2008/10/16 Ben Buchanan [EMAIL PROTECTED]




 Seeing as though Google's new Chrome browser uses the same rendering engine
 as Apple's Safari, would it be acceptable to test browser layout issues in
 Chrome and assume the same CSS solutions apply in Safari? Does anyone know
 of any distinct differences in CSS rendering between the 2 browsers?

 I don't know of any issues now, but as a long term solution I would assume
 that the two browsers will get out of synch at some stage in terms of the
 specific version of teh rendering engine. Also as other people have noted
 the whole browser is more than just the rendering engine; so it's prudent to
 test them separately.

 cheers,

 Ben


 --
 --- http://weblog.200ok.com.au/
 --- The future has arrived; it's just not
 --- evenly distributed. - William Gibson

 ***

 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] labels as input wrappers + h6 in place of legend

2008-10-16 Thread Johan Douma
I've always used label arount input fields labeltext: input type=text
//label without the for= attribute.
I've never had problems with it, and I don't think I've ever seen any
recommendation against it.




Johan Douma
[EMAIL PROTECTED]


2008/10/16 David Dorward [EMAIL PROTECTED]

 Jason Grant wrote:
  Ok you got both of these quite wrong for following reasons:
 
  In the first instance you shouldn't use b or br / at all.
  In the second instance you should not wrap input into label as the
  label should quite clearly be used for denoting a label of an input
  field and not the input field itself.
 Not so:

 When [the for attribute is] absent, the label being defined is
 associated with the element's contents.

 
 LABEL

   First Name
   INPUT type=text name=firstname
 /LABEL
 

  -- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1


 --
 David Dorward
 http://dorward.me.uk/



 ***
 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] Flash replace Javascript in Future?

2008-10-16 Thread Johan Douma
I don't see flash becoming a dominant technology in the future. It's
definitly not going to replace javascript.
It wouldn't actually surprise me if it is going to die off really slowly...
Only to be used in really specific cases.

Flash gets used a lot today because the flash video codec is good and
because it's the easiest way to integrate some video into the browser
without needed any plugins that might not be on everybody's computer. Flash
is on 99.9% of the computers.

Now that might change as well in the next 3 or 4 years as the video and
audio tag are going to be more and more available to easily integrate video
and audio files into a page.
We would still need plugins anyway, but browser could at least integrate
open sources plugins, like ogg... etc...
I only use flash for multiple file uploads, and some small animations in the
page itself.

Ow and damn flash 10 has broken my file uploader, I'll have to work on that.





Cheers,
Johan Douma


2008/10/16 Breton Slivka [EMAIL PROTECTED]

 Read the story on that page carefully. What has happened is that flash
 10 has increased restrictions over what features within the flash
 plugin can be invoked via javascript. This only applies to one
 specific feature (file uploads), and effects virtually no other flash
 features. It does not effect javascript's abilities in general, only
 the abilities of javascript to use flash in certain ways. This point
 will largely become moot once video/audio/3d/canvas becomes widespread
 and built into browsers, and flash as a result becomes less relevant-
 Particularly on low powered platforms like the iPhone, and Android
 which do not have flash- or the wii which only has an older and
 underpowered version of flash.

 So in my opinion, to the contrary- This news story is reporting on
 decreased ability of the flash plugin to play well with javascript- It
 will not make flash replace javascript- Except as a workaround in the
 specific case of file uploads.


 On Fri, Oct 17, 2008 at 12:27 AM, Charles Ling [EMAIL PROTECTED]
 wrote:
  Hi Guys/Gals,
 
  I would like to get some opinion from you all, that would Flash 10 or ++
  will replace JavaScript in the future?
  According to this blog :
 
 http://ajaxian.com/archives/flash-10-and-the-bad-news-for-javascript-interaction
 .
 
  I found that alot of media website started to replace Javascript to play
  their audio/video and of course Flash required to be install as third
  party plugin and had to be updated (which is annoying). Did you guys/gals
  use alot of flash in your past projects that you were working with?
 
  Cheers,
  Charles.
 
  ***
  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]
 ***




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