using !important to fix some IE bugs

Discussion in 'CSS' started by veckd, Sep 8, 2007.

  1. #1
    I recently blogged about this, but I figured I'd share my findings with everyone ;)
    The first is a .png fix. Technically, it doesn’t fix .png files, but loads a gif if the browser viewing the site is Internet Explorer.
    Here is the code:
    
    background:url(image.png) no-repeat !important;
    background:url(image.gif) no-repeat;
    Code (markup):
    The next bit of code fixes the min-height property in IE:
    
    min-height:450px;
    height:auto !important;
    height:450px;
    
    Code (markup):

     
    veckd, Sep 8, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    This "hack" is nothing new, but you should NOT be using hacks like !important to feed IE6 different values. This is a very "ugly" way of doing things that should be left to a seperate stylesheet for IE fed by conditional comments (and it makes your stylesheet a pain to read).

    And what if your PNG is very graphical, and the amount of color is too much for a GIF to handle? Very colorful and transparent, you would need to use the filter or the HTC instead of feed a GIF in most cases.
     
    soulscratch, Sep 8, 2007 IP
  3. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hmm im not seeing anything ugly about it. It looks EXACTLY the same now in Safari 2 and up, Opera 9, IE 6 and up, Firefox 1.5 +

    And filters aren't good to use. They don't validate.
     
    veckd, Sep 8, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    You should not bloat your code JUST to feed ONE browser a different value. You should code according to the specifications, say that any rules with !important (with the same selector) should override normal rules (which IE6 fvcks up on).

    I guess you've never done any heavily graphical sites before, because if you did then you'd know a GIF will not always be the fix, and you have to resort to fixing PNG's in IE with the filter property one way or another (whether it be via Conditional Comments and filter or the behavior property and some HTC).
     
    soulscratch, Sep 8, 2007 IP
  5. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well if Microsoft decided to maybe get better programmers, we wouldn't in this situation. As they take 5-6 years to output a new out of date version, which hardly fixes anything and gives web developers like us more crap to deal with.

    IE is something real and has to be dealt with one way or another. Simply saying it 'looks ugly' won't solve the problem. A solution or hack needs to be implemented, otherwise your sacrificing good code for a crappy looking website. I don't know about you, but I would rather have crappy code then a crappy looking website.

    And what's the big deal if the filter doesn't validate? Are there validation police going around killing people using invalid code? As long as the end result, which is appearing correctly on all known browsers if fine, then what's the problem?
     
    GWiz, Sep 8, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    The solution is not to pollute your stylesheet which should go by the specs, with proprietary junk and unnecessary hacks.

    "Crappy Looking" depends solely on the DESIGN. If you're talking about layout/position problems then that won't happen if you're feeding an IE stylesheet with CC's. So you get both: good looking, hack+bug free code and (hopefully) a good looking (no layout problems due to not using hacks because you're overriding them in the IE stylesheet) site in IE.
     
    soulscratch, Sep 8, 2007 IP
  7. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I totally agree with what you said. And as far as validation I only included that because I wanted my site (that I was refering to) to be in css galleries. Some of which you need valid code to be in.
     
    veckd, Sep 9, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    Conditional comments + filter = valid.
     
    soulscratch, Sep 9, 2007 IP