As some of us know, Internet Explorer’s CSS support is less than perfect. Not strange considering the latest version is 3 years old. There are however a few pretty basic CSS properties that, if IE supported them, would make it easy to make our websites just a little bit more elegant.

1. Hover pseudo element on other elements than a. A cute visual effect ideal for making f.ex. menubuttons change color when you point your mouse at one. For menubuttons, the effect can be accomplished by making links behave like a block element and set width, height and/or padding on them. For other elements, Javascript is the only solution.
   a.hoverlink{
display:block;
}
   This technique is used on some menus on the Listamatic website. In my experience it’s one more source of browser inconsistencies. Javascript works too, but that’s far more work than what should be required.
2. Fixed positioning. Want to make a menu stay in the same place when you’re scrolling down a page? You could by setting a fixed position on
   your menu but IE just ignores it. A little Javascript can simulate this behaviour but it should have been as easy as
   #menu{
position: fixed;
top: 100px;
left: 10px;
}
3. min/max width/height. The CSS specification includes properties for setting minimum and maximum sizes on elements and they are supported by most modern browsers. The ideal solution for floating layouts that expands with the surfers browser window. With a min-width you can make sure that your layout doesn’t collapse completely on a small screen and max-width ensures that your textlines doesn’t become unreadably long.F.ex. :
   #page{
min-width: 600px;
max-width: 950px;
}

Until Microsoft releases IE7 in a few years time it looks like the only solution besides a browser revolution is Dean Edwards’ IE7.

This entry was posted on Friday, December 10th, 2004 at 8:04 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.