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!!
…
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.
…
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
…
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.
…
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.
…
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?
…
I beg to differ. It’s the CSS that’s the subject of the page, not the HTML version they use to demonstrate it.