Using input[type="text"] with other selectors

Question

Hi,

I have a class defined for text fields. I am using input[type="text"] for all browsers but IE6, and using jQuery to add a ".txt" class name for IE6. The problem here is when I define both selectors on the same line, IE6 does not reconize the ".txt" class. But if I define each selector seperately with the same rule it works.

This does not work in IE6

input[type="text"], .txt{ float:left; padding:0 0 0 2px; width:233px; height:24px; border:2px solid #bbb; color:#616161; font-family:Arial, Helvetica, sans-serif; font-size:1em; }

This does work in IE6

input[type="text"]{ float:left; padding:0 0 0 2px; width:233px; height:24px; border:2px solid #bbb; color:#616161; font-family:Arial, Helvetica, sans-serif; font-size:1em; }
.txt{ float:left; padding:0 0 0 2px; width:233px; height:24px; border:2px solid #bbb; color:#616161; font-family:Arial, Helvetica, sans-serif; font-size:1em; }

How can I define one single rule for both selectors on the same line?

Thx!

Answer 1

IE6 stops when it hits the input[type="text"] which it doesn't recognize. Unfortunately you'll have to do it separately.

Answer 2

You could use conditional comments to load a special stylesheet instead. e.g.

<!--[if lt IE 7 ]> 
  <link media="all" type="text/css" rel="stylesheet" href="ie6.css"> 
<![endif]-->

This also allows you to solve a number of IE6-specific issues without messing up the rest of your stylesheets

See http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx and http://blogs.msdn.com/b/ie/archive/2005/10/12/480242.aspx

Answer 3

Since IE6 doesn't recognize or support the attribute selector, it skips that entire rule and moves on to the next one. You'll have to make it two separate rules. That or just rely on the txt class in both.

Answer 4

You might use http://jsfiddle.net/ for trying such things out.