[thelist] CSS: Doctype and CSS problem

Fri Oct 31 07:44:41 CST 2003

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