Hi all,
I seem to have come accross a strange problem in gecko and webkit browsers,
and I cannot find info on this anywhere, so I'm turning to your infinit
wisdom :)
I'm using an svg on a background, and providing a fallback png element for
older browsers.
(I'm treating ie versions lower then 9 via conditional comments for extra
css files).
Since svg background support is way better then rounded corners,
(kind of cutting corners to save code)
the fallback .png has the top right corder already rounded.
The background images are subtle overlayed gradients,
so I prefere to see them cut in older browsers then to see them stretched.
But for newer browsers I need the svg backgrounds to behave accordingly.
Also, opera mini reports support for background features that doesn't
support,
so I'm opting to ignore modernizr classes on background features.
Because I need the background to be sized auto for the pngs and 100% 100%
for the svgs,
in subsequent rules, I need to use the shorthand definition, and thats
where it breaks:
I'm doing:
#encontra, #minuto, #estendal {background:#bab9a9;}
for good practice sake,
#minuto {background:url(img/bgtopnavPlanoMedio.png) right top no-repeat;}
for less capable browsers
and trying options on the svg.
It seams I cannot use background size if I give no position
(the spec is kind of ambiguos on it, it does not work with nothing before
the slash,
and giving no slash with percentages or auto is interpreted as position)
so if I do:
#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}
Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;
When I say notably for firefox, it is because they have the shorthand
defined at
https://developer.mozilla.org/en/CSS/background
as:
[ <background-image> || <background-position> [ / <background-size> ]? ||
<background-repeat> || <background-attachment> || <background-clip> ]
so it really should work!
Also, I can find tons of css shorthand background exemples googling for it,
but nothing that includes a background size with only one background.
I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?
Sorry for the extension, I cannot provide an url for the time being.
Thank you,
isabel
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
