Hello all,
so i got the idea to play around with attribute selectors for a website...
wanted to serve up transparent png shadowed background images to new
browsers, and server up non-transparent gifs that i constructed to the rest.
rather than place a bunch of hacks on all of my elements that i use for
background images, i figured i'd use attribute selectors and make two rules
with different background images.
tried it out, didn't work, i couldn't figure it out, so i moved on. i
recently bought css mastery by andy budd and he mentions it a couple of
times in there, so i thought i'd go back to it and try to get it working,
but i haven't been able to as of yet.
i do not understand why this isn't working properly.
here's my code:
#accessBar {background-image: url(../images/shadow.gif); }
[id="accessBar"] {background-image: url(../images/shadows.png); }
this code won't work, i just get the gifs no matter what browser i use.
i tried using div[id="accessBar"] as well as body[id="accessBar"] and
neither work. i tried putting single and double quotes in the image urls (i
never use quotes, though perhaps it is the correct syntax and i should be, i
don't know...), also to no avail. i tried using classes instead of divs,
nothing.
the code andy budd lists in his book is
.intro {border-style: solid; }
[class="intro" {border-style: dotted; }
now, in css if you make two rules for the same element, like this:
#accessBar {background-image: url(../images/shadow.gif; }
#accessBar {background-image: url(../images/shadow.png; }
the browser will simply apply the the second one because it was the last one
in the css file.
i'm wondering if using attribute selectors they don't know what to do with
two different rules for the same element and the same attribute?
border-style: solid; and border-style: dotted; are two different values for
the attribute, but background-image: url(xxx.gif); and background-image:
url(xxx.png) are actually the same value for the attribute (the value would
be url?) and just different options applied to the value....?
i'm thoroughly confused as to why this won't work. i can't see anything in
the rules that would make my code improper. if it works for the
border-style code in css mastery, why shouldn't it work for serving up
different background images.
it better not be a result of my using capital letters in my naming
conventions, because that would just be equally ridiculous.
anyone have any thoughts? is this a common shortcoming of attribute
selectors in css 2.1?
am i just a complete fool and i'm doing something obviously wrong?
take care,
jonmarc
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
