CSS in IE6 and IE7 not rendering properly

Question

My problem is the website i maintain displays fine on firefox ,chrome and IE8 but a mess when viewed with IE7 and IE6. I ran out of possible fixes i can come up with and its mostly trial and error. Im thinking of loading a separate stylesheet for IE6 and IE7 but i must solve this first.

Here is the page :

Search for a keyword

Answer 1

1. Child selector doesn't work in IE6 . For .searchDiv > h2 . Change the selector to .searchDiv h2 .
2. Negative margins get cut off , apply position:relative to .searchDiv .rightColumn
3. You assign width:100%; to a form which inherits padding:20px; . Remove the padding on that form.

Answer 2

The issue could be because of margin and padding. IE renders margin and padding differently as compared to firefox and chrome. As you said, one of the solution could be to create another css file for ie.

Answer 3

You just found one of the reason so many people hates MSIE and why MSIE6 must die !

You can use conditional comments to detect the MSIE version and include another stylesheet. Or you can ask your users to install the Google Chrome Frame ! (they still use their stone-aged browser but get the latest features!)

Answer 4

See What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).

Some excellent tips so you can get a uniform look & usage in all browsers.

Answer 5

It looks like your h2 might be causing problems. If I remember correctly IE doesn't support the child selector that you are using with your h2 code in your css. Look into using a different selector here: (line 334 of your CSS file: http://stagingbims.desaldata.com/index.php/search/css/desaldata )

.searchDiv > h2

Maybe just use this:

.searchDiv h2