What's wrong with this multiple background CSS line. Firefox 4 ignores it (as it does when there's a syntax error).
background: rgba(255,0,0,0.2), url("static/menubg.jpg");
The solutions is using:
{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;}
instead of:
rgba(0, 0, 0, 0.5)
The syntax for background in CSS3 Backgrounds is [ <bg-layer> , ]* <final-bg-layer>, which means zero or more <bg-layer>s and then a single <final-bg-layer>, separated from each other by commas. See http://www.w3.org/TR/css3-background/#the-background
A <final-bg-layer> is defined as:
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2} ||
<'background-color'>
whereas a <bg-layer> is:
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2}
(both definitions at http://www.w3.org/TR/css3-background/#ltbg-layergt ).
Or in simple terms, only the lowest background layer can include a background color. So yes, your CSS is in fact a syntax error.
Oh, and looks like https://developer.mozilla.org/en/css/multiple_backgrounds had some errors in it. I've fixed them.
You should note that because gradients are treated as images it is acceptable and works to put in a gradient that has the same top and bottom colour.
It should be background: rgba(255,0,0,0.2) url("static/menubg.jpg"); without the ,
Oddly enough it seems to come down to the order of the parameters; the background-image then background-color:
background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);
Works (JS Fiddle demo), while background-color then background-image:
background: rgba(255,180,0,0.8), url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%;
Does not (JS Fiddle).
The above tested on Chromium 11 and Firefox 4, both on Ubuntu 11.04.
Edited to note that this does, indeed, come down to the order; as definitively answered in #Boris' answer.
Going off of Oscar's nice solution (thanks!), here is how I implemented it using SASS/Compass to automate browser prefixing
#include background( linear-gradient( color-stops(rgba(255, 66, 78, 0.25), rgba(255, 66, 78, 0.25)) ), image-url('/img/cardboard_flat.png') );
This supports Webkit, Firefox, but not IE9 (because of the gradient). Then I remembered the awesome compass rgbapng Ruby gem for generating PNGs: https://github.com/aaronrussell/compass-rgbapng
#include background( png_base64( rgba(255, 66, 78, 0.25) ), image-url('/img/cardboard_flat.png') );
Now, this supports IE9+ and the rest of the browsers that support multiple backgrounds.
If you still need IE8 support, you could either use a multi-background polyfill, or style an ::after pseudo element and absolutely position it, with a z-index of -1:
html {
height: 100%;
}
body {
background: url('/img/cardboard_flat.png');
position: relative;
padding: 1px 0;
min-height: 100%;
&:after {
content: "";
position: absolute;
background: png_base64( rgba(255, 66, 78, 0.25) );
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
}
Related
There is a grid span(12)
There are two blocks of text
.main-container
.content text text text text text text text text text
.sidebar text text text text text text text text text
Want to do so
Write the code
span(6 at 1) //
span(3 as 9) //
But don't get desired. Here's the whole code.
$debug: (image: show, color: rgba(#66f, .25), output: background, toggle: top right)
$susy: (columns: 12, gutters: 1/4, math: fluid, gutter-position: inside, debug: $debug)
.main-container
#include container(80%)
.content
width: 100%
height: 100%
#include span(6 at 1)
.sidebar
width: 100%
height: 100%
#include span(3 at 9)
I thought that the flag at designed exactly for this purpose. But experiment has shown that I'm wrong. On this question - how to work with the flag at? ow to achieve the desired result using the at?
The at flag is only used in this way for isolation output ('output': 'isolate'). That's because floats are relative, and Susy doesn't know their original position unless you isolate them. Isolation is useful in some cases, but it's better to use push and pull to move floated elements into relative positions when needed. Something like this:
.content {
height: 100%;
#include span(6);
#inlcude push(1);
}
.sidebar {
height: 100%;
#include span(3);
#include push(1);
}
If you do use isolation, it would be something like this:
.content {
height: 100%;
#include span(isolate 6 at 2); // position is 1-indexed
}
.sidebar {
height: 100%;
#include span(isolate 3 at 9);
}
I removed width: 100% because span overrides width anyway.
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.
You need to use calc() instead. Check browser compatibility on Can I use...
.foo {
height: calc(25% - 5px);
}
If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}
I have the following css:
.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}
.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}
line-height of 30 lines up center in firefox, but 32 in webkit.
I know browsers will render things differently, but i've never had a problem getting text to center properly.
In the following example you can see that it drops a couple px lower in firefox:
http://jsfiddle.net/mstefanko/EGzEB/5/
I've done heavy testing of this in the past. I call it text jiggle. It's not something you can control. All you can do to minimize it is apply an explicit line-height (especially one in px) to every text element.
The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.
But within that, the exact placement of the text within the line-height space will vary slightly browser-to-browser no matter what you do. For some combinations of font-size and line-height, all browsers match up. For instance, Arial at font-size:11px and line-height:14px renders the same in FF, Webkit, and IE. But change the line-height to 13px or 15px, and it varies by 1px browser-to-browser.
There's no standard or defined behavior for it. It's the result of how that particular font-family, font-size, and line-height happens to be rendered by the browser on that operating system. Arial, for instance, is a relatively consistent font, generally not varying by more than 1px as long as an explicit line-height is defined, while Helvetica varies by as many as 4 to 6 pixels.
I had the opposite experience actually. I noted that some header elements were positioned higher in IE7/compatibility mode as well as Chrome/Safari. So after much trouble I inspected with chrome and saw -webkit-margin-before: 1.6em or something added to the headers. Adding that value and tweaking it didn't work because it effected the height of the header which pushed some elements down but the padding option worked well for me ...
I found that this worked for me:
H1, H2, H3, H4, H5, a.mainTab div {
-webkit-padding-before: 1px;
}
a.mainTab div had spans which wouldn't respond to the padding/margin so wrapped them in a div ... this may work for li span span headers as well.
I seem to have an issue where Firefox is displaying a blurred text shadow of 0.75 opacity just fine on white background, but in Webkit and Opera it's too dark/crisp. Who is right? What gives? And how should I attempt to solve it? Thanks.
Notes:
Here's an example JSFiddle
Actually, it seems like the issue might be in the choice of image processing filter. The fire fox version seems the blurriest, followed then by Opera's and then Chrome/Safari (Webkit). It almost looks like the Webkit browsers are using some sort of box filter to do their blurring, whereas Firefox is using something smoother. The shadow seems just too crisp in Webkit.
If I understood your problem in order to fix that on chrome and opera you must set blur radius on a higher value in order to have same result on those three browsers. I know that because I use a box-shadow on Firefox and Chrome and I noticed that.
check this live example: http://css3generator.com/
firefox: text-shadow: 1px 10px 19px #050505;
chrome and opera: 1px 10px 29px #050505;
Looking at http://www.w3.org/TR/css3-text/#changes (W3C Working Draft 19 January 2012)
A number of less-stable features have been deferred to Level 4: ...
...
the spread radius on ‘text-shadow’
So the meaning hasn't been specified. Go figure.
In any case, I also (re)discovered that text-shadow accepts a comma delimited list, so I suppose if I wanted to manually blur it further, If I originally had
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
I could maybe do something like
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1875),
4px 6px 5px rgba(0, 0, 0, 0.1875),
6px 4px 5px rgba(0, 0, 0, 0.1875),
6px 6px 5px rgba(0, 0, 0, 0.1875);
adding shadows as necessary.
I'm wondering, why this double border on table TDs won't show in Chrome but only in FF? Any ideas what could be the work around? Thanks!
http://jsfiddle.net/yQQLk/1/
Not sure why you're using box-shadow to produce a double border, when the border property itself already supports a double border on its own. Just use the following CSS instead of what you've got:
td {
border-bottom: 3px double red;
}
Note you'll need to increase the size of the border to 3px so that both of the lines show up (with 1px, it sometimes doesn't show up at all when you specify double).
The other advantage is that this will work in all browsers, including older ones which don't support box-shadow.
Increase your border thickness to to see a more obvious demonstration of the rendering differences between the two browsers. It seems that in FF, the box-shadow is overlaid on top of the border, in Chrome it hides underneath.
You could use another approach - perhaps use a border-bottom combined with a text-decoration: underline.
Try this, it works in both the browsers:
td {
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
border-bottom: 1px solid red;
box-shadow: 0 2px 0 #000;
}
I guess, this is the problem: box-shadow: 0 1px 0 #000;