IE Matching Wrong Rule in Style Sheet

  • Thread starter Thread starter Tester
  • Start date Start date
T

Tester

Has anyone had this problem or know of a fix?

This code should result in a transparent Input box (i.e., should use the
'input.Info.Normal' rule) but instead it produces a while box (matching the
input.flat.Normal rule.) When I comment out the input.flat.Normal rule the
box displays as it should.
So the question is, why is IE matching on the wrong rule?
Also, when I change the order of the rules (flat before Info) it matches
correctly. But why is this input matching on the flat rule at all?

from html --
<input class="Info Normal" type=text size=8>

from external style sheet --
input.Info.Normal {
background-color: transparent;
}
input.flat.Normal {
background-color: #ffffff;
}
 
Try using
<input class="info.Normal" type=text size=8>
This should work
Thanks
Praveen [MSFT]
 
Hmm. Thanks for the advice Praveen! But that didn't work for IE or NS! I'd
be worried if it did actually -- that's an even further departure from the
CSS2 standards.

According to W3C, input.Info.Normal should match any input elements with
BOTH 'Info' AND 'Normal' in its space separated value for the class
attribute. Here is the complete (but short) html that works as per standard
in NS7.2 and Firefox0.8 but not in IE6.

Note the second input element doesn't match in any of the browsers.

Tester

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">

<head>
<style type="text/css">
input.Info.Normal {
background-color: transparent;
}

input.flat.Normal {
background-color: #ffffff;
}
</style>
</head>
<body style="background-color: #404040">
<input type=text class="Info Normal" size=10><br>
<input type=text class="Info.Normal" size=10>
</body>
</html>



Praveenm said:
Try using
<input class="info.Normal" type=text size=8>
This should work
Thanks
Praveen [MSFT]

Tester said:
Has anyone had this problem or know of a fix?

This code should result in a transparent Input box (i.e., should use the
'input.Info.Normal' rule) but instead it produces a while box (matching
the
input.flat.Normal rule.) When I comment out the input.flat.Normal rule
the
box displays as it should.
So the question is, why is IE matching on the wrong rule?
Also, when I change the order of the rules (flat before Info) it matches
correctly. But why is this input matching on the flat rule at all?

from html --
<input class="Info Normal" type=text size=8>

from external style sheet --
input.Info.Normal {
background-color: transparent;
}
input.flat.Normal {
background-color: #ffffff;
}
Click to expand...
Click to expand...
 
"Ahhhh! In the back of the throat!"

I finally figured it out! IE is only CSS1 compliant NOT CSS2! Under CSS1 you
can only specify one selector per element in a rule. So the E.s1.s2 only
matches on the s2! Very restrictive!

I don't know if the other browsers are CSS2 compliant but they at least
handle multi-selector!

Catch up Microsoft!

tester



Praveenm said:
Try using
<input class="info.Normal" type=text size=8>
This should work
Thanks
Praveen [MSFT]

Tester said:
Has anyone had this problem or know of a fix?

This code should result in a transparent Input box (i.e., should use the
'input.Info.Normal' rule) but instead it produces a while box (matching
the
input.flat.Normal rule.) When I comment out the input.flat.Normal rule
the
box displays as it should.
So the question is, why is IE matching on the wrong rule?
Also, when I change the order of the rules (flat before Info) it matches
correctly. But why is this input matching on the flat rule at all?

from html --
<input class="Info Normal" type=text size=8>

from external style sheet --
input.Info.Normal {
background-color: transparent;
}
input.flat.Normal {
background-color: #ffffff;
}
Click to expand...
Click to expand...
 
you should brush up on your css as well... read up on sub-classing. try:

<style type="text/css">
<!--
..Normal input.Info {
background-color: transparent;
}
..Normal input.flat {
background-color: #ffffff;
}
-->
</style>

<span class="Normal"><input class="Info" type="text" size="8"></span>
<span class="flat"><input class="Info" type="text" size="8"></span>

Tester said:
"Ahhhh! In the back of the throat!"

I finally figured it out! IE is only CSS1 compliant NOT CSS2! Under CSS1 you
can only specify one selector per element in a rule. So the E.s1.s2 only
matches on the s2! Very restrictive!

I don't know if the other browsers are CSS2 compliant but they at least
handle multi-selector!

Catch up Microsoft!

tester



Praveenm said:
Try using
<input class="info.Normal" type=text size=8>
This should work
Thanks
Praveen [MSFT]

Tester said:
Has anyone had this problem or know of a fix?

This code should result in a transparent Input box (i.e., should use the
'input.Info.Normal' rule) but instead it produces a while box (matching
the
input.flat.Normal rule.) When I comment out the input.flat.Normal rule
the
box displays as it should.
So the question is, why is IE matching on the wrong rule?
Also, when I change the order of the rules (flat before Info) it matches
correctly. But why is this input matching on the flat rule at all?

from html --
<input class="Info Normal" type=text size=8>

from external style sheet --
input.Info.Normal {
background-color: transparent;
}
input.flat.Normal {
background-color: #ffffff;
}
Click to expand...
Click to expand...
Click to expand...
 
Back
Top