Re: [WSG] Can some of the HTML5 elements be used more than once?

2011-10-05 Thread Jon @ The PixelForge
For what it's worth, you can use more than one H1 tag too - the semantic use
would be for each section, perhaps for each article's title.

I think that should move use of the h1 tag from the logo/title to what it
should be used for; headlines, not page titles.

Regards,

Jon Warner
Tel: 0788 99 424 30
http://thepixelforge.net/

57 Arnold Road
Eastleigh
Hampshire
SO50 5AR
England


On Wed, Oct 5, 2011 at 12:38 PM, tee weblis...@gmail.com wrote:

 Thank you both. Much appreciated.

 The HTML5 Outliner is great!

 tee

 On Oct 5, 2011, at 4:06 AM, Frances de Waal wrote:

  Hi Tee,
 
  You can have multiple semanticle HTML5 elements like header, article,
 section, , footer, aside and nav elements in one webpage. It all depends on
 it if you want to give the content a semantical meaning, if so, use the
 corresponding new elements. Only if the box is for other purposes like
 layout, div is the one to use. As welcome as the elements are, I find that
 it also often leads to quite a puzzle sometimes to have a clear and logic
 use of them.
 
  Frances
 
  www.waalweb.nl
  www.smartscripts.nl
  Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver
  WaalWeb | Halfweg, Noord-Holland | KvK 34350833
 
  Op 5 okt 2011, om 12:44 heeft tee het volgende geschreven:
 
  I can't find any info if it's OK to use some of the HTML5 elements more
 than once.
 
  What I have in mind, in a ecommerce site which has 3 columns layout, in
 which left/right side columns are used for reports (e.g., recently view,
 upsell, related products, poll or newsletter etc...).
 
 
  So can I have?
 
  aside id=leftcol/aside
  section id=middle-col/section
  aside id=rightcol/aside
 
  p/s. I know I can do something like below but for layout/design
 consideration, this may not be the best approach sometimes.
 
 
  section id=middle-col/section
  aside
  div class=sidecol1/div
  div class=sidecol2/div
  /aside
 
  Similarly, can nav element be used twice? One for cateogries menu, and
 one for general menu that is used for Customer Service, FAQ sort of the
 pages.
 
  Thanks!
 
  tee
 
  ***
  List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
  Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
  Help: memberh...@webstandardsgroup.org
  ***
 
 
 
  ***
  List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
  Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
  Help: memberh...@webstandardsgroup.org
  ***



 ***
 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] Need a fresh eye - can anyone see what's wrong please?

2010-12-01 Thread Jon @ The PixelForge
I agree, consolidate background-image, background-repeat and *-position into
one 'background' statement. Easier and saves a few bytes.
Regards,

Jon Warner
Tel: 0788 99 424 30
http://thepixelforge.net/

57 Arnold Road
Eastleigh
Hampshire
SO50 5AR
England


On Wed, Dec 1, 2010 at 7:50 PM, Debbie Johnson d...@danceofthebee.com wrote:

 Mike -
 You have put the background color and image under background-image. Why
 don't you consolidate all of your backround statements into one:
  #footer {
color: #d9d9d9;
background: #33 url(images/Footer_background_s1.jpg) repeat-x
 top;
min-height: 96px;
 }
 Otherwise, you need to separate background-image and background-color.
 Debbie


 On Wed, 1 Dec 2010 15:50:16 +1100, Mike Kear w...@afpwebworks.com
 wrote:
  I have a draft layout for a client that is fine in all respects except
 that
  in IE8,  the background image in the footer is missing.
 
  Here's the page concerned:
  http://afpwebworks.com/strikingdistance/index.cfm
 
  And the footer div rule is as follows for IE (I have a IE-only style
 sheet)
  :
 
  #footer {
color: #d9d9d9;
background-image: #33 url(images/Footer_background_s1.jpg);
background-repeat: repeat-x;
background-position: top;
min-height: 96px;
  }
 
  Both the HTML and the CSS validate ok.
 
 
  So does any one see what I have wrong for IE?
 
  Cheers
  Mike Kear
  Windsor, NSW, Australia
  Adobe Certified Advanced ColdFusion Developer
  AFP Webworks
  http://afpwebworks.com
  ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month
 
 
 
 
  ***
  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] advice on background images?

2010-11-26 Thread Jon @ The PixelForge
Again, I'm not sure if this deserves place in WSG, but to give you some
direction:

Photoshop has an Offset filter. Combined with the clone tool you can usually
generate repeating images relatively quickly. Quality depends on a lot of
factors though.

I would recommend you try somewhere like cgtalk.com (or email me directly)
for better instructions.

Regards,

Jon Warner
Tel: 0788 99 424 30
http://thepixelforge.net/

57 Arnold Road
Eastleigh
Hampshire
SO50 5AR
England


On Fri, Nov 26, 2010 at 10:07 PM, Kepler Gelotte 
kep...@neighborwebmaster.com wrote:

  Any tips on how to minimize or eliminate how obvious it is where the
  tiles meet when you have the background image repeat?

 I'm not sure what this has to do with web standards, but you can check out

 http://tutorialblog.org/make-repeating-seamless-tile-backgrounds-with-photos
 hop/


 Best regards,

 Kepler Gelotte
 Neighbor Webmaster, Inc.
 156 Normandy Dr., Piscataway, NJ 08854
 www.neighborwebmaster.com
 phone/fax: (732) 302-0904



 ***
 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] [att] disables element in :focus?

2010-10-10 Thread Jon @ The PixelForge
If I may ask, what kind of HTML5/CSS3 projects are you working on - or is
this the same as the rest of us, i.e. practice?

Regards,

Jon Warner


On Sun, Oct 10, 2010 at 8:36 AM, tee weblis...@gmail.com wrote:

 Hi Thierry,

 I was setting up a test page for you and during the process I found the
 problem.

 The [required] was declared twice which I didn't catch, and one with
 '!important' that I used to overwrite the background color in the input tag.

 The '!important' got me into trouble a number of times. Sigh!

 Thanks for checking!

 tee

 
 
 
  That works for me. Do you have a page we can look at?
 
 
  --
  Regards,
  Thierry
  www.tjkdesign.com | www.ez-css.org | @thierrykoblentz



 ***
 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] IE 6 Nightmares

2010-04-27 Thread Jon @ The PixelForge
To concur with Thierry, the float on #mainContent appears unnecessary
on this page. Give it a margin, or padding, to push the content off
the left bar and you should be good to go.

Regards,

Jon Warner
http://thepixelforge.net/




On Tue, Apr 27, 2010 at 11:24 PM, Thierry Koblentz
thierry.koble...@gmail.com wrote:
 I’ve been racking my brain trying to solve a CSS problem and I was hoping
 somebody here can point me in the right direction.  I’m developing a site
 that has to work in all modern browsers and IE 6.  Here is the link to a
 sample page:

 http://www.jasonbyer.com/dev/new/

 The problem that I’m having is that currently the page looks fine in IE 6
 but in Firefox the navigation doesn’t extend the entire width of the screen.


 That's because #mainContent is a float and without a width it shrinkwraps
 There are many ways to style this, but fwiw I'd not use float on that
 container, I'd make it a block formatting context (e.g.,
 overflow:hidden;zoom:1) and then go from there.
 As a side note, there is no need to use height:1% on the side bar (it is a
 float so it has a layout already)

 --
 Regards,
 Thierry
 www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






 ***
 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] Rendering mismatch in IE6 and IE7

2010-03-04 Thread Jon @ The PixelForge
In addition to other advice, you may find that starting with a blank
css sheet and adding in each instruction one by one, and seeing how
each has an effect on the content. Ok, seems obvious, but this will a)
provide you with information on how each instruction is working,
either adversely or by design b) enabling you to learn more how and
why certain bugs appear, speeding up development and debugging in
future projects and c) can provide insight to redundant instructions,
again speeding up future dev and debug time. As much of a PIA as this
may seem, it can be quite interesting, and considering you've already
written the css, it needn't take long.

Admittedly, mostly obvious and I apologise if anything appears
condescending - that is most certainly not my intent. I just think its
worth bearing in mind some good old fashioned detective work can work
wonders. In addition, to add weight to others suggestions, using
browser specific debugging tools in conjunction with this approach has
saved me time (and hair!) in the past.

Regards,

Jon Warner




On Thu, Mar 4, 2010 at 5:42 PM, David Hucklesby huckle...@gmail.com wrote:
 On 3/3/10 9:47 PM, Chakravarthy, Srikanth wrote:
 [...]

 Now is there any way I can identify what CSS properties are not
 behaving properly in IE6? Is there any way that I can make the pages
 compatible with IE6?



 Any reference link or suggestion will be of immense help.


 The first thing to realize is that IE 6 has partial support for CSS 1,
 while IE 7 introduced some support for CSS 2, particularly the extended
 selectors. You may find the Sitepoint CSS reference useful for seeing
 which selectors and properties IE 6 actually supports:

  http://reference.sitepoint.com/css

 Doubtless you have heard complaints about the colorful bugs with which
 this 8+ year old browser is so well endowed. The bugs are quite well
 documented, but tend to pop up in unexpected places. As Thierry has
 already suggested, asking a specific question about a publicly available
 page will likely provide you with better answers than mine.

 Cordially,
 David
 --


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

2010-02-23 Thread Jon @ The PixelForge
Try searching for css at'media - google'll ask if you meant css
@media and voila!

Regards,

Jon Warner
Tel: 07890 299 836
http://thepixelforge.net/

57 Arnold Road
Eastleigh
Hampshire
SO50 5AR
England



On Tue, Feb 23, 2010 at 12:52 PM, designer
desig...@gwelanmor-internet.co.uk wrote:
 Hi all,

 I have Googled @media but it is hard to get to what I want because Google
 doesn't seem to recognise the '@'.   So, please stick with me whilst I ask
 some daft questions:

 1. Is there a list showing browser support for @media?

 2.  I want to combine my ordinary CSS with my print style sheet by including
 an @media print {} declaration - does it matter where this goes in the
 stylesheet?

 3. Do you know of any links which expand on @media, generally?

 Before anyone shouts 'off-topic', may I point out that this came about
 because of the bereastreet link in the latest LFLR  from Russ ! :-)

 Thanks,

 Bob







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