Awesome use of CSS

Discussion in 'HTML' started by Andy Mabbett, Jul 17, 2003.

  1. Andy Mabbett

    Andy Mabbett Guest

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

    End of argument:

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

    --
    Andy Mabbett
    USA imprisons children without trial, at Guantanamo Bay:
    <http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
    <http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
    Andy Mabbett, Jul 17, 2003
    #1
    1. Advertising

  2. Andy Mabbett

    Davmagic com Guest

    >From:
    >
    >(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
    Davmagic com, Jul 17, 2003
    #2
    1. Advertising

  3. Andy Mabbett

    Mike Novak Guest

    "Davmagic com" <> wrote in message
    news:...
    >From:
    >
    >(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.
    Mike Novak, Jul 17, 2003
    #3
  4. Andy Mabbett

    Dexter J Guest

    Salutations:

    Mike Novak wrote:
    >
    > "Davmagic com" <> wrote in message
    > news:...
    > >From:
    > >
    > >(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!


    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
    Dexter J, Jul 18, 2003
    #4
  5. Andy Mabbett

    rf Guest

    "Andy Mabbett" <> wrote in message
    news:RjqhnAKhiuF$...
    > 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.
    rf, Jul 18, 2003
    #5
  6. On Thu, 17 Jul 2003 23:31:31 +0000, rf wrote:

    > 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
    <object/> element.

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

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
    Toby A Inkster, Jul 18, 2003
    #6
  7. Andy Mabbett

    kchayka Guest

    rf wrote:

    > "Andy Mabbett" <> wrote in message
    > news:RjqhnAKhiuF$...
    >> People often doubt that CSS- based, layout- table- free, valid and
    >> accessible sites can look attractive.
    >>
    >> <http://www.csszengarden.com/>

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

    --
    To email a reply, remove (dash)ns(dash). Mail sent to the ns
    address is automatically deleted and will not be read.
    kchayka, Jul 18, 2003
    #7
  8. Andy Mabbett

    rf Guest

    "kchayka" <> wrote in message
    news:3f177279$...
    > rf wrote:
    >
    > > "Andy Mabbett" <> wrote in message
    > > news:RjqhnAKhiuF$...
    > >> People often doubt that CSS- based, layout- table- free, valid and
    > >> accessible sites can look attractive.
    > >>
    > >> <http://www.csszengarden.com/>

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


    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.
    rf, Jul 18, 2003
    #8
  9. On Fri, 18 Jul 2003 00:40:56 +0000, rf wrote:

    > "Toby A Inkster" <> wrote in message
    > news:p...
    >> On Thu, 17 Jul 2003 23:31:31 +0000, rf wrote:
    >>
    >>> The is
    >>> no alt text for these pictures so non visual browsers will see nothing.

    >>
    >> There are no pictures. It is pure CSS.

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

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

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

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
    Toby A Inkster, Jul 18, 2003
    #9
  10. Andy Mabbett

    rf Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > On Fri, 18 Jul 2003 00:40:56 +0000, rf wrote:
    >
    > > "Toby A Inkster" <> wrote in message
    > > news:p...
    > >> On Thu, 17 Jul 2003 23:31:31 +0000, rf wrote:
    > >>
    > >>> The is
    > >>> no alt text for these pictures so non visual browsers will see

    nothing.
    > >>
    > >> There are no pictures. It is pure CSS.

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


    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.
    rf, Jul 18, 2003
    #10
  11. Andy Mabbett

    Davmagic com Guest

    >From:
    >
    >(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
    Davmagic com, Jul 18, 2003
    #11
  12. Andy Mabbett

    Chris Harris Guest

    >
    > 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
    Chris Harris, Jul 18, 2003
    #12
  13. rf wrote:
    >
    > 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?

    --
    Christine
    Christine Forber, Jul 18, 2003
    #13
  14. Andy Mabbett

    Dexter J Guest

    Salutations:

    Davmagic com wrote:
    >
    > >(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


    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
    Dexter J, Jul 18, 2003
    #14
  15. Andy Mabbett

    Geoff Ball Guest

    Headless <> wrote in alt.html:

    > "rf" <> wrote:


    >>If this
    >>picture *was* an <img> then I could easily get to the required alt text
    >>simply by hovering over the <img>.


    > 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

    --
    http://www.doctype.ca/
    http://www.allmyfaqs.com/faq.pl?Geoff_Ball
    Geoff Ball, Jul 18, 2003
    #15
  16. On Fri, 18 Jul 2003 08:55:37 -0400, Chris Harris wrote:

    > 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:"...

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
    Toby A Inkster, Jul 18, 2003
    #16
  17. Andy Mabbett

    Isofarro Guest

    rf wrote:

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



    --
    Iso.
    FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
    Recommended Hosting: http://www.affordablehost.com/
    Web Standards: http://www.webstandards.org/
    Isofarro, Jul 18, 2003
    #17
  18. Andy Mabbett

    Andy Mabbett Guest

    In message <nlGRa.1090$>, rf
    <> writes
    >> 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.



    OK. How does that site *not* prove that CSS- based, layout- table- free,
    valid and accessible sites can look attractive.
    --
    Andy Mabbett
    USA imprisons children without trial, at Guantanamo Bay:
    <http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
    <http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
    Andy Mabbett, Jul 19, 2003
    #18
  19. Andy Mabbett

    rf Guest

    "Andy Mabbett" <> wrote in message
    news:DvAlEiFGIRG$...
    > In message <nlGRa.1090$>, rf
    > <> writes
    > >> 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.

    >
    >
    > 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.
    rf, Jul 19, 2003
    #19
  20. Andy Mabbett

    rf Guest

    "Christine Forber" <> wrote in message
    news:eek:vSRa.107592$...
    > rf wrote:
    > >
    > > 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?


    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.
    rf, Jul 19, 2003
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. keith edward
    Replies:
    30
    Views:
    1,025
    Andrew Thompson
    Oct 6, 2004
  2. Davmagic com

    Re: Awesome use of CSS

    Davmagic com, Jul 18, 2003, in forum: HTML
    Replies:
    3
    Views:
    376
    Greg Schmidt
    Jul 18, 2003
  3. Anusha

    Awesome Directory

    Anusha, Apr 24, 2005, in forum: Python
    Replies:
    0
    Views:
    315
    Anusha
    Apr 24, 2005
  4. Ted Roche

    Awesome PySIG meeting last night

    Ted Roche, Apr 28, 2006, in forum: Python
    Replies:
    0
    Views:
    289
    Ted Roche
    Apr 28, 2006
  5. Brandon

    Awesome Python Information

    Brandon, Nov 5, 2006, in forum: Python
    Replies:
    6
    Views:
    297
    Tim Roberts
    Nov 8, 2006
Loading...

Share This Page