[thelist] CSS: Doctype and CSS problem

Fri Oct 31 11:33:20 CST 2003

Gina,

Glad you got it working, first thing I tried was renaming the styles without
the leading number but that didn't seem to fix it for me! I have rechecked
yours and sure enough it works fine (time for some head scratching). The
only thing that worries me about either approach is that they are not very
accessible. Perhaps some variation of the [1] FIR principle would be better,
replacing the text "3.5 stars" with the desired image?

Simon

[1] http://www.alistapart.com/articles/fir/

----- Original Message ----- 
From: "Gina Anderson" <gina at sitediva.com>
To: <thelist at lists.evolt.org>
Sent: Friday, October 31, 2003 4:06 PM
Subject: RE: [thelist] CSS: Doctype and CSS problem

> Simon,
>
> Thanks for your reply :) Your email spurred the fix. The same technique
had
> been used with smilies, and those worked in Firebird and IE, but the class
> began with a letter. My star class began with the number. Bleary eyed as I
> was yesterday, I didn't see the difference. The only thing I could think
of
> was it was the doctype, as the smilies are used in a cgi generated page.
My
> pc validator only showed .3star as "will not be shown in some browsers"
> which I took to be, like, Netscape 4 or something. The online validator
said
> classes beginning with numbers were valid with CSS1 but in CSS2, they
needed
> escaping..course, that was after the fact :) I'll be using that validator
> from now on :-P I'm just getting into working with CSS past basic text
> formatting.
>
> The test pages work fine now, and I'll take a look at your solution, it
may
> work for me too.
>
> Thanks,
> Gina
>
> -----Original Message-----
> From: thelist-bounces at lists.evolt.org
> [mailto:thelist-bounces at lists.evolt.org]On Behalf Of Simon Perry
> Sent: Friday, October 31, 2003 8:45 AM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] CSS: Doctype and CSS problem
>
>
> ---- Original Message -----
> From: "Gina Anderson"
> > Okay I've run into something I'm clueless on.
> >
> > I'm putting together a movabletype site, and I've run into a Doctype
> > blocking a class for an image. I have transparent stars for a review,
with
> a
> > background image that fills in the stars depending on the class given to
> the
> > image. The following pages should give a rating of 3 1/2 stars. My test
> > pages are here:
> Hi Gina,
>
> I don't think that your problems are really down to doctype, your
"working"
> example only works in IE6 for me not Netscape, Mozilla 1.5 and Firebird or
> Opera. By removing the doctype from the last example you sent IE into
quirks
> mode with its broken box model etc. and as a side effect your background
> image showed. I also tried to validate both your [1] xhtml and [2]  CSS,
> both had validation errors. CSS does not like class names to start with a
> number, also your url(image.gif) should be written as url("image.gif"). I
> like the effect you are going for and the thinking behind your method but
I
> would bet that strict css does not alow a background image on an image
> element as the logic for that is a little fuzzy.
>
> On a more positve front you can achive the result you are after using css
> and just one image. I have setup an example [3]. The css is in the page,
I'm
> not that hot on comments but things should be self eveident. Thanks also
to
> [4] Petr Stanicek who's single image css rollover inspired this solution.
>
> Regards
>
> Simon
>
> [1] http://validator.w3.org/
> [2] http://jigsaw.w3.org/css-validator/
> [3] http://www.si-designs.co.uk/examples/star-test2.htm
> [4] http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
>
>
>
> >
> > http://ginaanderson.com/csstest/1.php
> > (background image doesn't show)
> >
> > http://ginaanderson.com/csstest/2.php
> > (background image doesn't show)
> >
> > http://ginaanderson.com/csstest/3.php
> > (background shows)
> >
> > What I took out in the successful page is:
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> >
> > What doctype should I use to get this working properly?
> >
> > Thanks,
> > Gina
> >
> > --
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> >
> >
>
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>
>
> -- 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>
>