CSS coding problem with IE

[davidaviola]

Hello,

I have an html file with an external CSS style sheet. I was having trouble displaying some background images in the latest versions of Firefox, so I've added a "background: inherit;" command in some lines of my code.

The problem is that IE, that was displaying the site perfectly before the changes, has ceased to display the backgroud images properly. The only change that I have made in the CSS style sheet was adding that code.

The code now looks like this:

body { background-color: #FFFFFF; margin:0px;}

#menuSystem { position: absolute; left: -2px; top: 143px; z-index: 1;}
#menuSystem table { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border:none;}
#menuSystem table td { background: inherit; padding:7px; }

#mainTable table { border:none; }
#mainTable th { background: inherit; background-color: #FFFFFF; padding-left: 3px; padding-right: 3px; padding-top: 0px; width:200; text-align:left; color:#B6B5B5}
#mainTable table td { background: inherit; background-color: #FFFFFF; padding-left: 3px; padding-right: 3px; text-align:left;}

#mainTable a { color: #B6B5B5 ; padding-left: 10px; padding-right: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none }
#mainTable a:link { color: #B6B5B5 ; padding-left: 10px; padding-right: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none }
#mainTable a:hover { color: #CC243C ; padding-left: 10px; padding-right: 3px; background-color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none; }

.crono1 {background-image: url('DMEImages/crono1.gif'); background-repeat: no-repeat}
.crono2 {background-image: url('DMEImages/crono2.gif'); background-repeat: no-repeat}

.abertura1 {background-image: url('DMEImages/abertura1.gif'); background-repeat: no-repeat}
.abertura2 {background-image: url('DMEImages/abertura2.gif'); background-repeat: no-repeat}

.biblio1 {background-image: url('DMEImages/biblio1.gif'); background-repeat: no-repeat}
.biblio2 {background-image: url('DMEImages/biblio2.gif'); background-repeat: no-repeat}

.projetos1 {background-image: url('DMEImages/projetos1.gif'); background-repeat: no-repeat}
.projetos2 {background-image: url('DMEImages/projetos2.gif'); background-repeat: no-repeat}

.noticias1 {background-image: url('DMEImages/noticias1.gif'); background-repeat: no-repeat}
.noticias2 {background-image: url('DMEImages/noticias2.gif'); background-repeat: no-repeat}

.pesquisa1 {background-image: url('DMEImages/pesquisa1.gif'); background-repeat: no-repeat}
.pesquisa2 {background-image: url('DMEImages/pesquisa2.gif'); background-repeat: no-repeat}

Does anyone have any idea how to make this compatible to both Firefox and IE?

Thank you very much for the attention.

[nataliemac]

I've come to the conclusion (this is for me personally, anyway) that the best way to handle the differences in IE and FF is to code for FF, nice clean, standards-compliant CSS - then attach a conditional stylesheet for IE with workarounds for all the crazy stuff that IE can't handle.

Some great information about this:
http://virtuelvis.com/archives/2004/02/css-ie-only

Just my 2 cents.

[davidaviola]

Worked like a charm!

Thanks a lot, nataliemac

[nataliemac]

You are welcome!

I just switched to this method and it saves me hours of headaches in trying to get the same CSS to work in IE and FF.

And it keeps my CSS standards-compliant and hack-free.