CSS + Radio Userland + IE6 = Not the best of combinations

| 1 Comment

I've still been trying to figure out over the last couple of days how I could change my blog theme templates to make better use of CSS. The theme I'm currently using is a "CSS-based" theme, but it's basically just a CSS wrapper around an ordinary web page built using tables. I thought I could make the blog itself almost totally free of tables (the one exception probably would have been the calendar in the upper right-hand corner). Unfortunately, the local web page interface (otherwise known as the "Desktop Website") doesn't play very well with CSS, due to 1) how Radio Userland creates those pages, and 2) CSS rendering issues in IE6.

The core of the problem is that a number of the web pages on the Desktop Website have html INPUT and TEXTAREA form fields. These fields, rendered within table cells, are hard-coded to be too wide within Radio Userland's programming (macros in the radio.root database).

No matter how the CSS is set up, the left and right columns never appear side by side, because IE6 expands the width of table cells (and its CSS container box) to accommodate the excessive width of the form fields (usually expanding it to the full width of the browser window). From what I've read, this is a long-standing rendering flaw in IE6.

It is possible to modify the macros directly to create the INPUT and TEXTAREA fields at shorter widths, to remove the tables from around them, or to embed a CSS class attribute within the form fields so that they may be more easily manipulated with CSS. This solution is a temporary one at best, as any changes made to the radio.root database macros will be overwritten by the next Radio Userland radio.root update.

It is also possible to use CSS in a broad manner to override to the hard-coded form field widths. With no class attributes on the form fields, it is impossible to target specific fields - it's an all-or-nothing affair. Also, text fields are rendered at the desired width, but submit buttons are widened to the same width as the text fields they are under.

IE6's lack of full support for CSS2 also precludes some other solutions that occurred to me. IE6 does not support the max-width property. IE6 also does not support the use of attribute selectors, so I cannot define styles for input[type="text"] and input[type="select"] to apply different styles to input text boxes and submit buttons.

The bottom line is that I don't think there is any "perfect" solution. Any such solution is dependent on action from Microsoft and/or Radio Userland, and I know better than to hold my breath waiting for any solutions from them in the near future. I'd still like to try to drastically reduce the number of tables used in my blog templates. Hopefully I can come up with something that works both on the blog as well as the Desktop Website.

1 Comment

Aaaargh I think I have hit the same IE6 bug. Been fighting with it for a couple of days. Basically not respecting - all other browsers I've tried, including IE5 on Mac, do what I expect. But IE6 wants to make its table cells bigger...