dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS coding problem with IE

  1. #1
    Join Date
    Jul 2006
    Posts
    3

    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.

  2. #2
    Join Date
    Mar 2006
    Posts
    227
    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.

  3. #3
    Join Date
    Jul 2006
    Posts
    3
    Worked like a charm!

    Thanks a lot, nataliemac

  4. #4
    Join Date
    Mar 2006
    Posts
    227
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles