Good solution, James!
The display:inline declaration was unnecessary in this context. I
accidentally left it in when playing around with the box positioning. It
worked in aye-eeeh 6, but it came unstuck in Opera 6. Maybe it could be
tweaked to work reliably.
James,
I build a range of full CSS layouts when I first started playing with full
CSS. Most of them are still online, and there are a number that are centred
and reasonably browser-stable. There is code on the page to make it easier:
Single column Centre aligned, scalable width
Standard HTML lists have a certain amount of left-indentation. The amount
varies on each browser. Some browsers use padding (Mozilla, Netscape,
Safari) and others use margins (Internet Explorer, Opera) to set the amount
of indentation.
The best thing to do is to remove all default padding first
list for http://webstandardsgroup.org/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
Following on from Accessifies List-o-matic, and Inknoise's
Layout-o-matic, comes CSS border test - should have been called
Border-o-matic:
http://www.copysense.co.uk/border.htm
Allows you to test a wide range of CSS borders and shows you the results.
Also gives you the CSS code.
Russ
Chris Hester has created a picture of a house using nothing more than CSS -
no images.
http://www.designdetector.com/tips/3DBorderDemo2.html
Thanks
Russ
*
The discussion list for http://webstandardsgroup.org/
Well... true to his word, Simon has written a great article/tutorial on
XHTML and mime types (in record time too!):
For most websites, authoring in HTML 4.01 is perfectly sufficient. Most of
the features available in XHTML are available in good old HTML. However,
some sites may wish to take
http://www.hotdesign.com/seybold/
Thanks
Russ
*
The discussion list for http://webstandardsgroup.org/
*
if you could give
http://www.globetrekking.com a quick test - it is my first website (redesign)
using CSS for layout.
Thanks
Petra
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED
Yes! forgot to mention that! I fixed it on the file I posted but forgot to
tell you.
Thanks Lindsay
Russ
One quick point - unrelated to the alignment issue - is the font family
declaration:
{ font-family: arial black; arial, helvetica, geneva, sans-serif; }
Theoretically it is best to
- Moz1.4
- Op7
- N7
Thanks
Russ
Thanks for your help. It looks perfect in Netscape but in IE6 half of the text
(question mark) is cut off. I suppose I shall have to display a different
line-height to IE.
Thanks
Petra
- Original Message -
From: russ weakley mailto:[EMAIL
Wow, looks like you are moving into that super-geek territory we were
discussing. What do the likes of Anne van Kesteren, Simon Willison and Evan
Goer say on the subject?
Reading your posts (or your journey) on serving correct MIME types should be
mandatory for anyone thinking of building sites
The next Sydney meeting (and end of year party) will be Thursday 4 December,
2003.
John Allsopp will be guest presenter for the evening and will be talking
about the history of CSS, where it is now, and where it will be going in the
future.
For those of you who do not know about John Allsopp,
37 Signals just launched the Society for Risk Analysis (SRA) site:
http://www.sra.org/
Very nice, simple, elegant design. Three interesting points
1. Uses a basic table grid and then mostly CSS for style - not that this is
a bad thing, but slightly surprising.
2. invalid xhtml - they have gone
The competition is over, and all entires are online:
http://builtforthefuture.com/reuseit/contestants.php
Russ
*
The discussion list for http://webstandardsgroup.org/
*
I received an irate email from a user via the Floatutorial the other day,
who correctly picked up that my centering method did not work across all
browsers.
I quickly edited the relevant tutorials and wrote a small article. Many of
you will be fully aware of this method (I'm sure it has been
Big John and Holly Bergevin have written two great new articles at Position
is Everything (P.I.E.).
Flowing and Positioning: Two Page Models
http://www.positioniseverything.net/articles/flow-pos.html
A detailed discussion of flowing and positioning.
Float: The Theory
damned
issues I can't eradicate!
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Mon 10/11/03 9:47 PM
To: Web Standards Group
Subject: [WSG] Sydney Workshop: Practical CSS Page Layout - it's on!
For those who have joined recently, the Sydney CSS
Here are some quickies:
http://diveintomark.org/safari/
http://macedition.com/cb/resources/safari/safari_issues.html
http://www.gel.ulaval.ca/~fortin15/safari-bugs.html
Hi James,
I've just been playing around with this on Konqueror and it doesn't seem
to be supported. I'm writing a bit
,
Mark
*
The discussion list for http://webstandardsgroup.org/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433
It is valid but will run in quirks mode - not standards complaint mode:
This may be an issue as some browsers will render CSS differently if Quirks
mode is used.
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://diveintomark.org/archives/2002/05/29/quirks_mode
The Literary Moose site has been mentioned on this list before - a site
pushes the boundaries of CSS - http://www.literarymoose.info/=/css.html
A new article by Wojtek (The Moose) at Nemesis takes it even further. A
mind-boggling journey into CSS generated content:
It could be an IE whitespace issue. I can't look at your example just now
but have you tried:
liitem/lili
item/li
In other words, the next list item must start on the same line as the one
above. I know, it sounds insane...
Thanks
Russ
Anyone have any thoughts on why IE6 keeps shoving in a
Hi Michael,
Welcome to the group!
link rel=start...
Refers to the first document in a collection of documents. This link type
tells search engines (and other alternate browsers) which document is
considered by the author to be the starting point of the collection.
James,
Can you post a URL?
Russ
Hi all
I'm beating my head against a wall about this one... IE 5.5 and 6 is
putting in some mystery whitespace (looks like about 8-10 pixels - a
line) after a horizontal navigation list. This hor. list has a nested
list holding some text within it.
The
If you're new to this list and want to post a question, have a quick read of
this post first (this info is relevant for any list you join):
Post on Web Standards Group site (you'll need to log in to read it):
http://webstandardsgroup.org/manage/archive.cfm?uid=6AF51B1A-C964-A884-A32EE
DF301F8B7D0
The Sydney CSS workshop has had lots of interest, so they have decided to do
another day for those who missed out - 12th December
http://www.westciv.com/courses/workshops/
My final post on this - I promise!
Russ
*
The discussion list for
Another full css site goes live:
http://calgrants.org/
More here:
http://kalsey.com/2003/11/california_government_css_design/
Russ
*
The discussion list for http://webstandardsgroup.org/
*
Simple, Semantically Correct CSS Boxen with Clean Code:
http://www.vertexwerks.com/tests/sidebox/
Russ
*
The discussion list for http://webstandardsgroup.org/
*
Completely agree - especially the recent crib sheet:
http://www.mezzoblue.com/css/cribsheet/
I'm sure most of you are aware of this site, but just for those that
aren't
http://www.mezzoblue.com/ is the blog of Dave Shea, who is probably better
know for coming up with
Hi all,
I have just launched a new CSS tutorial to follow on from Listamatic,
Listutorial and Floatutorial.
This one is called Selectutorial - CSS selectors - and includes basics like
the structure of rules, the document tree, types of selectors and their
uses. There is also a step-by-step
I am going to do a quick talk about web standards to a group of final year
students tomorrow.
As with all of us, I'm up to my eyeballs in work. So, I thought I'd do a
brain dump and then get feedback from the group.
Lean and clean! Building a site with web standards
Imagine floats as being similar to the old align=right.
For example, you have a block of content and an image. If you want the image
to align right beside the content it must be before the content.
Floats work in exactly the same way. To quote:
Block level elements above a floated element will
The first example you gave is designed to work for any situation. It works
for items that have fixed widths or liquid widths (based on the width of the
viewport). And yes, it is not as elegant as it should be.
However, if you have a liquid layout, there is a much simpler method that
only needs
Try this:
http://www.maxdesign.com.au/jobs/poo.htm
Modify as required
Russ
Is there anyone on this list who can easily put together a 3 column layout?
Hold on, there is more. All 3 columns need to be 33% (or come to 100%)
*
The discussion
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Sunday, 7 December 2003 6:05 PM
To: Web Standards Group
Subject: Re: [WSG] Too Much Space..
Try this:
http://www.maxdesign.com.au/jobs/poo.htm
Modify as required
Russ
Is there anyone on this list who can easily
Oops. A flaw in the version I just sent below. Ignore. Teach me to do too
many things at once. :(
Russ
ode to poo with centred container:
http://www.maxdesign.com.au/jobs/poo2.htm
Why poo? Good question. Maybe something to do with a 3 year old child that
is hassling me as we speak. :)
Hi again, Peter, welcome to the list.
Had a look at your site the other day. Beautiful stuff in the portfolio
section!
Russ
Hi folks,
Peter Gifford here, new member just introducing myself. Hopefully I
can be of some service on the list and not just poke about in your
experienced brains
Sorry for the length of this...
1. All government sites are supposed to follow WAI guideline - which
recommend the use of relative font sizes.
2. The aim is to give users the option. Saying that users can change their
screen resolution is throwing the responsibility back onto them - it is our
on me ;-)
I'll give it a go though at some stage.
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 2:19 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Sorry for the length of this...
1. All government sites
-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, December 10, 2003 3:41 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Taco,
If you code well, relative font sizes do not require a great deal to apply
across a site. You are simply making decisions on font
1.
Westciv Free CSS1 course is now starting. Every week a new major section
will become available, but the old installments will disappear.
http://www.westciv.com/courses/free/index.html
2.
Nemesis article: Two columns with color - a simple step by step tutorial on
how make a two column CSS
Melbourne, Australia
http://www.davidmcdonald.org
ICQ:11814164
- Original Message -
From: russ weakley [EMAIL PROTECTED]
Date: Thursday, December 11, 2003 12:03 pm
Subject: [WSG] A few links for a Thursday...
1.
Westciv Free CSS1 course is now starting. Every week a new major
Tantek had an interesting post today:
http://tantek.com/log/2003/12.html#L20031215t0830
Well worth a read are his six archived posts on sematic markup. Although
they are written to bloggers, they have value to anyone marking up websites.
As is often discussed on this list, the articles outline
Hi Mike,
The @import is generally used in two ways (the second is probably what you
are referring to):
---
1. import CSS files into other CSS files
---
@import can be used to import style sheets into other
The next Sydney WSG meeting is set for Thursday 15 January
7.00pm - 7.30pm:
Lindsay Evans, Interface Developer, Red Square
XXX - An introduction to XSLT, XPath XML
7.40pm - 8.10pm:
Russ Weakley
Coloured boxes - the process of building a CSS layout
8.10pm
Informal stuff (site demos, questions
Peter,
The image is set to float: left which means it is taken out of normal
flow. Containers (in this case the li) cannot determine the height of a
floated item, so they will close themselves immediately below any elements
that are in normal flow (in this case below the h2 and the p) - leaving
The float and container information was poorly explained. Here is a real
example with an explanation:
http://www.maxdesign.com.au/jobs/floatsample.htm
Russ
The image is set to float: left which means it is taken out of normal
flow. Containers (in this case the li) cannot determine the height
Dave Shea asks:
Support the standards and nothing but the standards, regardless of whether
or not browsers get them right?
or
Support what standards are available given today¹s browser support, and
kludge together markup/script/ CSS hacks to overcome deficiencies in
implementations?
A
Mike,
Thanks for the wrap on floatutorial. :)
The layout you have done has a number of errors including missing alt tags
and background images applied to the td element. I used to do these myself
before I saw the light. Now CSS can do it for you more easily.
This layout is very simple, so why
Michael,
Looking good. Forgive the long rave here...
1. There are still validation issues with your page. There are XHTML breaks
instead of HTML breaks. So, br / should be br, and the same for metadata
- remove the end backslash, as this is causing items below to show up as
invalid.
You may have seen this on Zeldman, but this site has the biggest set of
resources I have seen - try these two pages:
Accessibility:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.ht
ml
CSS:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html
Thanks
/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
Denis, you are right. While the archive section is partially helpful, any
useful link posted to WSG should also be added to our resources section.
Slackness on my part:
http://webstandardsgroup.org/resources/
BTW, anyone can add to the resources section (especially to the built by
members
Hi Mark,
First of welcome from lurker status :)
1. invalid page
http://validator.w3.org/check?uri=http://www.phunky.co.uk/bs/
Just three items in the head of your document need / to be valid XHTML.
Always validate before testing or posting - like cleaning your teeth :)
Peter and I have been
Interesting interview with Ryan Carver (Lee Jeans recent redesign using web
standards):
http://www.webstandards.org/learn/interviews/rcarver/
A List Apart issue 167 is out (Elastic design article is very good):
http://www.alistapart.com/issues/167/
An all-too-true definition of web standards?
Steven Faulkner, from the Accessible Information Solutions (AIS) team, has
developed a free web accessibility checking toolbar for Internet Explorer
http://www.nils.org.au/ais/web/resources/toolbar/
The Accessibility Toolbar software contains a range of Tools:
To examine discrete aspects
/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
Yes, this is correct behaviour. The background of your comments div should
slide under the floated item - the right nav. The foreground (the text)
should not slide under, instead it should stop against the edge of the
floated item.
There is a good reason for it. The reason for this is to do with
*
The discussion list for http://webstandardsgroup.org/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
Do we need the HEIGHT and WIDTH attributes for the IMG element?
http://annevankesteren.nl/archives/2004/01/12/images-height-and-width-attrib
utes
Also interesting is this image gallery that uses a definition lists to
create the gallery:
http://www.btinternet.com/~historiae/gallery.html
This is
Many ways to skin a cat. A standard table is acceptable but so is a
definition list:
http://www.maxdesign.com.au/jobs/css/peterottery.htm
Russ
Peter.
Without being able to test where I currently am at the moment (so forgive me
if I am wrong), you should be able to use:
Again, completely agree, Gary.
There is another reason why tabular data is more beneficial if marked up
using tables - accessibility!
When a blind user comes to a table, they cannot *see* it as one unit, so
they need ways of tying columns and rows together. You can do this with
tables, you
Hi Vaska,
Are you talking about a Safari browser support chart? Like this:
http://www.macedition.com/cb/resources/macbrowsercsssupport.html
Russ
Hi all,
I actually hate to ask this, but awhile back I found a resource that
had all the possible (both currently supported and not) CSS
*
The discussion list for http://webstandardsgroup.org/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
As Miles said, this is slightly off-topic, even though interesting!
How about email Miles off-list with responses, and then Miles can do a recap
for all of us on-list (or via his blog?) in a few days time
Might be worth letting Miles know if you are happy for your age to be
public!
Russ
CSS Hacks and Filters
http://www.dithered.com/css_filters/index.html
A pencil image made out of CSS
http://www.designdetector.com/tips/csspencils.php
Common XHTML Validation Errors
http://www.blackwidows.org.uk/resources/tutorials/xhtml/common-errors.html
Validation and error handling - from a
-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Tuesday, 20 January 2004 6:24 PM
To: Web Standards Group
Subject: Re: [WSG] Print Media
Yep, just set all containers or elements that you don¹t need to
display: none; on the print CSS only.
You can take virtually everything off
/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
CSS too tips:
http://www.madaboutstyle.com/tooltip2.html
Simple quiz - image floats:
http://www.simplebits.com/archives/2004/01/02/simplequiz_part_xi_image_float
ing.html
A Standard for Site Organization (via brainstormsandraves.com)
http://www.theobvious.com/archive/1998/11/02.html
StrongBad -
Hi Nick,
I have Mac and Windows machines in front of me at all times for testing.
Browsers include:
Mac: saf1, camino.7, ie5, moz1.4, n7, nn4, op6 (7 total)
Win: ie5, ie5.5, ie6, n7, nn4, op7, moz1.4 (7 total)
I also use BrowserCam as a backup throughout most testing.
I think both options are
/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
This thread is now closed!
Take it offlist if you wish to continue!
Russ
*
The discussion list for http://webstandardsgroup.org/
*
The reality is you can use either perecents or ems to get the same affect,
but percents seem to be the preferred option (at least below 1em):
A word of caution concerning IE. Be careful using ems. The most recent
versions of IE for Windows tend to flummox text with a font-size less than
1em
The Business Case for Web Accessibility (Excellent short article on web
accessibility by Andy Budd):
http://www.andybudd.com/blog/archives/000143.html
Interview with Dave Shea (although it is more about him as a person, there
are some interesting comments about influences and web standards):
Access keys (although they are great) have a bad name because they are so
poorly supported by certain browsers (not IE this time). Also, there is no
international access key standard - at least not that I am aware of. This
means that users who come to your site have to discover what your access
Web power tools:
Sometimes to be efficient at building web sites you need to have a variety
of tools at hand to help speed up the process.
http://www.nickfinck.com/presentations/devgroup/webtools/
There Are Only Tradeoffs
The state of web design in 2004 is all about tradeoffs: Liquid vs. fixed,
A bit of url hacking gets you there:
http://hinterlands.com.au/testing/css_image_replacement.html
Looks great, BTW!
Russ
Hey Chris
Can you double check that URL - looks broken.
Cheers
Mark
*
The discussion list for
Peter,
The problem is that you are dealing with browsers individual interpretation
of how to render lists - in particular list bullets. Each browser decides
how they will render lists via their default style sheet (based on something
like this - http://www.w3.org/TR/REC-CSS2/sample.html).
Apologies to those who are over the definition list debate...
Definition lists - misused or misunderstood?
What are definition lists? When are they appropriate? And how to style them
to look like tables, image galleries, calendar of events and more
meaning if the CSS is not present.
:)
Russ
I was searching the web for a good way to do a thumbnail gallery and
came across the discussion on this list between Russ Weakley and Justin
French. I came up with this alternative to the ways that they wrote
about (Russ - each image in its own DL
Bradley,
First of all, this is not off-topic at all. In fact, I reckon it's the most
important issue facing developers/designers on this list.
Here are some comments based on Peter's and my experience.. Take or leave as
you wish. :)
CLIENTS
We always sit down with our clients and discuss
http://www.alistapart.com/articles/goingtoprint/
From the god of CSS himself - Eric :)
Can I ask to be pointed to the best tutorial for making printer
specific pages on CSS sites?
Thanks
Peter
*
The discussion list for
A strangely unstyled page, but some excellent concise info on accessibility
(via Mark Stanton):
http://livedocs.macromedia.com/wtg/public/coding_standards/accessibility.htm
l
Daily Standards - dedicated to recognizing sites that have been lovingly
crafted with web standards and the future in
Cameron! This is truly amazing. Right up there with CSS Pencils and the CSS
House - strange but amazing uses of CSS and XHTML.
Russ
Then have a game of SSCrabble -- the fun way to pass
the time with Web Standards! :o]
http://www.themaninblue.com/writing/perspective/2004/01/27/
position: absolute
That is the culprit - makes text selection impossible in IE
Russ
Hey Everyone,
Long time since I last wrote to the group!
I was just developing a new website, and I have been having that very annoying
problem in IE where the text, wont be selectable like
Here is a test page to show you. Check it with Win/IE6:
http://www.maxdesign.com.au/jobs/css/try-and-highlight-me.htm
You can't select the text. Another gotta-love-ie thing
:)
Russ
position: absolute
That is the culprit - makes text selection impossible in IE
Russ
Hey Everyone,
Ok, let me refine my earlier sweeping statement :)
In all of the IE's you can double and triple click.
In IE6 only, there are drag-selection issues with absolutely positioned
items. In IE5 and 5.5, you can drag-select like any other browser - you can
start selecting from inside the box or
Peter,
position: absolute is a two edged sword. It allows you to position an
element exactly where you want (within a relatively positioned item in your
case), but it has downsides in certain circumstances.
The biggest downside is that absolutely positioned items are completely
removed from the
://webstandardsgroup.org/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
/
*
Thanks
Russ
---
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: [EMAIL PROTECTED]
http://www.maxdesign.com.au
1.
Tantek (inventor of the Tantek hack) is doing an interesting exercise -
restyle his blog every few days with the same layuot as some of the top 100
blogs, but with web standards.
Exclusive use of CSS for presentation. No table/gif/font layouts (unlike
many of the top 100).
AOL is now full CSS
http://www.andybudd.com/blog/archives/000149.html
Like most big site makeovers, the first thing people notice are the sites
problems. In the case of AOL, the site doesn¹t validate, a lot of the text
is image based, the text is a little small and overlaps its containers when
Veine,
Ryan's mentioned a few good arguments against image maps - maintenance and
load time. I think there is a far bigger issue that was touched on but not
explored - accessibility.
start long rave
Many people assume that accessibility means blind users with screen readers.
However,
W3C's CSS validator is broken at present it seems:
http://www.zeldman.com/daily/0204b.shtml
http://www.mezzoblue.com/archives/2004/02/05/css_validati/
http://www.stopdesign.com/log/2004/02/05/bebad.html
http://www.saila.com/columns/lcky/index.shtml?2004_02_01_archive.shtml#lcky2
00402051411
, Macromedia User Group and Cold Fusion User Group
Meeting is an event you will not want to miss.
Russ Weakley of Max Design will deliver a web standards presentation on
the practical benefits to your visitors, your clients and yourself!
Our special guest speaker is Sean Corfield, Director
A survey of 100 top companies has found that they are largely failing in
their moral and legal duty to make their websites accessible to those using
assistive devices, such as screenreaders and Braille displays.
http://www.internet-magazine.com/news/view.asp?id=3913
However, there is some good
Dracos - Accessibility
A recent hobby of mine has been to take an inaccessible website and produce
a more accessible version that if necessary fetches information from the
original site to keep up to date.
http://www.dracos.co.uk/web/accessibility/
RNIB - Web Accessibility centre - a good place
Many places that have them but here is one from a WSG member:
http://jessey.net/simon/articles/009.html
Thanks Robert, I'll have a look at that and see.
As to the Doctype, I have to admit to being confused. I cut and pasted that
from the W3C site, and it validates.Is there a site
Well done to Johan, Cameron and Andy for getting it up and running!
Andy has written more here:
http://www.andybudd.com/blog/archives/000154.html
Russ
If you remember Cameron (bloo man) posting something recently about
starting a standards awards, or even if you dont:
1 - 100 of 297 matches
Mail list logo
