16MarMinor CSS mystery in IE solved

The things I have to go through for coding my CSS by hand.

For months I’ve wondered why simple CSS code like the following didn’t work in IE:

input.btnpost {
  background:#eee url(”cubulous4/btns/btnpost.gif”)top left no-repeat;
}

The above code works fine in Firefox, but in Internet Explorer, the background image will not render. The background color however, will. Did you spot the mistake?

Here’s how it should’ve been done:

input.btnpost {
  background:#eee url(”cubulous4/btns/btnpost.gif”) top left no-repeat;
}

What? Still didn’t spot it? It’s actually the space between the ‘btnpost.gif”)’ and ‘top’ that makes all the difference. IE requires it; Firefox does not. D’OH!!


  1. 1 Matt17 Mar 2006


    Not a big deal, but just FYI - It is recommended that you don’t use quotes (single or double) when referencing files in your stylesheet. They are not required.

    I don’t have a referencing URL regarding this issue, but I’m sure if you do a simple google search you’ll find some articles on it. I believe I read something about it on w3.org, or perhaps w3schools.com.

  2. 2 TCorp17 Mar 2006


    meh…you’re right when it comes to background images (i edited it from the post).

    But mind you, @import(”"); is still the most accepted method of importing external CSS resources.

    See:
    http://w3development.de/css/assigning_external_css/style_import.html

  3. 3 Matt17 Mar 2006


    Interesting. From what I’ve read, the most effective way to import stylesheets and hide them from undesired older browsers is to use @import “style.css”; with no parenthesis.

    Heh, and actually according to the chart, there doesn’t seem to be any difference between our prefered methods.

  4. 4 TCorp17 Mar 2006


    Update: Turns out I was right to begin with:
    http://www.w3.org/TR/REC-CSS2/colors.html#background-properties

    WITH double quotes is how the W3C defines it.

  5. 5 Matt17 Mar 2006


    Hrmm…

    Interesting how in their code examples they’re using selectors in uppercase format (H1, P, BODY, etc.), which is non-standard. Kinda invalidates their examples that demonstrate using quotes for background-image: url(), doesn’t it? ;)

  6. 6 TCorp17 Mar 2006


    I beg to differ. It’s the CSS that’s the subject of the page, not the HTML version they use to demonstrate it.

Leave a Reply




flickr stream

26022008075 california ufo / drone (picture taken by police) 03092007217-001 california ufo / drone (raw picture) 4 California ufo / drone 3 california ufo / drone (raw picture) 2 Terrometer California ufo / drone 4

Random Gallery Image

The Nile river A Watch Crazy camera guys Payam Jumping Close-up of a shoe Toronto Skyline with Tanin in the foreground Side of Bus The old house

Most Recent

Bush no-country-mcain.jpg lego-mohammed.jpg mbaside.jpg

Calendar

August 2008
M T W T F S S
« Jul «-»  
 123
45678910
11121314151617
18192021222324
25262728293031