[thelist] CSS: Why does this work?

Tony Crockford tonyc at boldfish.co.uk
Tue Apr 6 10:31:51 CDT 2004


At 14:28 on Tuesday, 06 Apr 2004, Rob Smith wrote:

> Good morning, afternoon, evening,
>
>   <style type="text/css">
>    * { font: 1em serif; }
>    .a { position: absolute; z-index: 2;  top: 10; left: 10; padding:  
> 10px;}
>    .b { z-index: 1;  top: 0; left: 0; width: 100%; height: 100%;   
> padding:
> 0px; margin: 0px; align:center;}
>   </style>

>
>   Why does the div work when you enter either "test a" or just "a" in the
> class field? As a random test, "cow a" works too.
>

because you are applying multiple classes to the div. of which one is  
class "a" the other is class "test" or "cow" (which don't exist,  
presumably) (e.g  
http://www.interfacethis.com/misc/css-test/multiclass.html)

It's so you can have things like

<div id="a" class="notes warning">
</div>  and

<div id="b" class="notes general">
</div>

  so that styles in class notes are applied to both and styles in warning  
and general to just one.

p.s. Looking at your style declarations suggests that perhaps you should  
be using id's rather than classes?
Absolute positioning assumes only one element occupies that position?

This would look like:

<style type="text/css">
  * { font: 1em serif; }
#a { position: absolute; z-index: 2;  top: 10; left: 10; padding: 10px;}
#b { z-index: 1;  top: 0; left: 0; width: 100%; height: 100%; padding:  
0px; margin: 0px; align:center;}
  </style>

with <div id="a"></div>  etc

hth


More information about the thelist mailing list