Re: [css-d] Style rule based upon ID and Class?

2005-05-15 Thread Uwe Kaiser 
Ingo Chao schrieb:
The problem with multiple classes in IE is that you have to avoid CSS 
multiple selectors with "common final matches" like

.explorer {background: gray; }
.mini { font-weight: normal;}
.full { font-weight: bold; }
.full.explorer {text-decoration:none; background: red;}
.mini.explorer {text-decoration:underline}

Mini
Full
Valid, and sometimes useful with more alternatives than shown here, but 
breaks IE: Now both the divs get underlining /and/ red.


MSIE/PC is reading the last class of multiple classes exclusively.
In order to use the example above, MSIE/PC is reading:
.explorer {background: gray; }
.mini { font-weight: normal;}
.full { font-weight: bold; }
.explorer {text-decoration:none; background: red;}
.explorer {text-decoration:underline}
Full

This circumstand we can use to show a message to MSIE/PC users only.
.standard {background: #FF0; border: 2px dotted red; padding: 5px 1em;}
.hidden.text {display: none;}
.text {display: block; color: #000;}


Congratulations, you are using browser XY!


regards,
Uwe Kaiser
<[EMAIL PROTECTED]>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

2005-05-15 Thread Ingo Chao 
Alys Morgan schrieb:
Or if neither of the sets of styles are unique, you can have:
Mini
Full
.. I know this works but I'm not sure what the general opinion is. Are 
there any problems with it? I have used it when I have several floats 
with most of the same styling, but some floated left and some floated 
right .
Perfectly valid. I'd like to add a word of caution, though.
--
css-d WIKI http://css-discuss.incutio.com/?page=MultipleClasses
The problem with multiple classes in IE is that you have to avoid CSS 
multiple selectors with "common final matches" like

.explorer {background: gray; }
.mini { font-weight: normal;}
.full { font-weight: bold; }
.full.explorer {text-decoration:none; background: red;}
.mini.explorer {text-decoration:underline}

Mini
Full
Valid, and sometimes useful with more alternatives than shown here, but 
breaks IE: Now both the divs get underlining /and/ red.
--

Another IE6 bug can be seen when multiple css/html files are combined.
#sidebar {background: maroon; }
#sidebar.head1 { color: white;} /* A */
#sidebar.head2 { color: blue;}  /* B */
#sidebar.head1 {text-decoration: underline; } /* C */
I think of two pages: both load the CSS file/files above. Both show this 
sidebar:

Lorem

(The html comment is here to show that the bug is /not/ related to using 
the same unique id for two divs at one page. Alternate the comments to 
see for testing, or just remove the comment.)

Did I really expect to get "Lorem" white + underlined and "ipsum" blue?
--
I copy the rule A into C:
#sidebar {background: maroon; }
#sidebar.head2 { color: blue;}  /* B */
#sidebar.head1 {text-decoration: underline; color: white;} /* C + A */
The second page, "ipsum" text is blue ... finally, he, he.
But the first page, "Lorem" has ... no color, no underline?  This is one 
of these frustrating moments.

I think, for matching id="sidebar" class="head1", IE searches at 
#sidebar.head2 at first and fails. Now it blocks: #sidebar. 
and will not be able to look further at #sidebar.head1
__

The bottom line for me is: I can use multiple classes/id+classes as I 
like it, and I like it, but I don't use multiple selector rules in IE. 
It just looks like as if they'd work in IE6, but they do not, imho.

Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

2005-05-15 Thread Alys Morgan 

Maybe a dumb question, but is it possible and if so, what would it 
look like
to write a style rule that is based upon the combination of an id and 
class
value on one tag?

I do it all the time, but I think you have it a little backwards. 
Since you shouldn't repeat ids (really, just don't), you should 
include the common features in classes, then the unique styles in the id.

So:
Mini
Full
Or if neither of the sets of styles are unique, you can have:
Mini
Full
Then you can have several divs with explorer and mini styles and several 
with explorer and full styles, without using an id more than once.

I know this works but I'm not sure what the general opinion is. Are 
there any problems with it? I have used it when I have several floats 
with most of the same styling, but some floated left and some floated 
right .

Thanks,
Alys
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

2005-05-14 Thread jack fredricks 
as the others have said, but keep this in mind;

the ID selector has higher specificity. This means that if you have
these two conflicting rules;

#explorer {border:1px RED solid;}

and

.explorer {border:1px BLUE solid;}

the border of the div will be RED.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

2005-05-14 Thread Steve Clason 
On 5/14/2005 3:05 PM Jeff Chastain wrote:
Maybe a dumb question, but is it possible and if so, what would it look like
to write a style rule that is based upon the combination of an id and class
value on one tag?  For example, I would like to see the following two tags
styled differently ...
 

 

 
Is this possible, or do I just need to skip the ID and make two different
classes (miniExplorer and fullExplorer)?  I would like to do it as above so
that some shared styles could be done based upon the ID and the differences
between the two divs could be done based upon the class.
I do it all the time, but I think you have it a little backwards. Since 
you shouldn't repeat ids (really, just don't), you should include the 
common features in classes, then the unique styles in the id.

So:
Mini
Full
and
.explorer{
  border: 1px solid #000;
  background-color: #ccc;
  color: #000
  padding 1ex;
}
then
#mini{
  font-weight: normal;
}
#full{
  font-weight: bold;
Both "Mini" and "Full" will be black text on a gray background 
surrounded by a 1 px solid black border. "Mini" will be normal--"Full" 
will be bold.

--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

2005-05-14 Thread Gunlaug Sørtun 
Jeff Chastain wrote:


... I would like to do it as above so that some shared styles could
be done based upon the ID and the differences between the two divs
could be done based upon the class.
It will work just fine as you have described it.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/