[WSG] Content div sticking out the side of container div

2011-12-02 Thread Stevio
Somehow I do not seem to have come across this problem before. I have two 
divs, one contained within the other. If the viewport of the browser is 
resized to be smaller than the contents of the inner div, the inner div 
sticks out the side of the outer container div, which continues to resize 
with the browser.


Surely the outer div should stop shrinking when it reaches the width of its 
inner div, even if the viewport continues to be shrunk?


How can I fix this so that the outer div will not become any smaller than 
the width of its inner div, when the width of the inner div will be unknown?


Here is example code that illustrates this. In my example, the inner div is 
set to a fixed width, but for the web site I am developing, I will not know 
the width of the inner div.



!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
background:#99F;
border:2px solid yellow;
}
/style
/head
body
div id=wrap
Test
div id=contentstest/div
Test
/div
/body
/html


Thanks,
Stephen 




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



[WSG] Wrapping text before float drop

2011-11-03 Thread Stevio

If I have two floats side by side, both are floated left as follow:

.myfloat{
float:left;
}

and both contain text as follows:

div class=myfloatLonger amount of text. Longer amount of text. Longer 
amount of text. Longer amount of text./div

div class=myfloatSmall amount of text./div

Is there any way to prevent the second div from dropping below the first div 
when the viewport is narrowed, without specifying widths for either of the 
floats?


What I would like is for the text in the first div to wrap before the second 
float drops below the first. Is this possible without using widths?


Thanks.
Stephen 




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



Re: [WSG] Wrapping text before float drop

2011-11-03 Thread Stevio
I'm trying to avoid using widths, if possible, so the divs can adjust to the 
size of the content, but wrap text before float drop occurs.


Think of how two columns work in a table, when they have no specified width. 
They adjust to the size of the content and the available width, and wrap 
their content if the available width is reduced.


This should be easy in CSS, no?



- Original Message - 
From: Patrick H. Lauke re...@splintered.co.uk

Sent: Thursday, November 03, 2011 6:08 PM

Not tested, but I'd start with a min-width:50% (with caveat that if I 
remember right, IE6 and below doesn't support min/max widths) 




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



Re: [WSG] Wrapping text before float drop

2011-11-03 Thread Stevio

From: Hassan Schroeder has...@webtuitive.com
Sent: Thursday, November 03, 2011 7:32 PM
Think of how two columns work in a table, when they have no specified 
width. They adjust to the
size of the content and the available width, and wrap their content if 
the available width is

reduced.


Do you *need* the floats? If not, look at CSS3 flex-box.


It's not supported yet though is it by Internet Explorer?

Interestingly, setting maximum-width to a % value for the floats gives me 
what I am looking for to a certain degree.


Thanks,
Stephen 




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



Re: [WSG] Wrapping text before float drop

2011-11-03 Thread Stevio
Thanks Russ. Box-flex / flexible box does not yet appear to have much 
browser support, so that rules that out for now.


Support for CSS3 columns will arrive in IE10 according to 
http://www.findmebyip.com/litmus, but Windows XP users are stuck with IE8 
and can't even get IE9.


Your solution using CSS tables works well, I may consider that. It just 
shows though that despite all the good reasons for using CSS, it has until 
now had limitations in its ability to provide the flexibility that we 
require, and even to replace some of the things that we could do with the 
all-powerful table.


There's also a part of me that thinks using floats for column layout is not 
really the correct use of floats, just as tables was not correct, but we can 
only work with what we've got.


Thanks,
Stephen


- Original Message - 
From: Russ Weakley r...@maxdesign.com.au

To: wsg@webstandardsgroup.org
Sent: Thursday, November 03, 2011 8:21 PM
Subject: Re: [WSG] Wrapping text before float drop

Think of how two columns work in a table, when they have no specified 
width. They adjust to the size of the content and the available width, and 
wrap their content if the available width is reduced.


This should be easy in CSS, no?


The simple answer is that floats are not ideal in this situation.

There are three ways you
could solve this problem - but as Hassan mentions, they are best done 
without using float. All three solutions may present issues in older 
versions of IE. Without knowing exactly what you are trying to achieve, it 
is hard to recommend one of these solutions.


-
Option 1 - display: table, display: table-row, display: table-cell
-
http://www.w3.org/TR/CSS2/visuren.html#display-prop

For example, you could make the two containers operate like table cells. I 
am not really a fan of this approach, but it would give you the behaviour 
you are looking for.


http://maxdesign.com.au/jobs/example-stevio/table.htm

-
Option 2 - columns
-
http://dev.w3.org/csswg/css3-multicol/

-
Option 3 - Flexible Box
-
As Hassan mentioned, you could use the flexible box module as a solution
http://dev.w3.org/csswg/css3-flexbox/


Not sure if any of these help...
Russ





***
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] Correct behaviour of fieldset?

2011-11-01 Thread Stevio

Thanks Russ for the detailed reply and examples.

One thing that I did not make clear in my original email is that the reason 
why the width of the select list within the form may have a width greater 
than 30em, is because of the content of the select list (the text).


The values listed in the select list will be drawn from a database and 
therefore the width of the select field is determined by the text within 
that field. The behaviour I want is that the form will have a set width that 
would expand if the width of the select fields is wider than the default 
width of the form.


However, I tried applying a width to the select fields using CSS (I had not 
thought of that) and discovered another browser inconsistency:-
- If the width of the text within the select list is greater than the 
specified width of the select list, then when you click on the list to make 
it appear, the width of the drop down list will expand to fit the width of 
the items within the list.
- The exception to this is IE (I'm using IE8) which displays the dropdown 
list at the specified width.
- Chrome, Opera and Firefox all expand the width of a select list when it is 
displayed. This would be a great solution except that IE8 acts differently!


Regarding my original question about the expanding fieldset width, basically 
you are saying IE and Opera have it right?


Regarding my bigger issue of having a form that expands as necessary, I have 
found that using the following styles for the form seems to work:

min-width: 35em;
display:inline-block;

Is this the best solution?
Thanks,
Stephen


- Original Message - 
From: Russ Weakley r...@maxdesign.com.au

To: wsg@webstandardsgroup.org
Sent: Tuesday, November 01, 2011 9:05 AM
Subject: Re: [WSG] Correct behaviour of fieldset?

Hey Stevio,

There could be a range of reasons for the select element issue, so the only 
answer would be it depends.


In your case, the issue MAY be related to font-size. Browsers may render the 
font-size of the select element slightly differently. This could mean that 
the em unit applied to the select element may be smaller in some browsers, 
and therefore the select element will not poke out the side of the form.


Here is a quick online example:
http://maxdesign.com.au/jobs/example-stevio/

There are three form examples on the page. All three of these forms have 
been set to 30em wide.


The first form example has a select element with no width applied.

The second form example has a select element set to 32em. Depending on 
the font-size of the select element, this may mean it pokes out the side 
of the form element.


The third form example has a select element set to 32em AND set to 100% 
font-size. So, in all browsers EXCEPT IE6, the select element SHOULD stick 
out the side of the form in all cases. In other words, this is a 
consistent and correct behaviour. (Child elements that are wider than the 
parent element should stick outside the parent and be fully visible, unless 
some form of overflow has been applied).


The only exception is IE6, which will operate differently. IE6 will force 
the parent to wrap around the child element. In this case, the form 
element will them become 32em wide in order to accommodate the select 
element. This is not the correct behaviour, but it is a well known IE6 
behaviour  :)


HTH
Russ

On 01/11/2011, at 7:11 AM, Stevio wrote:
I have noticed that the behaviour of fieldset is inconsistent across 
browsers.


I am working on a form where I have a fieldset with a 1px border. If the 
form has a fixed width of 30em, but there is a select list within that 
form with a width greater than 30em, then the form width will not expand 
but the fieldset width *may* expand depending on which browser is being 
used.


The fieldset width expands in Firefox and Chrome, but not in IE and Opera. 
What is the correct behaviour?


Thanks,
Stephen 




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



Re: [WSG] Correct behaviour of fieldset?

2011-11-01 Thread Stevio
Thanks Todd, what I'm really looking for is a minimum width on the form, 
that expands as need be.


However, just setting a minimum-width on a form does not set the form to 
that width. The width of a form as a block level element defaults to 100%.


The solution that seems to work for the form is the following:
min-width: 35em;
display:inline-block;

I want a default width of 35em just for consistency and just how I want it 
to look. I do not want it getting smaller than that.


Stephen


- Original Message - 
From: Tedd Sperling tedd.sperl...@gmail.com

Sent: Tuesday, November 01, 2011 3:23 PM

Why have a hard-coded width?

If you are pulling the select-field text from a database, then you are 
probably using php to do it. As such, it is a simple matter to find the 
maximum length of the all the strings pulled and then set a width of the 
select fields to work. I suggest setting this value in a variable from 
within css -- I know css doesn't have variables, but that doesn't stop PHP 
from declaring one. 




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



[WSG] Correct behaviour of fieldset?

2011-10-31 Thread Stevio
I have noticed that the behaviour of fieldset is inconsistent across 
browsers.


I am working on a form where I have a fieldset with a 1px border. If the 
form has a fixed width of 30em, but there is a select list within that 
form with a width greater than 30em, then the form width will not expand but 
the fieldset width *may* expand depending on which browser is being used.


The fieldset width expands in Firefox and Chrome, but not in IE and Opera. 
What is the correct behaviour?


Thanks,
Stephen 




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



Re: [WSG] Modal forms - what to call them?

2011-07-21 Thread Stevio
- Original Message - 
From: Patrick Horgan phorg...@gmail.com

Sent: Thursday, July 21, 2011 9:05 AM

On 07/20/2011 09:43 AM, Stevio wrote:

Take Facebook's current implementation of photos for example. A while
back they introduced a modal viewing box for images. However, if you
click F5 to refresh Firefox, you go back to the old style viewing of
the image in it's own page. Often I do this because I prefer it, other
times I persist with their viewing box.

That's a really bad example, since that feature is user hostile, the F5
doesn't work in all browsers, and the same capabilities aren't available
in both modes, for example with the popup much of the page is blocked
and you can't click on links like home, and sometimes after browsing
with the popup you get back where you were, and sometimes you don't.
Please don't use it as an example.  It makes you really wonder what
problem they were trying to solve, and you should ask yourself the
same.  (Really page designers should always ask themselves that.  It
avoids doing something because it's a cool feature you learned about,
but that makes things worse for users.)


To the contrary, I think you strengthen my argument by highlighting the 
differences. There are advantages to both the modal and non-modal facebook 
implementation of images, and different users may prefer one over the other, 
which is the point I was trying to make. It is not a perfect illustration of 
what I am looking to do and I did not claim it was, so please do not over 
examine the comparison.


If a user choice is clear and makes sense, and is not confusing, then why 
not give them that choice? My original intention was not to offer both 
choices but I have come to realise as I have developed the system, that if 
both options are implemented, then why not allow users to choose. They may 
prefer to be working on a page that is non-modal and they can click on links 
like home and have more workspace, or they may prefer to use a modal form to 
quickly add a record. Let's not write off an idea just because it isn't the 
way it's normally done.


Thank you for your thoughts. 




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



[WSG] Modal forms - what to call them?

2011-07-20 Thread Stevio
I am working on a CMS and within it, when a user wishes to add a record, I 
give them two options:

1) Add record - this goes to a new web page with a form.
2) Add record modally - this brings up a modal dialog box containing the 
form which allows them to add the record without leaving the page they were 
on (this page lists the current records). This uses jQuery. Once they add 
the record, the list of records is updated using AJAX.


However, what user-friendly descriptive name should I use for the modal 
forms? I doubt many people know the word modal. Any suggestions?


It would be laid out as follows:
Add record (pop-up dialog box)?

Clicking on 'Add record' takes the user to a new page, while clicking on 
'pop-up dialog box' opens the modal form.


However, I would like something shorter and simpler than 'pop-up dialog 
box'. Any thoughts?


Thanks,
Stephen 




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



Re: [WSG] Modal forms - what to call them?

2011-07-20 Thread Stevio
User choice basically. They may prefer to see more of a form in its own 
page, or they may prefer to use a modal form to add the record.


If JavaScript is disabled, the system still works fine with the non-modal 
form option.


Take Facebook's current implementation of photos for example. A while back 
they introduced a modal viewing box for images. However, if you click F5 to 
refresh Firefox, you go back to the old style viewing of the image in it's 
own page. Often I do this because I prefer it, other times I persist with 
their viewing box.


As for a user-friendly name for the modal link, so far I've come up with 
coolbox, float, or using an icon with an arrow.


Any better suggestions?

Thanks,
Stephen


- Original Message - 
From: Hassan Schroeder has...@webtuitive.com

To: wsg@webstandardsgroup.org
Sent: Wednesday, July 20, 2011 5:18 PM
Subject: Re: [WSG] Modal forms - what to call them?



On 7/20/11 8:45 AM, Stevio wrote:
I am working on a CMS and within it, when a user wishes to add a record, 
I give them two options:

1) Add record - this goes to a new web page with a form.
2) Add record modally - this brings up a modal dialog box containing the 
form which allows them
to add the record without leaving the page they were on (this page lists 
the current records).
This uses jQuery. Once they add the record, the list of records is 
updated using AJAX.


However, I would like something shorter and simpler than 'pop-up dialog 
box'. Any thoughts?


Just curious -- why offer a choice?

Why not just offer the modal version if JS is enabled and the other
if not?

What is the user benefit of the non-modal option? And is it enough
to justify introducing an extraneous decision into the workflow?

Will the target user understand the implications of the choices and
pick one unhesitatingly? Or think eh? what?  :-)

Just askin' ... 




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



Re: [WSG] Modal forms - what to call them?

2011-07-20 Thread Stevio
Hi Jason, I was just using that as an example, that users may prefer one way 
over the other, and so I wish to offer them a choice. It would be nice if 
Facebook offered the choice!

See my original email - it needs a name because the word modal is not one that 
I think users would be familiar with. I need something to differentiate between 
opening the form in a separate page and in a modal form, preferably something 
short and to the point.

Thanks,
Stephen
  - Original Message - 
  From: Jason Grant 
  To: wsg@webstandardsgroup.org 
  Sent: Wednesday, July 20, 2011 5:49 PM
  Subject: Re: [WSG] Modal forms - what to call them?


  Stephen,

  I think we are talking about different context with regards to Facebook 
example. 


  You don't really get side by side options on Facebook to open in separate 
page or open in modal window. 

  Why does this thing need to have a 'name' anyway? 


  Cheers,

  Jason 


  On Wed, Jul 20, 2011 at 5:43 PM, Stevio redea...@freeuk.com wrote:

User choice basically. They may prefer to see more of a form in its own 
page, or they may prefer to use a modal form to add the record.

If JavaScript is disabled, the system still works fine with the non-modal 
form option.

Take Facebook's current implementation of photos for example. A while back 
they introduced a modal viewing box for images. However, if you click F5 to 
refresh Firefox, you go back to the old style viewing of the image in it's own 
page. Often I do this because I prefer it, other times I persist with their 
viewing box.

As for a user-friendly name for the modal link, so far I've come up with 
coolbox, float, or using an icon with an arrow.

Any better suggestions?

Thanks,
Stephen


- Original Message - From: Hassan Schroeder 
has...@webtuitive.com
To: wsg@webstandardsgroup.org
Sent: Wednesday, July 20, 2011 5:18 PM
Subject: Re: [WSG] Modal forms - what to call them?




  On 7/20/11 8:45 AM, Stevio wrote:

I am working on a CMS and within it, when a user wishes to add a 
record, I give them two options:
1) Add record - this goes to a new web page with a form.
2) Add record modally - this brings up a modal dialog box containing 
the form which allows them
to add the record without leaving the page they were on (this page 
lists the current records).
This uses jQuery. Once they add the record, the list of records is 
updated using AJAX.



However, I would like something shorter and simpler than 'pop-up dialog 
box'. Any thoughts?


  Just curious -- why offer a choice?

  Why not just offer the modal version if JS is enabled and the other
  if not?

  What is the user benefit of the non-modal option? And is it enough
  to justify introducing an extraneous decision into the workflow?

  Will the target user understand the implications of the choices and
  pick one unhesitatingly? Or think eh? what?  :-)

  Just askin' ... 





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





  -- 
  Jason Grant BSc [Hons], MSc [Hons]
  Customer Experience Architect
  Flexewebs Ltd. 

  www.flexewebs.com 
  ja...@flexewebs.com 
  +44 (0)7748 591 770

  www.flexewebs.com/semantix
  www.twitter.com/flexewebs 
  www.linkedin.com/in/flexewebs



  ***
  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] Shadow web sites (was Title tags - site name then keywords?)

2011-04-22 Thread Stevio
Thanks for all the good advice, I appreciate that. Hopefully it is not going 
too far off topic if I ask one more SEO related question.


What do you think of shadow web sites? This is something that has been 
offered to this customer by a major company.


These shadow sites use a generic domain name, containing the customer's key 
words, and when someone clicks on it, it brings up the shadow web site which 
contains details of all the services the company offers. If they go to the 
bottom of the page, there is a link to the company's main web site.


To quote from what they say now as you can see we just mirror your main 
site so they look the same and people know it's the same company, this gives 
you more exposure, more shop windows and helps with the SEO.


I have already recommended against this as this is a practice specifically 
mentioned in the Google Webmaster Guidelines as something that should be 
avoided, and which could therefore harm your chances of being found in 
Google searches. Other search engines have also in the past specified that 
this practice is not recommended.


You can see this in the following page from Google - 
http://www.google.com/support/webmasters/bin/answer.py?answer=35769

It says near the bottom under Quality guidelines - specific guidelines:
Don't create multiple pages, subdomains, or domains with substantially 
duplicate content.


I'd still be interested in your thoughts on this practice.

Regards,
Stephen


- Original Message - 
From: Stuart Foulstone stu...@bigeasyweb.co.uk

To: wsg@webstandardsgroup.org
Sent: Thursday, April 21, 2011 1:37 PM
Subject: Re: [WSG] Title tags - site name then keywords?


Hi,

Search engines are blind readers - design for accessibility.

Each page on the Website should be on a specific topic (except,
perhaps,for the Homepage).  Put the topic first in the title tag, so that
it is easily identifiable from the other pages.

The top header in the page content should also relate to the topic.

The keywords you wish to obtain search engine results for, for any
particular page, are presumably the page topic.


Stuart


On Tue, April 19, 2011 8:30 pm, Stevio wrote:

When it comes to search engine optimisation, are you better to list the
site
name/business name first in the title tag, and then keywords, or the 
other

way round?

e.g. ABC Engineering Ltd - Steel Fabrication, Pipework, Welding
or
Steel Fabrication, Pipework, Welding - ABC Engineering Ltd

Are you likely to do better in search engines with the keywords first in
the
title tag?

Thanks,
Stephen 




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



Re: [WSG] Shadow web sites

2011-04-22 Thread Stevio
Thanks Josh, that all sounds good. Just one question though - why do you say 
to avoid reciprocal links?



- Original Message - 
From: Josh j...@viteb.com

Sent: Friday, April 22, 2011 2:06 PM


I am josh and working as an online marketing manager having 5+ years of
experience in this industry. Based on my experience what I recommend is;
create shadow (we called supporting or satellite websites) if and only if
you are having time and budget to work on those websites too. Let me 
explain

in details...

Those support website with duplicate or mirror content same as main 
website

will never work. Previously this practice was popular because Google was
giving some weight to domain name and people were building different 
website

for different keywords with unique content to improve the rankings for
specific domain specific keywords. But Google have stopped Giving weight 
to

domain name !! see this: http://www.youtube.com/watch?v=rAWFv43qubI

Here are few important suggestion for optimizing your website:

- Buy domain having business related or short name that is easy to 
remember

- target most relevant keywords (1-3 phrase) having least competition
initially and once you achieve those rankings move to highly competitive
keywords.
- never hide content or use any black hat methods (create website for 
users

not for search engines)
- Write fresh and unique content and use keyword density upto 5-6 %
- Generate backlinks (only quality links and relevant theme).
- avoid buying links from link farm or directories
- Avoid submitting your website in thousands of directories (they are
useless as search engine knows and devalued those links)
- Avoid reciprocal links

Apart from this, there are hundreds of factors that really affect the 
search

engine rankings.

I am sure this will help,

Josh 




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



[WSG] Title tags - site name then keywords?

2011-04-19 Thread Stevio

When it comes to search engine optimisation, are you better to list the site
name/business name first in the title tag, and then keywords, or the other
way round?

e.g. ABC Engineering Ltd - Steel Fabrication, Pipework, Welding
or
Steel Fabrication, Pipework, Welding - ABC Engineering Ltd

Are you likely to do better in search engines with the keywords first in the
title tag?

Thanks,
Stephen



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



[WSG] Overflow hidden and floated divs

2010-07-15 Thread Stevio
I have a row of floated list items inside a container with height 1.2em, 
which is inside a parent div with a background colour.


e.g. something like this (not the actual HTML of course ;) -
div with background colour
 ul with height 1.2em
   li floated/li
   li floated/li
   li floated/li
 /ul
/div

If the floated list items were too wide, the rightmost list item jumped down 
beneath, but the container did not expand so it looked bad.


However, if I add overflow:hidden; to the parent div, then the rightmost 
list item still jumps down, but now the box expands down the way, so it 
looks a lot better.


My question is why does it do this? I have looked up what overflow hidden is 
meant to do and from what I read it sounds like the content should just get 
clipped at the right hand side and not be shown. Why is it causing the box 
to expand down the way?


Thanks.

Here is the CSS:

#navigationbar {
background-color:#DEDEDE;
overflow:hidden;
}
#navigationbar ul {
padding: 0.2em 0 0.2em 0;
margin: 0px;
list-style: none;
height:1.2em;
}
#navigationbar ul li {
padding: 0;
margin: 0;
display: block;
float: left;
} 




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



[WSG] Re: More than one H1?

2009-10-16 Thread Stevio
Hey all,
Am I the only one who is getting these messages directly sent to their deleted 
items? Please can you take the out of office bit out of the subject lines? I 
am sure there are others like me who have filters set up to automatically 
delete out of office messages. 

It's also a bit ironic that a subject about headings was started with the 
subject line Re: [WSG] Out of Office AutoReply: WSG Digest lol!

My own view is that a logo should not be wrapped in an H1 tag under normal 
circumstances. A logo is an image not a descriptive heading.

If you want to have more than H1 tag then as others have said, there is nothing 
in the spec against it so go for it. If you are sure that Google will penalise 
you for it however, then just avoid it. Use an H2 tag for the second heading, 
even if you style it the same.
Stephen

  - Original Message - 
  From: Yuval Ararat 
  To: wsg@webstandardsgroup.org 
  Sent: Friday, October 16, 2009 1:10 PM
  Subject: Re: More than one H1? (was [WSG] Out of Office AutoReply: WSG Digest)


  I am not sure that a page with multiple important subject does not exist. so 
IA wise and semantic wise this is not a must. google wise it is.


  On Fri, Oct 16, 2009 at 10:55 PM, Jason Grant ja...@flexewebs.com wrote:

Tim, 

Well done for reading the spec - it's always a must. 


However, Google came after the HTML4.01 spec and what Google wants we give 
it - so the 'only one H1 per page' guideline comes from SEO best practices as 
well as general semantics and IA best practices. 


So the spec does not tell you to use one H1 per page, but the spec is not 
the be all and end all of guidelines.


Thanks,

Jason 



On Fri, Oct 16, 2009 at 12:32 PM, Tim White tjameswh...@gmail.com wrote:

  On Fri, Oct 16, 2009 at 4:23 AM, Marilyn Langfeld 
m...@langfeldesigns.com wrote:

...

H1 is reserved for the title of the page. In a document, at least, 
there's only one title, while there may be many first level headings.
...

So H1 is, IMHO, not the first level header, but the T1, or main title 
of the page. A logo is never, IMHO again, the title of the page.



  Let's look at what the specification says; 


  A heading element briefly describes the topic of the section it 
introduces. Heading information may be used by user agents, for example, to 
construct a table of contents for a document automatically.
  There are six levels of headings in HTML with H1 as the most important 
and H6 as the least. Visual browsers usually render more important headings in 
larger fonts than less important ones.

  http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

  Nowhere does it say that H1s are for page titles or that there can be 
only 1 per page. In fact, the example shows two being used.

  ~ Tim


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


[WSG] Right div dropping below left floated div when browser resized

2009-06-30 Thread Stevio
I have two divs as follows (no link sorry, web page is protected) - a left 
div for navigation, a right div containing a header and table (with tabular 
data).


The problem is that when the browser window is reduced in size, to the point 
that the table can no longer shrink to fit inside the available space, the 
table (but not the whole right div) drops down so that the top of the table 
is in line with the bottom of the left navigation div. This problem occurs 
in IE6 but not IE7 or Firefox.


Any ideas how I can fix this so the table just stays in place like it should 
when the horizontal scrollbar appears?


Code is below. Thanks.


div id=navigation
--content--
/div

div id=mainbody
h2My List/h2
div
table class=TableList
--table content--
/table
/div

CSS is:
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 9px;
padding-left: 1px;
padding-right: 1px;
background: #FF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
margin-left: 210px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
border: 0px solid black;
} 




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



Re: [WSG] Right div dropping below left floated div when browser resized

2009-06-30 Thread Stevio
Thanks Joseph, but I don't know the width however. The right width column 
varies according to the width of the browser and it's content.

Stephen

  - Original Message - 
  From: Joseph Taylor 
  To: wsg@webstandardsgroup.org 
  Sent: Tuesday, June 30, 2009 10:00 PM
  Subject: Re: [WSG] Right div dropping below left floated div when browser 
resized


  IE6 will drop your content down to a place where it'll fit.

  You need to do something like this:

  my_container {
min-width: XXpx;
_width: XXpx; /* just for IE6 */
   }

  IE6 needs specified width and then it'll behave like it was given a min-width.

  Joseph R. B. Taylor
  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 6/30/09 4:42 PM, Stevio wrote: 
I have two divs as follows (no link sorry, web page is protected) - a left 
div for navigation, a right div containing a header and table (with tabular 
data). 

The problem is that when the browser window is reduced in size, to the 
point that the table can no longer shrink to fit inside the available space, 
the table (but not the whole right div) drops down so that the top of the table 
is in line with the bottom of the left navigation div. This problem occurs in 
IE6 but not IE7 or Firefox. 

Any ideas how I can fix this so the table just stays in place like it 
should when the horizontal scrollbar appears? 

Code is below. Thanks. 
 

div id=navigation 
--content-- 
/div 

div id=mainbody 
h2My List/h2 
div 
table class=TableList 
--table content-- 
/table 
/div 

CSS is: 
#navigation { 
float: left; 
width: 180px; 
margin-top: 20px; 
margin-bottom: 10px; 
margin-left: 9px; 
margin-right: 9px; 
padding-left: 1px; 
padding-right: 1px; 
background: #FF; 
border-top: 2px solid #336699; 
border-bottom: 2px solid #336699; 
} 
#mainbody { 
margin-left: 210px; 
margin-top: 20px; 
margin-bottom: 20px; 
margin-right: 20px; 
border: 0px solid black; 
} 


*** 
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] Expand width of container to fit content's width?

2009-06-26 Thread Stevio

Is it possible to expand a container's width to fit its content?

For example, if I have a page where the content is wider than the width 
available at the browser's current size, which means the horizontal 
scrollbar appear, I want the container to expand to fit the width of the 
content instead of having the content sticking out the side (because that 
makes the design of the page look poor when the user scrolls horizontally).


Thanks,
Stephen 




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



Re: [WSG] Box model in IE7

2009-04-24 Thread Stevio

I am using the following doctype:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;


Correct me if I'm wrong but this switches on standards-compliant mode 
doesn't it?


I'll maybe need to strip down my web page to try and work out what's going 
on. To be honest though it doesn't affect the web site, I am just curious as 
to the slightly different gaps in IE7 from Firefox.


Stephen


- Original Message - 
From: Rimantas Liubertas riman...@gmail.com

To: wsg@webstandardsgroup.org
Sent: Friday, April 24, 2009 3:08 PM
Subject: Re: [WSG] Box model in IE7


Getting back on subject, I do not think the box model has been fixed in 
IE7,
but I do not know for sure. You might try adding margin for separation 
with

containing div tags in browsers.


Once again: box model was fixed in IE6, given your page has proper doctype 
(and

nothing above it).
http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3

Regards,
Rimantas 




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



Re: [WSG] Box model in IE7

2009-04-23 Thread Stevio
Is there a problem with the DocType I'm using?
Thanks,
Stephen

  - Original Message - 
  From: Stevio 
  To: wsg@webstandardsgroup.org 
  Sent: Thursday, April 23, 2009 1:30 AM
  Subject: Re: [WSG] Box model in IE7


  !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;

- Original Message - 
From: Luke Hoggett 
Sent: Thursday, April 23, 2009 12:45 AM

HI,

What doctype are you using?

cheers
Luke

Stevio wrote: 
  Is the box model in IE7 still messed up? I thought they sorted it? 

  I am floating a div to the right with a width of 50%. The div to the left 
has a right margin of 50%. I've put a 1px solid border on both of them. In IE7 
there is a gap between them but in Firefox they are right against each other. 

  Go figure?

  ***
  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] Box model in IE7

2009-04-22 Thread Stevio

Is the box model in IE7 still messed up? I thought they sorted it?

I am floating a div to the right with a width of 50%. The div to the left 
has a right margin of 50%. I've put a 1px solid border on both of them. In 
IE7 there is a gap between them but in Firefox they are right against each 
other.


Go figure? 




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



Re: [WSG] Box model in IE7

2009-04-22 Thread Stevio
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;

  - Original Message - 
  From: Luke Hoggett 
  Sent: Thursday, April 23, 2009 12:45 AM

  HI,

  What doctype are you using?

  cheers
  Luke

  Stevio wrote: 
Is the box model in IE7 still messed up? I thought they sorted it? 

I am floating a div to the right with a width of 50%. The div to the left 
has a right margin of 50%. I've put a 1px solid border on both of them. In IE7 
there is a gap between them but in Firefox they are right against each other. 

Go figure?

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


[WSG] Borders in liquid layouts

2009-04-17 Thread Stevio
I have created a web site design, with a graphical border down the sides of 
the design (15px wide on each side).


To implement this using CSS would be quite simple if the design had a fixed 
width, but I am looking to implement a liquid layout.


Essentially I reckon it comes down to equal height columns in liquid 
layouts. Any suggestions on how to best accomplish this?


Thanks.
Stephen




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



Re: [WSG] web developer toolbar for IE!!!!

2005-12-27 Thread Stevio

Any good? Is the better version reliable enough?

- Original Message - 
From: sam sherlock [EMAIL PROTECTED]

Sent: Tuesday, December 27, 2005 4:00 AM


I have just installed the web developer tool bar for internet explorer

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038displaylang=en 


**
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] Variable background image size

2005-12-16 Thread Stevio
I am trying to have a left column with a different colour that resizes when 
the font size is resized.


I saw this technique a while ago but I can't remember exactly how it works - 
where basically you have a background image that is larger than what your 
window will ever be usually, and you use background-position and ems (and/or 
percentages) to position the background column.


When the font size is resized, the column will resize accordingly because of 
the background positioning setting.


Is anyone familiar with this technique and can they remind me how it works?

Thanks,
Stephen 


**
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] Default display property of a TR

2005-09-23 Thread Stevio

What is the default 'display' property of a TR element?

Is there somewhere you can look this sort of thing up?

Thanks,
Stephen


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.11.5/110 - Release Date: 22/09/2005

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

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



[WSG] OT: Good Flash development mailing lists/forums

2005-09-15 Thread Stevio
Does anyone know of any good, active and busy, Macromedia Flash development 
mailing lists or forums?


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.11.0/103 - Release Date: 15/09/2005

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

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



[WSG] Linearization

2005-09-07 Thread Stevio
I am interesting in your thoughts on linearization. What it means and how 
you apply it? 


Thanks,
Stephen


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.19/92 - Release Date: 07/09/2005

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

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



Re: [WSG] Tables and divs and soon

2005-09-07 Thread Stevio
- Original Message - 
From: Bert Doorn [EMAIL PROTECTED]

Sent: Wednesday, September 07, 2005 9:09 AM
Keep reading... 
http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#layouttables-avoid


It is *recommended* that authors not use the |table| element for layout 
purposes *unless the desired effect absolutely cannot be achieved using 
CSS*.


Perhaps this is the crux of the matter. Most things can be achieved with 
CSS, especially if you use various hacks and scripts etc. However, at what 
point do we say, we are better doing this layout in tables rather than using 
complex CSS with various hacks? In terms of future maintenance, the CSS 
solution will be more difficult due to the complexity of the hacks and 
scripts.


I like this list in that people are so willing to debate the issues, as that 
is how we learn and understand what is best, but I think we should not 
blindly use CSS. We must use it wisely and examine how we are using it so we 
don't make new mistakes.


Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.19/92 - Release Date: 07/09/2005

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

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



Re: [WSG] Expanding height of left column to fill space

2005-09-06 Thread Stevio
I like Bert :-) He talks sense. And before you say it the other people also 
made very good points which I appreciate. A lot of it does seem very 
conceptual however, if you know what I mean.


Terence said, Using them for layout is a bit like making up everything in 
p tags.   Does anyone agree that we are abusing the use of CSS (square 
pegs in round holes?) with the way we force it to do things that it perhaps 
was not really designed for? Are floats really meant to be used for column 
design? If they are then why are there oodles of pages on the net about 
getting them to work right. We never had this problem with tables ;-)


I disagree with the point about revisiting the design just because CSS is 
not up to the job. The web is a visual medium and we should be able to 
design pages to look how we want, with the condition of making sure they are 
readable and suitable for those accessing them.


For those of you who use a background image, how do you get round the 
problem of the columns changing size? I hope you are not using a fixed width 
layout (as many CSS column layouts do)! ;-)


Regarding my point about CSS taking longer. As I say I have been using CSS 
for various sites for quite a while, but it's the time taken to find the 
right hack for the right problem, making sure you have the best hack 
possible, trying to make sure you have all angles covered etc. If anyone 
knows of an up to date article detailing the most common CSS design problems 
and the best solutions then I would love to know of it!


The whole concept of using tables for layout is flawed for a number of 
reasons. It makes assumptions about the type of device being used to 
render the page, the abilities of the person viewing it, adds unneccessary 
weight to the design, is harder to update, and directly interferes with 
the content.


Final point I want to know is, in what way does a table (a simple 1 row 2 
column table) actually cause any of the above problems you mention? How does 
it hinder someone from viewing it on a different device for example? How is 
it harder to update? I am not talking about multiple nested tables.


I remember when Java was the next great thing. How Java applets were just 
what we needed. Yet I remember thinking, well where are the real world 
examples of how these applets are useful on a web site? The main examples I 
knew of were games.


Then there was Flash. Flash has done a bit better but again, people rush to 
it and we had to suffer the period of Flash intro pages! Nice to look at ... 
once... but ultimately pointless. When you go to a web site you want 
information usually, not entertainment. Flash has now found it's right place 
as an aid to the visual appeal of web pages, or other uses, but is not so 
abused now.


CSS is very different from both Java and Flash, but we need to keep things 
real and not go overboard. Why is it we use floats for layout when you could 
argue relative positioning is how it should be done? Are we using floats for 
the wrong purpose?


Thanks,
Stephen

- Original Message - 
From: Bert Doorn [EMAIL PROTECTED]

To: wsg@webstandardsgroup.org
Sent: Tuesday, September 06, 2005 5:56 AM
Subject: Re: [WSG] Expanding height of left column to fill space



G'day again


Once upon a time it was NN4, now it's IE6, and tomorrow who knows? And
that's the point of designing to web standards. As for what the client
wants, I say it's two of: good, fast, cheap.


Yep.  And some of those have difficulty with non table based layouts :-)


However, I doubt very much that the big driver is the visual design Bert,
and I doubt most people visiting or commissioning a web site give two
hoots as to how its built.
The vast majority of my clients don't care whether I use a table or divs 
(and would not even know the difference).  But they do often want a 
particular layout and all except a few do look at it with a graphical 
browser.

For the record, the people paying my bills *do* want standards based
design - I'm working in e-govt - and they want content that is usable by
people, and *easily* manipulated by machines.

Standards based (good) does not rule out using the occasional table for 
layout if it's the quickest way to get something out there (fast and 
cheap).

(e-govt  - is that the real world?  LOL)


If a 2 column CSS layout with a band of color down one side is difficult
to implement with todays technology, shouldn't we instead look for designs
that work with the technology we are using?

If it's your own site and you are happy to have a different layout, sure. 
Or if you can convince the client that your way is better.  But if the 
client wants a particular look, We should give them what they want.  If 
that means using a *single* table to get two columns of equal length and 
with different background colors, I will use the table.



setting a background on one or two div's *still* uses less code than the
equivalent markup for tables.

Show me an example?*  *Take into 

Re: [WSG] Expanding height of left column to fill space

2005-09-06 Thread Stevio

Dwain wrote:

Stevio wrote:
I disagree with the point about revisiting the design just because CSS is 
not up to the job. The web is a visual medium and we should be able to 
design pages to look how we want, with the condition of making sure they 
are readable and suitable for those accessing them.


i found this to be an interesting article:
http://www.westciv.com/style_master/house/good_oil/dao/index.html


Interesting yes. But two points. One is that it assumes the user knows how 
to change their font size. I suspect many do not. The default layout has to 
be the best one, as over 90% of the time that is what will be viewed and it 
will not be changed by the user.


Secondly, their web site uses a fixed width layout that does not fit when 
the browser window is 800px wide.


Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/90 - Release Date: 05/09/2005

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

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



Re: [WSG] Expanding height of left column to fill space

2005-09-06 Thread Stevio


- Original Message - 
From: Kenny Graham

To: wsg@webstandardsgroup.org
Sent: Tuesday, September 06, 2005 12:36 PM
Subject: Re: [WSG] Expanding height of left column to fill space



Does anyone agree that we are abusing the use of CSS (square
pegs in round holes?) with the way we force it to do things that it 
perhaps

was not really designed for?


Maybe to an extent, but not nearly as much as using tables for layout is 
abusing tables.  They were never meant to be used as layout, or even for 
presentation.  They were created for tabular data.  At least in CSS, we're 
abusing a presentational language for presentational purposes.



The web is a visual medium and we should be able to
design pages to look how we want, with the condition of making sure they 
are

readable and suitable for those accessing them.


I disagree.  The web is an information medium.  The most common way to 
access that information is through a graphical web browser.  A visual 
medium used to browse the information made available on the web 
(information medium).  I rarely use a traditional, graphical web browser 
anymore.  I have my computer read my RSS feeds and email aloud to me while I 
work and play games.  I test pages I make in graphical browsers, and post 
flamebait as anonymous coward on Slashdot.  That's about it.



For those of you who use a background image, how do you get round the
problem of the columns changing size? I hope you are not using a fixed 
width

layout (as many CSS column layouts do)! ;-)


*clicks my heels together three times and says Column support in CSS3? 
Column support in CSS3?*



Final point I want to know is, in what way does a table (a simple 1 row 2
column table) actually cause any of the above problems you mention? How 
does
it hinder someone from viewing it on a different device for example? How 
is

it harder to update? I am not talking about multiple nested tables.


Accessibility isn't just for blind people.  It's also for the most disabled 
users of all: computers.  Ever try to teach an HTML parsing script how to 
tell the difference between a table of data and a layout table?  If people 
would just use semantic markup, it'd be as simple as It's in a table 
element?  Must be tabular data.  It's in a p element?  Must be a paragraph. 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/90 - Release Date: 05/09/2005

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

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



Re: [WSG] Expanding height of left column to fill space

2005-09-06 Thread Stevio




  - Original Message - 
  From: 
  Kenny 
  Graham 
  Sent: Tuesday, September 06, 2005 12:36 
  PM
  
   The web is a visual medium and we should be able 
  to design pages to look how we want, with the condition of making sure 
  they are readable and suitable for those accessing them.I 
  disagree. The web is an information medium. The most common way to 
  access that information is through a graphical "web browser". A visual 
  medium used to "browse" the information made available on the web (information 
  medium).
Good description, I concede 
the point.

  I rarely use a traditional, graphical web browser 
  anymore. I have my computer read my RSS feeds and email aloud to me 
  while I work and play games. I test pages I make in graphical browsers, 
  and post flamebait as anonymous coward on Slashdot. That's about 
it.
I suggest you are in the 
minority in your use of the web. Most people will use web browsers.

   For those of you who use a background image, how do 
  you get round the problem of the columns changing size? I hope you are 
  not using a fixed width layout (as many CSS column layouts do)! 
  ;-)*clicks my heels together three times and says "Column support in 
  CSS3? Column support in CSS3?"*
Lol. In which case the use of 
tables is perhaps still justified?

   Final point I want to know is, in what way does a 
  table (a simple 1 row 2 column table) actually cause any of the above 
  problems you mention? How does it hinder someone from viewing it on a 
  different device for example? How is it harder to update? I am not 
  talking about multiple nested tables.Accessibility isn't just for 
  blind people. It's also for the most disabled users of all: 
  computers. Ever try to teach an HTML parsing script how to tell the 
  difference between a table of data and a layout table? If people would 
  just use semantic markup, it'd be as simple as "It's in a table element? 
  Must be tabular data. It's in a p element? Must be a 
  paragraph."
The point is however, that 
when you create columns, with equal length, you are in essence creating a table 
grid type layout for your information. Therefore the use of tables with their 
columns makes sense, even appropriate?
When you create columns using 
CSS, you are creating a table-like look, are you not? Is CSS3 going to reinvent 
the wheel?
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/90 - Release Date: 05/09/2005


[WSG] Expanding height of left column to fill space

2005-09-05 Thread Stevio
What is the best way to expand a left floated navigation column to fill up 
the height of the available space? This column has a different colour, but 
the right column will usually be bigger.


Is the best way still to use background image, or does anyone have a better 
way of doing it?


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/90 - Release Date: 05/09/2005

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

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



Re: [WSG] Expanding height of left column to fill space

2005-09-05 Thread Stevio

From: Vicki Berry [EMAIL PROTECTED]
Stevio wrote:

What is the best way to expand a left floated navigation column to
fill up the height of the available space?


I really like this script from Project Seven, which also keeps the footer
at the bottom of the viewport:

http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

Like all PVII offerings, it works in all modern browsers.


Sometimes I think that somewhere along the way, things have become back to
front.

Let me offer a few quotes from the article Vicki gave the link for:

If you create a 2-column table, and color one column red, and the other
blue, both columns will extend the full table height - regardless of the
content in either column. - a common design requirement.

To Hack or to Script, that is the question - in reference to using CSS for 
columns.


If you want to lay out your page without tables and still have equal-height
columns, then you can use CSS hacks or Javascript.

The article gives some arguments against using tables (usual one of 
separating structure from presentation), when logic would suggest from the 
above quotes that using tables would make a lot of sense. Can someone give 
me a good real life example however, of when using a simple 2 column table 
with 1 row would actually cause anyone any problems?


What is wrong with using a simple 1 row 2 column table to layout a web page
when using DIVs and CSS requires hacks and JavaScript to work in the way
required?

Why is using CSS in this case the better of two evils? Surely we are abusing 
CSS in just the same way we are abusing tables?


Please remind me as I find myself wasting so much time with CSS design hacks 
when table design is so much quicker. I have been doing CSS and XHTML for a 
while too before you ask! I'm sure other people constantly have to look 
about to find the right hack for the particular problem they are facing.


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/90 - Release Date: 05/09/2005

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

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



[WSG] Submenus anyone?

2005-09-02 Thread Stevio
Has anyone got any good examples of submenus that work good and are 
compliant with XHTML 1.0 strict?


I've been using Project 7 menus but I'm finding they are just too difficult 
to sort out all the kinks, plus there has always been the problem that if 
you move the mouse fast enough they don't always close.


I figure there must be better working menus than that. I usually have my 
links change background and foreground colour, so would like that, but would 
like the link to stay changed colours while the mouse is hovering over the 
submenu that has appeared, and then to go back to normal when I mouse off 
the submenu and it vanishes.


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.18/89 - Release Date: 02/09/2005

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

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



[WSG] Two column left navigation

2005-08-30 Thread Stevio
I have a web site with a left navigation system consisting of images and 
text in 2 columns.

The image is displayed on the left, with the text link to the right of it.

At the moment this is displayed using a table. What would be the best way to 
display this without using tables, i.e. with a couple of divs for each image 
and text pair?


The width of the container is fixed (at 220px), and the size of the left 
images is 100px.


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.17/84 - Release Date: 29/08/2005

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

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



[WSG] Designing for printing

2005-08-30 Thread Stevio

How far do you go with designing for printing? I usually make sure my pages
print ok on A4 (210mm by 297mm). For the web site I'm currently working on,
I will make some adjustments using a print stylesheet to ensure this works
ok.

My web site is basically a two column design with the navigation column
floated to the left.

However, if the user decides to print onto A5, which is only 148 x 210mm,
then the right side main content div will jump down below the left hand
float because of the width (it includes images), and the print out will look
really strange. Should I be trying to accommodate A5 printouts, or smaller
printouts than the norm, and if so in what way?

Stephen



--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.17/84 - Release Date: 29/08/2005

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

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



Re: [WSG] Two column left navigation

2005-08-30 Thread Stevio



Hi Kenny,

That almost works, except the text of my links is 
more than one line long and wraps onto the next line. When it wraps, the 2nd 
line wraps underneath the image for some reason. Any suggestions?

Stephen


  - Original Message - 
  From: 
  Kenny 
  Graham 
  To: wsg@webstandardsgroup.org 
  Sent: Tuesday, August 30, 2005 11:39 
  AM
  Subject: Re: [WSG] Two column left 
  navigation
  http://www.kennygraham.net/projects/wsg/stevio/index.htmlhttp://www.kennygraham.net/projects/wsg/stevio/style.css 
  At the moment this is displayed using a table. What would be the best way 
  todisplay this without using tables, i.e. with a couple of divs for each 
  imageand text pair?
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.17/84 - Release Date: 29/08/2005


Re: [WSG] Does anyone still design for 640x480?

2005-08-03 Thread Stevio



For newer sites I try to make them at least good at 
800x600 but also like to make sure that things don't get messed up as they get 
smaller than that. However, if you are using CSS with a 3 col layout you have 
the problem of IE not having a correct implementation of min-width which means 
that columns can jump about below other things when you'd rather just have the 
vertical scrollbar appear. So that means messing about with finding solutions 
for that (and if you have a good simple one let me know).

People argue your site should be able to handle any 
width, but since the web does include images, there will only be so far you can 
go as your image widths and text etc will create a minimum width of some 
value.

Stephen

  - Original Message - 
  From: 
  Michael 
  Kear 
  To: wsg@webstandardsgroup.org 
  Sent: Wednesday, August 03, 2005 12:58 
  PM
  Subject: [WSG] Does anyone still design 
  for 640x480?
  
  
  Yes, I know a good design will 
  scale for any size screen (resolution if you prefer that term) but most 
  designers I know pick a minimum size and work out their designs with this as a 
  normal minimum. Any smaller sizes they just make the site work but not 
  fret if things are not perfectly aligned.
  
  For example, I usually design 
  pages that work well in screens 800x600 or larger but in smaller screens, 
  everything will be there but if lines have wrapped horribly or tabs and boxes 
  have dropped down to a new line, IÂ’m not going to worry. 
  
  Is that what you are all doing 
  nowdays? What sizes are you designing 
  for?
  
  
  Cheers
  Mike 
  Kear
  Windsor, NSW, Australia
  Macromedia Certified Advanced 
  ColdFusion Developer
  AFP Webworks Pty 
  Ltd
  http://afpwebworks.com
  Full Scale ColdFusion hosting from 
  A$15/month
  
  
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.338 / Virus Database: 267.9.9/62 - Release Date: 02/08/2005


Re: [WSG] Does anyone still design for 640x480?

2005-08-03 Thread Stevio



Don't forget however, just becausea user has 
their resolution at 800 by 600 it doesn't mean they view at that size. They 
might have the browser window smaller than the maximum screen size, or they 
could have any one of multiple sidebars that browsers allow you to display on 
the left hand size (search, history, favourites, etc).

Stephen

  - Original Message - 
  From: 
  David 
  Pietersen 
  To: wsg@webstandardsgroup.org 
  Sent: Wednesday, August 03, 2005 1:11 
  PM
  Subject: Re: [WSG] Does anyone still 
  design for 640x480?
  
  Visitors to my State Government site are almost divided exactly in half 
  between 800x600 and 1024x768, based on around 30,000 unique visits per day, 
  and we actually provide 2 versions of our sitethrough testing the res 
  before we render the HTML. 
  
  There is a growing percentage of those with 1280x1024, but it is still 
  tiny compared to the other two I mentioned. 
  
  We get a VERY small hand full at 640x480, which I suspect is two or three 
  regular visitors.
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.338 / Virus Database: 267.9.9/62 - Release Date: 02/08/2005


[WSG] 3 col layout, preventing divs jumping down when page shrunk

2005-07-21 Thread Stevio
When you have a 3 column layout, how do you prevent the middle column from 
jumping down in Internet Explorer as you shrink the width of the window?


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.336 / Virus Database: 267.9.2/54 - Release Date: 21/07/2005

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

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



[WSG] Keeping a floated item from overlapping when window resized

2005-07-05 Thread Stevio
I'm sure I've done this before, but I have a div element floated to the 
right.


When the window is resized to be smaller, how can I make sure that at some 
point the element on the right will not start to overlap the content in the 
middle, but instead the horizontal scroll bar appears?


Thanks,
Stephen 




--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.323 / Virus Database: 267.8.9/39 - Release Date: 04/07/2005

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

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



Re: [WSG] Playing a sound file - what is the best way?

2005-05-18 Thread Stevio
Does anyone have a link to an online article that shows you how to do this 
in Flash?

Thanks,
Stephen
- Original Message - 
From: Mike Foskett [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, May 17, 2005 5:14 PM
Subject: RE: [WSG] Playing a sound file - what is the best way?

I completely agree, use Flash.
I'd say the same for video too, for the same reasons.
Why:
 One solution multiple platforms.
 Saturation on all computers is over 90%. That's more than any browser.
 No platform compatibility issues Mac / PC.
 No browser issues Firefox / IE / Netscape / Opera.
With a single start / stop button in Flash, alongside a link to download the 
file. 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Playing a sound file - what is the best way?

2005-05-18 Thread Stevio
Here is the code I am using at the moment. Please let me know what browsers 
and platforms would have a problem accessing the mp3 file.

object id=MPlayer6-4 height=69 
classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95
 param name=AutoStart value=false
 param name=AutoSize value=true
 param name=AnimationAtStart value=true
 param name=EnableContextMenu value=true
 param name=filename value=media/file.mp3
 param name=ShowStatusBar value=true
 param name=ShowControls value=true
 param name=ShowPositionControls value=true
 param name=EnableFullScreenControls value=false
 param name=volume value=-200
 embed src=media/file.mp3 autostart=0 audiostream=1 
showcontrols=1 width=280 height=69 volume=-200 
type=application/x-mplayer2 showstatusbar=1 
pluginspage=http://www.microsoft.com/Windows/MediaPlayer/;/embed
 diva href=media/file.mp3 class=bodylinkListen to 
advert/a/div
   /object

Thanks,
Stephen
- Original Message - 
From: Stevio [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Wednesday, May 18, 2005 4:09 PM
Subject: Re: [WSG] Playing a sound file - what is the best way?


Does anyone have a link to an online article that shows you how to do this 
in Flash?

Thanks,
Stephen
- Original Message - 
From: Mike Foskett [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, May 17, 2005 5:14 PM
Subject: RE: [WSG] Playing a sound file - what is the best way?

I completely agree, use Flash.
I'd say the same for video too, for the same reasons.
Why:
 One solution multiple platforms.
 Saturation on all computers is over 90%. That's more than any browser.
 No platform compatibility issues Mac / PC.
 No browser issues Firefox / IE / Netscape / Opera.
With a single start / stop button in Flash, alongside a link to download 
the file.

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Playing a sound file - what is the best way?

2005-05-17 Thread Stevio
I have a sound file that my client wants me to put on his web site. It is a 
radio advert that they currently have running.

The format of the file is m4a (mp4). I have used a program that converts it 
to mp3 or other formats if required.

What is the best way to go about including it on a web page, and keeping it 
standards compliant (to at least HTML 4.01 Transitional)? Including sound 
files is not something I often do, you'll be glad to know. I will also NOT 
be setting it to start playing itself, it will be up to the user!

Should I keep it in the m4a format or use mp3 or use something else?
I got it working with the following code:
object width=160 height=16 
classid=clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B 
codebase=http://www.apple.com/qtactivex/qtplugin.cab;
param name=src value=media/advert.mp4
param name=autoplay value=false
param name=controller value=true
embed src=media/advert.mp4 width=160 height=16 autoplay=false 
controller=false pluginspage=http://www.apple.com/quicktime/download/;
/object

However, it doesn't work in Firefox. I need something that will work in 
different browsers and different platforms.

Does anyone know the best way to do this?
Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Playing a sound file - what is the best way?

2005-05-17 Thread Stevio
What is the benefit in using Flash to do something that you can quite easily 
do without flash?

Stephen
- Original Message - 
From: sam sherlock [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, May 17, 2005 4:57 PM
Subject: Re: [WSG] Playing a sound file - what is the best way?


I would use Flash to play the audio and provide an alternative link to the 
sound file as alternative content

thanks  SS 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Playing a sound file - what is the best way?

2005-05-17 Thread Stevio
Is there no standard way then to play an audio file (say mp3 for arguments 
sake) using the object tag?

Is the only standard way to just link to it using a href=file.mp3?
Stephen
- Original Message - 
From: Mike Foskett [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, May 17, 2005 5:14 PM
Subject: RE: [WSG] Playing a sound file - what is the best way?

I completely agree, use Flash.
I'd say the same for video too, for the same reasons.
Why:
 One solution multiple platforms.
 Saturation on all computers is over 90%. That's more than any browser.
 No platform compatibility issues Mac / PC.
 No browser issues Firefox / IE / Netscape / Opera.
With a single start / stop button in Flash, alongside a link to download the 
file. 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.12 - Release Date: 17/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Reapplying your CSS when the page length changes

2005-05-12 Thread Stevio
Any ideas?
Thanks,
Stephen
- Original Message - 
From: Stevio [EMAIL PROTECTED]
To: Web Standards Group wsg@webstandardsgroup.org
Sent: Tuesday, May 10, 2005 10:39 PM
Subject: [WSG] Reapplying your CSS when the page length changes


I have some JavaScript code that causes some content to be displayed when 
the user mouseover's an element. This extra content causes the page length 
to increase.

However, I have some absolutely positioned footers. When the extra content 
appears, the footer overlaps with it.

The positioning styles do not seem to be getting reapplied when the extra 
content is shown.

Is there a way, perhaps just a simple JavaScript function I can use, to 
tell the page to reapply the CSS to make sure everything is positioned 
right when the extra content is shown?

Thanks,
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Using valid JavaScript

2005-05-12 Thread Stevio
I am doing some work which involves resizing objects using JavaScript. 
However, properties like offsetHeight, innerHeight and clientHeight are not 
listed in the references here:
http://www.w3schools.com/

Does that mean the guide at W3Schools is not very good, or that these 
properties are not supported by all browsers?

Is there such a thing as valid, standards compliant JavaScript? Where can I 
find a reference guide of JavaScript properties that are supported across 
all browsers?

What I am specifically trying to do is find out things like the height of 
the body and the height of particular elements within the page. Any 
suggestions or ideas welcome.

Sorry if this is a bit off topic. (Is it?)
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.9 - Release Date: 12/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Using Object to replace IFrame

2005-05-12 Thread Stevio
I have a page that works ok using an IFrame to load some content from 
another web site into this frame.

The page is XHTML 1.0 Transitional compatible using an IFrame. To make it 
XHTML 1.0 Strict compatible, I would need to remove the IFrame and replace 
it with an object, from what I understand. I read something about it on the 
web but can't find it now.

Using Object (using data attribute) to replace IFrame (using src attribute) 
works ok except in Internet Explorer, where the frame has some sort of 
bevelled border effect and the html file from the other site doesn't load 
into the object. If I load an html file from the same site it works ok, but 
not from another site.

How can I make it work?
Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.9 - Release Date: 12/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Displaying hidden content when JavaScript disabled

2005-05-12 Thread Stevio
I have some content that is hidden and only displayed using JavaScript. 
However, when JavaScript is disabled, I want to display all of the content 
to start with.

I can do this by redefining styles within a noscript tag within the head 
section. Display: none is changed to Display: block for the various 
elements. However, my page does not then validate as being valid XHTML 1.0 
Transitional code when I do this. It doesn't like the style declaration 
within the noscript tags. In fact, am I right in saying that .

What can I do to display hidden content which will be valid XHTML 1.0 
Transitional other than my solution above?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.9 - Release Date: 12/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Re: Displaying hidden content when JavaScript disabled

2005-05-12 Thread Stevio
I can do this by redefining styles within a noscript tag within the head 
section. Display: none is changed to Display: block for the various 
elements. However, my page does not then validate as being valid XHTML 1.0 
Transitional code when I do this. It doesn't like the style declaration 
within the noscript tags. In fact, am I right in saying that .
I never finished this question. Am I right in saying that you are only 
supposed to have simple text between the noscript tags?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.9 - Release Date: 12/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Reapplying your CSS when the page length changes

2005-05-11 Thread Stevio
I found a solution for my problem from this page:
http://www.alistapart.com/articles/alternate/
I use this function:
function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName(link)[i]); i++) {
   if(a.getAttribute(rel).indexOf(style) != -1  
a.getAttribute(title)) {
 a.disabled = true;
 if(a.getAttribute(title) == title) a.disabled = false;
   }
 }
}

When I display the hidden content, which causes the page length to change, 
the stylesheet is reapplied/refreshed using a call to this function.

This ensures my footer, which is absolutely positioned at the bottom of the 
page, is moved to the bottom of the page when the additional content 
appears, instead of overlapping with it.

The ONLY problem I have with all this is that in Firefox, the whole page 
flickers when I mouseover the text that causes the additional content to 
appear (and which calls the function to reapply the stylesheet). Any 
suggestions for stopping the Firefox flicker?

Stephen
- Original Message - 
From: Stevio [EMAIL PROTECTED]
To: Web Standards Group wsg@webstandardsgroup.org
Sent: Tuesday, May 10, 2005 10:39 PM
Subject: [WSG] Reapplying your CSS when the page length changes


I have some JavaScript code that causes some content to be displayed when 
the user mouseover's an element. This extra content causes the page length 
to increase.

However, I have some absolutely positioned footers. When the extra content 
appears, the footer overlaps with it.

The positioning styles do not seem to be getting reapplied when the extra 
content is shown.

Is there a way, perhaps just a simple JavaScript function I can use, to 
tell the page to reapply the CSS to make sure everything is positioned 
right when the extra content is shown?

Thanks,
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Flash Satay method article

2005-05-10 Thread Stevio
Is the Flash Satay method from this article in 2002 still the most up to 
date and proper way of inserting Flash objects in a valid XHTML way?
http://www.alistapart.com/articles/flashsatay/

Even the Macromedia web site has a copy of the article:
http://www.macromedia.com/devnet/mx/dreamweaver/articles/flash_satay.html
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Reapplying your CSS when the page length changes

2005-05-10 Thread Stevio
I have some JavaScript code that causes some content to be displayed when 
the user mouseover's an element. This extra content causes the page length 
to increase.

However, I have some absolutely positioned footers. When the extra content 
appears, the footer overlaps with it.

The positioning styles do not seem to be getting reapplied when the extra 
content is shown.

Is there a way, perhaps just a simple JavaScript function I can use, to tell 
the page to reapply the CSS to make sure everything is positioned right when 
the extra content is shown?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.8 - Release Date: 10/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Overlapping footer

2005-05-03 Thread Stevio
I am working on a 2 column layout with a header and footer, with the footer
always pushed against the bottom of the page (or at the bottom of the
content, if the page content is longer than the available space).
http://www.cssweb.co.uk/templatetest2.html
I am getting quite close to a solution. I have one problematic issue just
now I am looking at. The footer is always at the bottom as you can see.
However, when you resize the browser window and make the height of the
window smaller, the footer will push up and overlap the content above.
How can I make sure the footer will stop exactly at the black 1px border of
the #maincontent div which contains the sidebar and the main content?
I want this to work without knowing the height of the footer (i.e. if the
footer height varies depending on its content the solution still works).
I used this article to help with this solution (but not the scripting part):
http://www.alistapart.com/articles/footers
Thanks,
Stephen

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.2 - Release Date: 02/05/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] The mother of all html references?

2005-05-03 Thread Stevio



I use http://www.w3schools.com/a lot. It 
has a lot of stuff on it for HTML, CSS, even ASP etc.

  - Original Message - 
  From: 
  Cole Kuryakin - x7m 
  Sent: Tuesday, May 03, 2005 2:02 PM
  
  I've been using this online html reference (http://www.htmlreference.com/) for 
  the past 6 months or so, and so far it's been fine.
  
  Can anyone recommend another on-line reference that they 
  prefer so I can take a look?
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.2 - Release Date: 02/05/2005


Re: [WSG] Overlapping footer

2005-05-03 Thread Stevio



Hi Jay,

Thanks for that, but floating the footer left 
instead of setting position to absolute, means that the footer is not at the 
browser window, which is one of the requirements.

Thanks,
Stephen

  - Original Message - 
  From: 
  Jay Gilmore 
  
  To: wsg@webstandardsgroup.org 
  Sent: Tuesday, May 03, 2005 2:42 PM
  Subject: Re: [WSG] Overlapping 
  footer
  Stevio wrote: 
  How can I make sure the footer will stop exactly at the 
black 1px border of the #maincontent div which contains the sidebar and 
the main content? Stevio, I looked at your CSS 
  and all you have to do to make this work is to change the 
  following:#footer { position: 
  absolute; bottom: 0; padding: 
  0; margin: 0; background-color: 
  #FF; width: 75%; clear: 
  both; border: 0px solid 
  green;}to#footer { float: 
  left; bottom: 0; padding: 
  0; margin: 0; background-color: 
  #FF; width: 75%; clear: 
  both; border: 0px solid green;}It seems to work 
  fine. This way, even if you make the #sidebar or #maincontent huge, the footer 
  stays put.Jay
  -- 
  

  Jay GilmoreDeveloper/ConsultantSmashingRed Web  MarketingP) 
  902.529.0651E) [EMAIL PROTECTED] 

No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.11.2 - Release Date: 02/05/2005


Re: [WSG] Voice family box model hack

2005-04-28 Thread Stevio
Yeah but what does each of the following lines actually do?
   height: 100%;
   voice-family: \}\;
   voice-family: inherit;
   height: auto;
Also, I am not clear on which browsers will end up using 100% height and
which will not break but not use 100%.
That MSDN article is quite interesting. Basically you can use those 
Conditional Comments to add specific code anywhere in your page for IE5, 
IE6, IE7 when it comes, and other browsers such as Firefox, Opera etc will 
just ignore it all because the code appears commented out to them.

This in turn makes it easier to develop code specifically to fix IE 
problems. Why has that been such a well kept secret?

Thanks,
Stephen
- Original Message - 
From: Thierry Koblentz [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Wednesday, April 27, 2005 4:00 PM
Subject: Re: [WSG] Voice family box model hack

Stevio wrote:
Can someone explain how the following works?
Hi Stephen,
You may want to read this:
http://tantek.com/CSS/Examples/boxmodelhack.html
Then this:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Unless I'm missing something, the latter is a simpler and - IMHO -
cleaner
solution to fix MSIE. 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.4 - Release Date: 27/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Two separate CSS issues

2005-04-28 Thread Stevio
I am working on a 2 column layout with a header and footer, with the footer
always pushed against the bottom of the page (or at the bottom of the
content, if the page content is longer than the available space).
Here is the page (ignore the colours - they are just for identifying divs!):
http://www.cssweb.co.uk/templatetest.html
I am coming across two problems:
1) When viewing in Firefox - there is whitespace at the top of the page
above the Document Heading, which is within an H1 tag. If I add:
#header h1 {
margin:0;
}
then this problem disappears.
Shouldn't the H1 be contained within the header div? Why is the above
required? This problem does not happen in IE6.
2) When viewing in IE6 - the floated sidebar div (yellow with red border)
does not appear on top of the pink space where it should be. Why is that?
Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.4 - Release Date: 27/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Two separate CSS issues

2005-04-28 Thread Stevio
Hi Bob,
Thanks for the suggestion but it didn't work! Stefan's suggestion did not
work either. Any other ideas anyone?
Anyone know why a floated div is hidden in IE6?
Stephen
- Original Message - 
From: designer [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Thursday, April 28, 2005 1:21 PM
Subject: Re: [WSG] Two separate CSS issues

These days I always use:
#{margin : 0; padding : 0} at the start of my CSS. This removes all the
'default' padding, margins etc from everything, and you set your own,
throughout.
Sometimes a pain if you're being lazy or in a rush, but it does allow for
excellent control of your layout.
Bob McClelland,
Cornwall (U.K.)
www.gwelanmor-internet.co.uk
- Original Message - 
From: Stefan Lemmen [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Thursday, April 28, 2005 1:10 PM
Subject: Re: [WSG] Two separate CSS issues

For the first problem try this:
body, html {
margin:0;
padding:0;
}
Stefan Lemmen
Holland
On 4/28/05, Stevio [EMAIL PROTECTED] wrote:
I am working on a 2 column layout with a header and footer, with the
footer
always pushed against the bottom of the page (or at the bottom of the
content, if the page content is longer than the available space).
Here is the page (ignore the colours - they are just for identifying
divs!):
http://www.cssweb.co.uk/templatetest.html
I am coming across two problems:
1) When viewing in Firefox - there is whitespace at the top of the page
above the Document Heading, which is within an H1 tag. If I add:
#header h1 {
margin:0;
}
then this problem disappears.
Shouldn't the H1 be contained within the header div? Why is the above
required? This problem does not happen in IE6.
2) When viewing in IE6 - the floated sidebar div (yellow with red border)
does not appear on top of the pink space where it should be. Why is that?
Thanks,
Stephen 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.4 - Release Date: 27/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Voice family box model hack

2005-04-27 Thread Stevio
Can someone explain how the following works?
#container {
   position: relative;
   min-height: 100%;
   height: 100%;
   voice-family: \}\;
   voice-family: inherit;
   height: auto;
}

htmlbody #container {
   height: auto;
}
Which browsers do and do not use the height 100% and height auto values?
This is from:
http://www.alistapart.com/articles/footers
Thanks,
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.3 - Release Date: 25/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] 100% height of viewport

2005-04-26 Thread Stevio
Is there a way to stretch an element to be 100% height of the viewport?
Also what is the best way to create a footer, which is at the foot at the 
page no matter the height of the viewport, but below and not overlapping any 
other elements?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.3 - Release Date: 25/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Web standards as a selling point?

2005-04-22 Thread Stevio
Tee, have a look at one more: http://vivabit.co.uk/articles/wsbp/ - I
thinks it was not mendioned yet.
One of the first points on that web site is:
Sites built with web standards take less time to develop
I have to disagree. Trying to lay a site out with CSS can be very
complicated and time consuming, given all that hacks that you have to
research and use in order to get things to look right and work right across
multiple browsers.
Table layout, on the other hand, is straightforward and simple. It might be
more complicated to maintain when you come back to it a while later and have
to work out the nested table colspan'ed layout and make an adjustment to it.
However, would a CSS layout be any easier to come back and maintain? (I
don't know, I'll find out in a while I suppose.)
Here is something that annoys me too - people dismiss table layout because
basically, using tables for layout is not what tables are intended for.
Therefore using tables for layout is a 'hack'.However, whenever you try
to use CSS for layout, you find out you have to use various 'hacks' to get
it all to work right. Therefore, you negate on of the main reasons for using
CSS layout in the first place.
Not only that, newer CSS versions introduce tables into CSS! Reinventing the 
wheel anyone?

Is it just a case of CSS layout (and browser's implementation of it) not
being mature enough yet to really trust and use fully, or should we carry on
regardless with it?
An example of a hack is to use a background image behind the layers of your
3 column layout. Surely the proper thing to do should be to specify
background colours in the stylesheet, which is a lot easier to maintain than
changing an image's colours and widths. Plus it often means that you are
building in fixed column widths, not recommended usually in an ideal world.
Here's another thought - is using floats to design things like 3 column 
layouts a hack in itself? Shouldn't relative positioning be the proper way 
to do it? Maybe not I just ask :-)

Please don't shoot me down in flames for these views! One of the things I
like about this list as opposed to another list I am on is that you people
discuss these issues in an open, reasonable way and acknowledge such 
problems. I look forward to your replies! :-) It helps me with my 
understanding of CSS, web design and the best way to carry on designing.

Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.2 - Release Date: 21/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Web standards as a selling point?

2005-04-22 Thread Stevio
- Original Message - 
From: Lea de Groot [EMAIL PROTECTED]
ah, but (from what you say elsewhere in your post) you are just
learning CSS layout - of course you are finding it more difficult.
I wouldn't say I am just learning CSS, I've been using it for a while. I 
would say I am not an expert either however.

I, on the other hand, haven't done full on table-layout in something
like 5 years now. I assure you, I don't remember all the little tricks
and hacks required for that and it would take me ages to make it look
just so.
Don't be confused between the effort of the learner and the effort of
the master :)

Lea de Groot
Elysian Systems - I Understand the Internet http://elysiansystems.com/
I had a look at your web site out of interest to see what it's like :-)
I'm using IE6 on Windows XP, 1024 by 768 resolution (probably a very common 
configuration).

There are some strange problems with your footer and copyright area. The 
copyright line is mostly hidden to the left of the green area. Only '005' 
shows. Also, when you mouseover your footer links, they jump to the left 
slightly. Sometimes your copyright line does show and then is hidden when 
you mouseover the links. A white gap also appears sometimes between the two 
green side columns and the footer as you scroll.

These are the sort of things that drive me nuts when designing with CSS! And 
to be fair you must agree these problems do not occur with table layouts? If 
this was my site I would then have the choice - research why these problems 
are happening, find the hacks to make them work, and then implement and 
test. Or convert to tables.

What often happens in these cases is that I do the research and the best 
option ends up being to use tables anyway, as it is the best and most 
reliable option.

I realise as well that many problems with the use of CSS can be laid at the 
feet of IE6. However, IE6 is the dominant browser and is what most of your 
clients and their clients are using. As long as that is the case then first 
and foremost, your site has to work in this browser.

Please don't mistake me for being anti-CSS. I am not. My designs at the 
moment tend to be a mix between CSS and table layouts. CSS is also great for 
text styling. I just feel it has some way to go before it is the definitive 
solution for layout, and that people are too quick to dismiss table layout.

Thank you for your feedback.
Here's a final thought for this email - one of the reasons that the internet 
became such a big thing is because it was so easy to create web sites, not 
necessarily good web sites, but easy nonetheless. The concept of sticking 
tags round things to affect how they behave is relatively simple.

Using tables for layout is also a fairly intuitive thing, so using them was 
not a problem for people making web sites.

However, I think you would agree that there is a steeper learning curve in 
learning to use CSS, which therefore means that less people are going to be 
able to create web sites. Is that a good thing or a bad thing?

Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.2 - Release Date: 21/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Web standards as a selling point?

2005-04-22 Thread Stevio
From: Rimantas Liubertas [EMAIL PROTECTED]
This topic is very flamable, so I won't go on it any more (at least
in this thread ;),
Don't worry about that. It's important to discuss these issues I think. 
Anyone who has been in this business for a while as I have, will have seen 
the latest and greatest development ideas come and go.

Remember when Java applets were the future of the internet? Remember all 
those Flash intro pages with the skip buttons (lol)? Latest is not always 
greatest - if we're going to use something we need to be convinced it is the 
right and best thing to use. 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.2 - Release Date: 21/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Mystical belief in the power of Web Standards, Usability, and tableless CSS

2005-04-20 Thread Stevio
Interesting thoughts from Vincent Flanders:
http://www.webpagesthatsuck.com/biggest-web-design-mistakes-in-2004.html
Go to number 3: Mystical belief in the power of Web Standards, Usability, 
and tableless CSS

What do you think?
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.18 - Release Date: 19/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Border not right with Firefox on Flash object

2005-04-15 Thread Stevio
Does anyone know why applying a 1px border using CSS or HTML to a Flash 
object messes up in Firefox and only displays as a margin along the bottom 
and half way up the sides?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.12 - Release Date: 15/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] New site, same question: opinion?

2005-04-08 Thread Stevio



Print Preview in IE6 cuts off part of the right of 
the page.

Stephen

  - Original Message - 
  From: 
  Piero 
  Fissore 
  Sent: Friday, April 08, 2005 4:05 
PM
  The url is www.immaginecreativa.it/unipn 
  (it's not complete yet). The concept was:
  
standard compliant; 
accessibility. What do you think about?
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.5 - Release Date: 07/04/2005


[WSG] Multiple classes applied to one element

2005-04-01 Thread Stevio
From what I understand, if you want to apply multiple classes to the one 
element, you do the following:
p class=class1 class2
Is this proper valid code  accepted in modern browsers or is there anything 
I should know to concern me with about using it?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Multiple classes applied to one element

2005-04-01 Thread Stevio
- Original Message - 
From: Kornel Lesinski [EMAIL PROTECTED]
Except that multiple classes selector doesn't really work in Internet 
Explorer, ofcourse.
http://www.quirksmode.org/css/multipleclasses.html
Are you meant/allowed to define classes like that page says:
The example given is a definition of:
p.underline.small
(See the page for all the definitions.)
The example above is a definition for when an element uses both of these 
classes (which both have their own definitions), but that is going one step 
further than I need. Up to now I would not define a class like that, but 
maybe it is valid.

Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Two images on the one line

2005-04-01 Thread Stevio
What is the simplest way to line two images up together on the one line, 
with a gap in-between and a caption centred below the image. The left image 
should be aligned left against the container, and the right image aligned 
right against the container.

I think I've been working on this too long...
Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Two images on the one line

2005-04-01 Thread Stevio
Hi Mani,
Thanks for that. It looks nice in Firefox but doesn't work in IE6.
Stephen
- Original Message - 
From: Mani Sheriar [EMAIL PROTECTED]
Sent: Friday, April 01, 2005 7:19 PM

Try this:
XHTML
---
div id=container
--snip--
View it: http://www.manisheriar.com/wsg/twoImages/ 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Shrink to accomodate what it contains

2005-04-01 Thread Stevio
Tables will shrink to the width of what they will contain. Is it possible to 
do this with a div to contain an image with a caption centred below it, 
without having to set the div to the exact width of the image?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Extra hidden content

2005-03-31 Thread Stevio
How do you handle the situation of hidden elements becoming displayed when 
the normal stylesheet is not used? Is this a problem that concerns you?

For example, I quite often have two headers - one which integrates with the 
site design when viewed on screen, and one which is used for printing 
(simplified, no background colours etc). Various other elements might be 
hidden and shown when printing, such as side elements removed etc to narrow 
the page for printing.

The problem can come when the page is viewed without the stylesheet, and two 
headers can be displayed, for example.

What do you think of this?
Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.0 - Release Date: 31/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Simple 2 column layout?

2005-03-18 Thread Stevio
- Original Message - 
From: Lachlan Hardy [EMAIL PROTECTED]
Despite my strong disapproval of fixed width (I know, I know, the redesign 
is coming), the following works for me
Do you object to a column being a fixed width? I understand your objection 
to a fixed width overall layout, but why object to a column being fixed 
width?

As a side issue to that, if you have a 2 or 3 column layout with background 
colours and all heights to be equal, and you do not know the width of each 
column (NOT fixed width), how then do you use the background image hack for 
the colours of the columns?

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.3 - Release Date: 15/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Simple 2 column layout?

2005-03-18 Thread Stevio
Interesting, interesting. I how have a left column with a percentage width, 
and a right column without a width.

The wrap div surrounding everything has a width of 92%. So far it's working 
quite well.

Now I want to handle the problem of the page being resized to a narrow width 
which causes the right column div to jump below the left floated column. I 
don't want this.

What would you advise? Use the min-width property, along with the PVII Set 
Min Width extension?
http://www.projectseven.com/extensions/info/minwidth/

Thanks,
Stephen
- Original Message - 
From: Kim Kruse [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Friday, March 18, 2005 2:27 PM
Subject: Re: [WSG] Simple 2 column layout?


Hi,
How about *not* giving the second col a width (the one that is not in 
fixed width)

Kim
Trusz, Andrew wrote:
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Stevio
Sent: Thursday, March 17, 2005 6:08 PM
To: Web Standards Group
Subject: Re: [WSG] Simple 2 column layout?
Thanks for that, getting those widths right always annoys me cause the box
model doesn't work right!
To expand on the simple 2 column layout, how can I have a fixed width left
column (for navigation) and a right column that fills the rest of the 
space.

This is achieved in tables by setting the left cell to, for example, 150
width, and the right column to 100%.
Thanks,
Stephen
=**
There's a conceptual issue here. The point of styling with css is to get 
out
of the box of one's own monitor and to style for the range of devices
available to users. That's users not authors.

The only way to do this is to maximize flexibility. This is where the 
ease
of tables fails. Set a pixel fixed width for a left cell, let the right 
cell
fill the screen. Now increase the screen resolution. The amount of real
estate to fill in the right cell just increased dramatically. Go the other
way, keep decreasing the screen width to a cell phone or pda. The screen
real estate is gobbled up by the fixed with left cell and the right cell 
an
undecipherable sliver.
Start to change font size and it just gets worse. The fixed width left 
cell
disintegrates. The right cell holds coherency longer. Overall, it just
doesn't work well.

Percentages offer a partial solution. At lower resolutions a percentage
based column setup holds up pretty much down to the single word width, a 
bit
longer than may actually be useful. For higher resolutions, the single 
line
column problem doubles with both cells being single lines with the added
possibility of a lot of real estate separating the end of one text 
grouping
and the beginning of the other.
Font size, however, starts to cause the same kinds of problems. Huge,
gigantic letters breaking out all over.
Fixing the right cell size only compounds the problem.

That leaves em's for sizing. One can set a width for either or both 
columns
which will better withstand resolution and font changes in both 
directions.
The problem is how big is an em? It's really such a flexible measure that 
it
makes people uncomfortable. How many em to a line? What looks good on
changes of screen resolution can frankly look a little flakey and shabby 
on
different monitors with the same resolution. It does look slightly odd 
when
the header graphic is off center a tiny bit. This leads to discussions of
being a pixel or two off on header positions etc. Although designing for
slightly less than viewport maximum will fix most all of that by 
compacting
the design.

So you want 2 simple columns? Then make 2 columns. Float both of them. 
Left
or right, determined by whichever content you want to come first in the
code. Float them because then they are columns not a float sitting on a 
wide
margined normal flowed element. Fix their width with em to maximize
durability and usability.
And this is where the box model shines. It's just the sum of seven
components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side
and up and down, all constrained by the width of the container, if any.
Change those factors and one changes the appearance of the columns without
compromising the content or the accessibility of the content.
And that's the beauty of css for styling. Allows both users and authors to
separately control how pretty the picture is; once the authors learn to 
let
trust users. Brilliant design actually.
drew
**
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] Simple 2 column layout?

2005-03-17 Thread Stevio
Thanks for that, getting those widths right always annoys me cause the box
model doesn't work right!
To expand on the simple 2 column layout, how can I have a fixed width left
column (for navigation) and a right column that fills the rest of the space.
This is achieved in tables by setting the left cell to, for example, 150
width, and the right column to 100%.
Thanks,
Stephen
- Original Message - 
From: Lachlan Hardy [EMAIL PROTECTED]
Sent: Wednesday, March 16, 2005 7:27 PM

You didn't ask for header and footer, but if you don't want them just
remove...
HTML:
body
  div id=header...some header content.../div
  div id=somecol...some column content.../div
  div id=someothercol...some other column content.../div
  div id=footer...some footer content.../div
/body
CSS:
#somecol {
  float: left;
  margin-left: 1%;
  width: 40%;
}
#someothercol {
  float: left;
  margin-left: 1%;
  width: 40%;
}
#footer {
  clear: both;
}
Increase the widths as appropriate, just remember that percentages are
dealt with slightly differently by most browsers (all?) so that widths
that work in one may not work in all others - basically, the widths and
margins should never amount to 100%, but in some browsers a better number
is 98% total 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.3 - Release Date: 15/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Simple 2 column layout?

2005-03-16 Thread Stevio
What is the simplest way to layout 2 columns? Nothing fancy, just a bit of 
content in each one. No background colour.

Thanks,
Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.3 - Release Date: 15/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] Information about validation logos

2005-03-04 Thread Stevio
I have put together a page using some information from various sites and 
adding / changing bits to come up with the following page:
http://www.fit2gether.co.uk/aboutsite.html

You will see that there is a small link at the bottom of the page that a 
user can click on to get to this page. What do you think of the way I have 
done this and what I have on this page?

That's the web site complete now barring any final changes requested.
Thanks,
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 02/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] Logos explanations

2005-03-03 Thread Stevio
Also, does anyone know of a good web site that details clearly and 
concisely
all the main things you should do to make a web site accessible?
The best source is the WAI guidelines. Sites must comply with priority 1,
should comply with priority 2 and may comply with priority 3:
http://www.w3.org/TR/WCAG10/full-checklist.html
Some of this is a bit subjective. Does a web designer just go through it and 
decide himself if the web site they have made meets the checkpoints?

e.g. 14.1 Use the clearest and simplest language appropriate for a site's 
content.

That is very subjective.
There is a simpler web standards checklist (which covers basic
accessibility) here:
http://www.maxdesign.com.au/presentation/checklist.cfm
Thanks. Do you ever feel overwhelmed at the amount of validation and 
accessibility guidelines that new sites should be tested by and meet?

Stephen 


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.0 - Release Date: 02/03/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] getting two colums to be of the same height

2005-02-27 Thread Stevio
From: Marco van Hylckama Vlieg [EMAIL PROTECTED]
Is there any cross browser, standards compliant way to get those two 
grey columns to be the same height?
Use tables ;-)
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.306 / Virus Database: 266.5.1 - Release Date: 27/02/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] To display or not to display validation logos?

2005-02-26 Thread Stevio
Has anyone written anything like this we could use?
Also, excuse my slight ignorance here, but just because a page validates as 
XHTML and CSS compatible, does that make it accessible?

Obviously it helps, but there is more to accessibility than that isn't 
there. I also use tables in my pages in a couple of places, for the main 
navigation links and for the 2 column layout of the main content area.

Thanks,
Stephen

- Original Message - 
From: Kornel Lesinski [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Friday, February 25, 2005 11:09 PM
Subject: Re: [WSG] To display or not to display validation logos?


Perhaps we need a simple page to link to, explaining what standards are 
for,in terms that the non-tech viewer can appreciate?
I like that idea...
--
regards, Kornel Lesiski 

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.306 / Virus Database: 266.5.0 - Release Date: 25/02/2005
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**