CODEWITHSUNDEEP
cssinternet-explorer-7internet-explorer-6
r2b2
r2b2

Reputation: 1275

CSS in IE6 and IE7 not rendering properly

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

Upvotes: 1

Views: 346

Answers (5)

meder omuraliev
meder omuraliev

Reputation: 186562

  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.

Upvotes: 3

jeremysawesome
jeremysawesome

Reputation: 7254

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

Upvotes: 1

Srikar Appalaraju
Srikar Appalaraju

Reputation: 73608

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.

Upvotes: 1

some
some

Reputation: 49592

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!)

Upvotes: 1

codingbbq
codingbbq

Reputation: 4179

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.

Upvotes: 1

Related Questions