Fun with IE7

Okay, this will be a super-boring post for those uninterested in making stuff work on IE7 (that's all of us, then).

On the left is a rather dull little form for entering an address. It is a cutdown version of an Asp.Net detailsView, which is why it is in table format (don't shoot me!). I set the size of the input field to 90% of available space, otherwise I get a short field. The whole table sits in a half-width column (may or may not be significant).

This is IE7's take on the same code (Opera and Chrome both looked like Firefox). As you can see, the font is too big, there are no borders and the input fields are shoved way over to the right. Aaargh! I'm trying to create a Content Management System and yes, most folks use IE7.

Inside my <!--[if IE]> brackets I had to make several changes.

• font-size:small;
• .detailView td, .detailView th, .detailView{
              border:1px solid black;
          }
• input{
              width:20em;
          }
• .commandRow input{
              width:80px;
          }

The font-size, well, whatever works. The border had to be set manually because, at detailView is an asp widget, I get little choice over the border (which is set to "1" in any case). I set the input to 20em, which is crap, because it doesn't fill the space. If I make it any bigger, it crowds out the label. And of course, I had to reset the size of the command buttons, or they'd be 20 ems as well.

This is the result. It's ok but not gorgeous. And it is only for adding things to a database.

Annoying, eh?