Awesome use of CSS

D

Davmagic com

From:
(e-mail address removed)
(Andy Mabbett)
People often doubt that CSS- based,
layout- table- free, valid and accessible
sites can look attractive.
End of argument:
http://www.csszengarden.com/

Accessible for which browsers? That site is not viewable on a MSN-TV
Browser!!! It spreads off the viewing screen to the right and the
browser does not support sideways scrolling! Even if it did it would not
be acceptable!

Web Design-Magic-Painting-Junking-Games
INFO 2000 For You
http://www.davmagic.com
 
M

Mike Novak

Davmagic com said:
From:
(e-mail address removed)
(Andy Mabbett)
People often doubt that CSS- based,
layout- table- free, valid and accessible
sites can look attractive.
End of argument:
http://www.csszengarden.com/

Accessible for which browsers? That site is not viewable on a MSN-TV
Browser!!! It spreads off the viewing screen to the right and the
browser does not support sideways scrolling! Even if it did it would not
be acceptable!

Web Design-Magic-Painting-Junking-Games
INFO 2000 For You
http://www.davmagic.com

Quick, everyone, stop using CSS because the MSNTV browser's support for CSS
is piss-poor at best! Or at least stop using percentages for widths and
forget about any type of fluid design. 90% of the sites posted in this group
are unusable or unviewable (and in some cases invisible) on MSNTV.

If you want a laugh (or a cry, I suppose), download the latest version of
the MSNTV viewer and see for yourself:

http://developer.msntv.com/Tools/MSNTVVwr.asp

And the information regarding MSNTV support for CSS posted on the MSNTV
developer site:

http://developer.msntv.com/Develop/CSS.asp

is outdated at best, and is incorrect for the most part.
 
D

Dexter J

Salutations:

Mike said:
Accessible for which browsers? That site is not viewable on a MSN-TV
Browser!!! It spreads off the viewing screen to the right and the
browser does not support sideways scrolling! Even if it did it would not
be acceptable!

Putting aside the greater debate for a moment - would you mind taking a
peak at my site below using that browser if you have it installed?

I pretty sure I display very much the same on most clients (assuming flash
4 plug in) and would dearly love to know if

a: MSN-TV browsers worked to..

b: does MSN-TV support .swf vectors..

No problem if you don't want to - but thought I'd ask.. Carry on and thank
you..

--

J Dexter - webmaster - http://www.dexterdyne.org/
all tunes - no cookies no subscription no weather no ads
no news no phone in - RealAudio 8+ Required - all the Time

Radio Free Dexterdyne Top Tune o'be-do-da-day
Martin Lee - You Was
http://www.dexterdyne.org/888/098.RAM
 
R

rf

Andy Mabbett said:
People often doubt that CSS- based, layout- table- free, valid and
accessible sites can look attractive.

End of argument:

<http://www.csszengarden.com/>

I respectively beg to differ. Greatly.

The CSS may be sort of OK (1) but the accessibility problems with the site
are huge.

The grey text on white is hard to read. On attempting to enlarge my font
size I find that every bit of text has font size either in pt or px, this
making it unresizable in IE, the most popular browser (at the moment). For
this latter reason alone I would say that the site sucks.

Pictures of text, the heading bit "The beauty of CSS design" and the almost
totally invisible "select a design". Pictures of text do not resize. The is
no alt text for these pictures so non visual browsers will see nothing. Oh,
hang about, the author has jumped through hoops by providing invisible div's
(2) to provide non visual content. What is wrong with simple alt text?

(1)

The CSS is very unstructured, and verbose. There appears to be a rule for
every single div (2) and other element on the page. It most certainly does
not adhere to the KISS principle. It would be a pain in the arse to
maintain.

(2)

Div soup. Why do we need a separate div for each paragraph on the page? Once
again a pain in the arse to maintain. This design needs exactly three divs,
one for the italic stuff, one for the nav bar and one for the remainder of
the content. Ok, perhaps another one to position that apple tree background
at the bottom right. A rough count in the source reveals the page uses 22
divs. Way over the top.

Just about any of the hundreds of example of two column layout out there are
equally good, if not better. Even I could knock up something better in 10
minutes or so.

I would say that this site is an example of how _not_ to use CSS.

Cheers
Richard.
 
T

Toby A Inkster

The is
no alt text for these pictures so non visual browsers will see nothing.

There are no pictures. It is pure CSS.

For example, visit my page (URL below) in Moz or Opera. Look at the
smiley. Now view the source and see if you can find a single <img/> or
This design needs exactly three divs,
one for the italic stuff, one for the nav bar and one for the remainder of
the content.

You've clearly not looked at the alternative style sheets then.
 
K

kchayka

rf said:
The CSS may be sort of OK (1) but the accessibility problems with the site
are huge.

AIUI, the purpose of this site is just to show what _can_ be done with
just CSS, like Eric Meyer's css/edge. I don't think it was intended as
an example of either usability or accessibility, but of separating style
from content. The stylesheets were done by many different people. Some
of them may scale and degrade fairly well, others not so well.

Look at it in the right light and it's a tad more impressive.
 
R

rf

kchayka said:
AIUI, the purpose of this site is just to show what _can_ be done with
just CSS, like Eric Meyer's css/edge. I don't think it was intended as
an example of either usability or accessibility, but of separating style
from content. The stylesheets were done by many different people. Some
of them may scale and degrade fairly well, others not so well.

Look at it in the right light and it's a tad more impressive.

OK, page by page:

opening page - font not resizable, grey text on white, grey text on light
brown.

gothica - font resizable but falls into the IE percentage bug where when I
make my font larger or smaller it is drastically larger or smaller. The
colours are better.

zunflower - font not resizable - grey text on off white (navigation), grey
text on light grey.

mnemonic - body text resizable, menu bar text *not*. menubar text white and
grey on yellow-green, unreadable and unresizable. The top navigation falls
out of its background at larger font sizes.

not so minimal - font not resizable. light grey text on white in the nav
bar. nav bar text miniscule.

fleur de ... - font in top section not resizable. font elsewhere resizable
but far too small. grey text on light blue with a cross hatch in the nav
bar.

veridity - font not resizable, dark grey text on blue/green.

calm and smooth - at last, something I can read clearly.

friendly beaches - white text on light grey in the nav bar.

5 out of the 9 do not allow for changing the font size in the major browser.

7 out of 9 have colour combinations that are difficult for me to read.

9 out of 9 (including the ones where the font size is changeable) have the
default font size set to something quite smaller than the viewers default.

1 out of 9 I had no trouble looking at.

I still say that this site is a perfect example of what _not_ to do to your
viewer if you want a usable and accessible site. Seperating style from
content is a fine thing to do but the style must be usable in the first
instance. This site may just become something that people will learn from.
What will they be learning? Fixed font size. Bad colour combinations.
Artistic considerations in preferance to easily viewable content.

The errors I see are so stupidly easy to fix as well. Use em instead of px.
Use brighter, more disparate colours. Make the content stand out, not hide
in the background.

The concept is great, the execution is sadly lacking.

Cheers
Richard.
 
T

Toby A Inkster

The text "select a design" is not text. It is a picture of some text. The
fact that it may be presented as a background and not an <img> is
irrelevant. It is a picture of some text and therefore is not resizable. An
accessibility problem.

That's not what I said: I said that there are no pictures, implying that
there can be no alt text. If you look at my quote, you'll see I snipped
out the bit about resizability -- this is because I was not replying to
that. No alt text is needed as the text is right there on the page.
What does an alternative style sheet have to do with the div soup on that
page?

Some of the alternative CSS files require more than the three DIVs you
mentioned.
 
R

rf

Toby A Inkster said:
That's not what I said: I said that there are no pictures, implying that
there can be no alt text. If you look at my quote, you'll see I snipped
out the bit about resizability -- this is because I was not replying to
that. No alt text is needed as the text is right there on the page.

Lets start again. Open the page, the original one, with the nice chinese
character at the top right. Just underneath this there is a nav bar. At the
very top of that nav bar is the almost illegible heading "select a design".
This is, to my eye, text (once I get out my magnifier). It is words that I
should be able to read. I should be able to resize this text to something
large enough that I can read, just like I can with all the other text on the
page (once I exercize my accessibility options to allow this).

But that heading is not plain text. It is a picture of some text. Here is
the pictures URL:

http://www.csszengarden.com/001/h3.gif

Clearly this is a picture. It is a picture of some text. If you don't
believe me then point your browser at it. As I have said before the fact
that the picture is a CSS background rather than an <img> is totally
irrelevant. It is a picture of some text that is on my canvas. If this
picture *was* an <img> then I could easily get to the required alt text
simply by hovering over the <img>. As it is a CSS background there can be no
alt text and therefore no help for me, who can not easily read the text in
that picture.

THAT is what I am complaining about. The use of pictures of text, rather
than the real thing. THAT is the accesibility issue I have against this
site.

Now, on closer inspection I see that a non-css browser will actually be able
to see that heading because it is included in I presume a hidden <h3>.
However my CSS enabled browser displays the picture of the text. I cannot
resize it so therefore I cannot see it.

This has been shown by my prior mistake in not looking at each of the links
in that nav bar. I did not see the heading on the nav bar because it is a
picture of some text and therefore not resizable and is so bloody small and
illegible that I just did not see it at first. I thought it was some wavy
line decoration. When I squinted I realized it was text but I didn't bother
to get out my magnifier to read it. So, I did not fully understand what the
nav bar was for. Remember, first impressions count. My first impression was
"Hmmm, a nav bar, I'll get to it later, if I see the need". In retrospect
that heading text was very important. Far too important to totally hide away
in the background as a gif. I initially missed the whole point of the page,
just because of that picture of some text.

Cheers
Richard.
 
D

Davmagic com

From:
(e-mail address removed)
(Dexter J)
Putting aside the greater debate for a
moment - would you mind taking a peak
at my site below using that browser if you
have it installed?

Your page views "OK" on the MSN-TV Plus Browser (version 2.8)... but
just off the top of my head, the image links at the left by the "stick
man" do not work, they do not even click at all...

Try downloading the MSN-TV Viewer (link below) and see for yourself...

Web Design-Magic-Painting-Junking-Games
INFO 2000 For You
http://www.davmagic.com
See how your webpages look on a MSN-TV Browser:
Download it here: http://developer.msntv.com/Tools/msntvvwr.asp
 
C

Chris Harris

For example, visit my page (URL below) in Moz or Opera. Look at the
smiley. Now view the source and see if you can find a single <img/> or
<object/> element.
No smiley in Mozilla 1.3.1 on M$ XP or 1.4 on Linux, only the text :) ;
it's there with Opera on Linux though.

CJH
 
C

Christine Forber

rf said:
The concept is great, the execution is sadly lacking.

As a concept, I found it fascinating. Since you feel that the execution
is less than ideal, do you know of any other examples like this of what
can be done with CSS?
 
D

Dexter J

Salutations:

Davmagic said:
Your page views "OK" on the MSN-TV Plus Browser (version 2.8)... but
just off the top of my head, the image links at the left by the "stick
man" do not work, they do not even click at all...

Try downloading the MSN-TV Viewer (link below) and see for yourself...

Web Design-Magic-Painting-Junking-Games
INFO 2000 For You
http://www.davmagic.com
See how your webpages look on a MSN-TV Browser:
Download it here: http://developer.msntv.com/Tools/msntvvwr.asp

Thank you very much for the test.. Apparently MSN-TV does indeed see Flash
4 - but may block .RAM RealAudio.. The links on the left by 'stickmann' are
ActionScript RealAudio stream triggers..

I saw a couple of MSN-TV IP's in my logs this morning - Mozilla/4.0
WebTV/2.6 (compatible; MSIE 4.0) - were you able to use the menu on the top
right (which are standard page links) and were you able to use the search
field under stickmann? If the button under it doesn't, you should be able
to use a carriage return to launch (try putting in 'jazz')..

Again - sorry to bug you - last request for info..

Your test report is very much appreciated as I've got to keep the install
base in this test machine as close to OEM as possible and another browser
install will mean yet another afternoon romp through the Registry file/win
directory to clean it out later.. As I said, very much appreciate your time
in this if I could bother you to take another run at it.. :) ..

--

J Dexter - webmaster - http://www.dexterdyne.org/
all tunes - no cookies no subscription no weather no ads
no news no phone in - RealAudio 8+ Required - all the Time

Radio Free Dexterdyne Top Tune o'be-do-da-day
Isley Brothers - It's Your Thing
http://www.dexterdyne.org/888/169.RAM
 
G

Geoff Ball

Alt content is not supposed to be shown on hovering.

But it is shown on IE, which is what he uses.

I'm not saying it *should* be shown, but IE decided to pup-op alt text, and
some users may use it to their benefit (as Richard does).

Regards,
Geoff
 
T

Toby A Inkster

No smiley in Mozilla 1.3.1 on M$ XP or 1.4 on Linux, only the text :) ;
it's there with Opera on Linux though.

Really? I'm surprised. I was sure that Moz supported the CSS 3 definition
of "content:"...
 
I

Isofarro

rf said:
On attempting to enlarge my font
size I find that every bit of text has font size either in pt or px, this
making it unresizable in IE

Accessibility is about removing the obstructions that a visitor cannot
reasonably remove themselves. A bug or mis-implementation in Internet
Explorer isn't one of those obstructions.

Your point on accessibility is valid - and one I do agree with. But a bug in
IE isn't an accessibility problem. Most standards compliant browsers allow
for the resizing of pixel specified text - as specified in the CSS
specification. IE choses not to support this. There are alternative
browsers available on the one platform Internet Explorer currently exists
on, and its reasonable for a visitor to use a browser that supports web
standards and replacing IE if needed.

Absolutely argue against the use of pt for font-size, but not px under the
excuse that IE fails to resize. That isn't accessibility, its
browser-specific kludges.
 
A

Andy Mabbett

rf said:
I respectively beg to differ. Greatly.


OK. How does that site *not* prove that CSS- based, layout- table- free,
valid and accessible sites can look attractive.
 
R

rf

Andy Mabbett said:
OK. How does that site *not* prove that CSS- based, layout- table- free,
valid and accessible sites can look attractive.

Oh my. I give up.

Obviously you have not read the rest of this thread.

Cheers
Richard.
 
R

rf

Christine Forber said:
As a concept, I found it fascinating. Since you feel that the execution
is less than ideal, do you know of any other examples like this of what
can be done with CSS?

The only other one I have come across is http://www.w3.org/Style/CSS/ which
is not nearly as good (in concept that is) as the site under consideration.
You also need to use a browser able to see the alternate stylesheets, like
mozilla.

However, the w3 site is, in all its incarnations (well most of them)
readable.

Cheers
Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top