/    Sign up×
Community /Pin to ProfileBookmark

CSS coding problem with IE

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.

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@nataliemacJul 10.2006 — 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.
Copy linkTweet thisAlerts:
@davidaviolaauthorJul 10.2006 — Worked like a charm!

Thanks a lot, nataliemac
Copy linkTweet thisAlerts:
@nataliemacJul 10.2006 — 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.
×

Success!

Help @davidaviola spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...