I have a 1px by 1px grey pixel. It is used as a BG image:
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.
So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I've never seen anything like this, and would love some insight.
Thanks!
Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...
A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.
See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.
EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?
If it's just a 1px grey border you're after, why not just use a 1px grey border?
Example:
border-right: 1px solid #cccccc;
Related
I am trying to create a very precise matrix on top of a board. I know it's 48cm tall and wide, and therefore I am using the metric system. According to my code, they should align perfectly, but I'm experiencing some weird issues, which might be related to anti-aliasing. I honestly have no idea.
Take a look at this screenshot:
and then at this code: https://jsfiddle.net/o21rdwvw/3/
I use two methods:
background: black;
//one of these according to horizontal/vertical
width: 4px;
height: 4px;
and
outline: 4px solid black;
As you can see in this image, that is not really the case. It looks like some of the boxes has a shadow, with the HEX color #576c73, which has no relation to the color #000000 (unless the browsers somehow pick a shadow, which is some % brighter or darker than the original color).
I have tried changing the units around to pixel (even and odd numbers) as well as remove the transform: scale(), but none of them changed anything.
What kind of wizardry is this, and how can I prevent them from messing up my alignment?
EDIT: As you can see, the small boxes are differently sized, even though all the browsers report they're the same size. The bottom one is square, whereas the top and middle ones are slightly shorter:
EDIT 2: It appears to be a browser problem. Edge does not render the actual shadow, for example. It's just not as tall or wide as the others.
You can see the implementation here:
http://jsfiddle.net/Wtcdt/
In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.
What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?
This is so bizarre to me.
It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.
Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.
Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/
I want to/need to have a border of 1px thickness and dotted appearance, where the pattern is x-o-o-x-o-o etc. (dot, not, not, dot...)
This has to be done with border-image IIRC, but I went mad trying to create the image and applying it properly with the CSS statements.
Can anybody give me a hint how both has to be laid out?
Thanks and best!
I could get it to work by making a 7x7 image with dots in the corners and in the middles of the sides. Like this.
And then they can be evenly spaced by making a 2px border, so that the corners and the sides of the element use one dot each (see the markers how the slicing is done). So the css would be something like
border:2px solid transparent;
border-image: url(7x7.png) 2 2 round;
I am creating a blog, and on the top of the blog is an image of some scene (I used a picture of NYC) with the text of the most recent blog post over top of it. I thought it would be really cool to have the letters have an outline, but can still be transparent so the viewer can still see the image.
I tried text-shadow with a transparent color, but all I got was a black letter (which I didn't expect but makes sense). I ended up using the webkit-text-stroke property, which isn't cross browser at all. I've attached an image of it in both Chrome and Firefox, with a text shadow behind it so you can see how a text shadow appears (kind of) without a color present.
Is there a way to have the desired effect (a border around the text, but no color) in modern browsers? For IE9 and down I'll just use a solid black color so.
This is the code I'm using to get the below effect:
figcaption {
position: absolute;
bottom: 0px;
left: 20px;
font-size: 90px;
color: transparent;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: #1F1F1F;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);}
Thank you.
A couple of thoughts.
This example isn't exactly what you have described, but the result is good and should work well cross-browser:
http://jsfiddle.net/panchroma/JHvgp/
The key CSS is
h1.figcaption {
color:white;
position: absolute;
bottom: 0px;
left: 20px;
font-size: 90px;
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}
Alternatively, maybe it's possible to do something with with sIFR ... not sure about this though.
Good luck!
EDIT
Good suggestion from Adrien Be below -- with improved cross-browser transparency code:
http://css-tricks.com/snippets/css/cross-browser-opacity/
[I have no real ready-to-use solution here; but my thoughts on this are getting too long for a comment, so excuse me for putting this here.]
Cross-browser that’s kinda hard to achieve. I’ve looked into ways to get this kind of effect as well (and wasn’t satisfied with having it work webkit-only), and I came up with stuff like using dynamically created Canvas or SVG images that I draw the text on and then manipulating alpha values (canvas) or applying mask/filter effects (SVG).
But it’s a bit of a challenge to get the font rendering/positioning exactly right, and when text has to flow over multiple lines it gets even more complex. Best way I found for that is to split up the text into multiple span elements, one for each word; and then I place a Canvas or SVG image containing just that word as a background image for the span element. Big advantage here: The browser still takes care of text flow, like where to break text into a new line etc., because that’s a bit of a hassle to implement yourself in Canvas or SVG. And text flow also automatically adapts if the area the text gets displayed in changes size (f.e. user resizing browser window). What needs a little extra care is handling text resizing after the effect is applied – when user changes font size in their browser, the text I painted on my image might not fit any more – although using SVG and relative units that can be handled quite automatically as well. The other workarounds are either using background-size to scale the background image to the size of the span containing the word, or somehow capture that resize-“event” and re-draw images dynamically.
Using background images has the advantage that I can still keep the original HTML text in place – just setting it to transparent, so that when the user f.e. starts selecting text on the page it will still show up as actual text and is copy&paste-able.
But for a small effect like this it’s quite a lot of work … so I decided in the end to give up on that, and postponed using “transparent letters” until browser support for easier solutions like the webkit one you mentioned gets wider.
My Firefox is acting weird. I use a simple 4x4px transparent PNG for a div background (as usual). In Chrome, Safari, Opera and even IE it looks great but in FF it's "broken". Here is a picture to show you what I'm talking about: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.
I use image and gradient for the background but if I only used the image, it causes the same result.
Here is the code:
#wrap {
background-color: #f5f5f5;
background-image: url(../images/general/bg-wrap.png);
background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
background-position: 0 0; background-repeat: repeat;
}
When I used only the background-image, it looked like this:
#wrap {
background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}
And this is the bg-wrap.png: http://cl.ly/0i3i1R0P2R0i1K1h1V1P. I don't understand what's going on...
Everyone's right about the Firefox bug and background image tile dimensions -- I was having the identical problem with a tile that was 16p x 16px. Nealio's answer seems to be correct, but it's not a question of resolution. Rather, take your tile and literally duplicate it so it repeats itself horizontally and vertically, and then use that tile as your background image.
For example, my background image is a simple tile of a very small "checkerboard" with alternating gray and white squares. The first image was the bare minimum to tile the pattern infinitely, so each "checker" measured 8px x 8px, resulting in a background image of 16px x 16px. This looks fine everywhere except Firefox, where it displays the same zig zaggy jaggy rendering as yours did.
After reading Nealio's response, I took that first pattern tile and doubled it so that it was 4 checkers x 4 checkers (8px X 4 = 32).
And voila! Same background appearance, but just a slightly larger tile.
The only thing I can think of is that a number of years ago, early versions of Firefox had trouble repeating background images that were too small (less than about 16x16).
Perhaps this is a new incarnation of that bug when combined with a gradient fill css..?
Just rule this out by testing it with a larger background image.
That is weird...
I set up a fiddle, and it works fine like this: http://jsfiddle.net/will/KMVvT/
Do you think it could be something else interfering?
You should not seperate the mozilla and webkit features with a comma after the closing bracket. Also the image path should be encapsuled within quotes.
I had the problem, that the image was not displayed, but could be viewed with in FireBug. The reason was the adblock plus extension. After disabling for that page (or general) it was displayed, again.