[thelist] CSS: Doctype and CSS problem

Gina Anderson gina at sitediva.com
Fri Oct 31 10:06:15 CST 2003


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 !




More information about the thelist mailing list