[css-d] style descendant elements of a table column in IE
I have a really big table that contains input fields in most cells. The
client wants some of these input fields to be a certain width, and
others to be larger. I can accomplish this in Firefox and other browsers
who understand child selectors easily like this:
#costsheet input {
width: 3em;
}
#costsheet td + td + td + td + td + td + td input {
width: 6em;
}
However, I can't figure out a way to assign widths to input elements in
specific columns in IE. I have set up col elements within the table and
assigned them all ids. This allows me to style the table cells within
that column in IE. However, I can't style any child elements of the
table cells, just the cells themselves. This doesn't work:
#col-default input {
width: 6em;
}
This is not surprising, since the input elements are not actually
descendants of the columns, and even IE appears to get this right. (By
the way, adding the td element into the selector doesn't help.) I'm
guessing there is no way to use descendant selectors to target input
elements in specific columns in IE.
So does anyone have any other ideas, short of putting a class on every
single input element that needs another width (that would be awful!)?
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] style descendant elements of a table column in IE
On 6/9/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
> I have a really big table that contains input fields in most cells. The
> client wants some of these input fields to be a certain width, and
> others to be larger. I can accomplish this in Firefox and other browsers
> who understand child selectors easily like this:
>
> #costsheet input {
> width: 3em;
> }
> #costsheet td + td + td + td + td + td + td input {
> width: 6em;
> }
>
> However, I can't figure out a way to assign widths to input elements in
> specific columns in IE. I have set up col elements within the table and
> assigned them all ids. This allows me to style the table cells within
> that column in IE. However, I can't style any child elements of the
> table cells, just the cells themselves.
Are the inputs the only elements in those cells? If not, are the cells
fixed-width also, and can you feel confident about the width of the
remaining content of those cells?
If so, you might be able to set the cell widths to, say, 4em and 7em,
respectively, and set the input widths to a percentage that, given a
cell width, will approximate the widths you've defined above.
To do the exact equivalent, you might consider having IE<6 get a
JavaScript that classes the specific inputs, with that class in an
IE<6-only stylesheet, so that IE<6 gets a crutch when IE7 wouldn't
need it.
HTH,
Michael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
