I have a few divs with a repeating background PNG (that as an alpha channel set to ~50% opacity); the purpose is to give a white transparent background to the divs. The divs render great in all current browsers. But when I call my Cufon code to replace certain text on the screen, the backgrounds seem to fade out in a gradient fashion from top left to bottom right (in IE only). It doesn't seem to effect all PNG backgrounds, just certain ones.
Something with Cufon is definitely getting in the way of rendering the transparent PNGs. Has anyone ever seen this functionality?
I used cufón 18 months ago but that was for headings and labels over white or colored background so I can't help you on this one.
If I had a similar need today, I'd use #font-face as Fx3.0 and others are disappearing very fast, being replaced by Fx3.5+ and other recent browsers. Do you have a constraint that prevent you from using this IE-compatible feature?
A few questions if it can be of any help:
do these elements have hasLayout (with zoom: 1; if they don't already have a width, height, ...) or their parents.
is it always the same elements that work and don't work?
what happens if you replace one background displaying OK with another that isn't OK? Is this the same element that have a problem or the same background or does something else happen?
Cufón wasn't causing the problem; it was just masking it. The real problem was the fact that I was using transparent .pngs that were 1px x 1px. IE will render them incorrectly and fade them out; almost as if they were being stretched beyond limit.
Use a larger background image - 10px X 10px or more.
Related
Well, here's the story. I am developing my first site and the first problem I've encountered is making rounded corners of main div, that will contain all stuff. CSS3 is a good solution, but incompatibility with IE6-8 is stopping me.
Also I need that rounded div (it's actually rectangular, 950x1600 with rounded 30px corners) to be centered and have a nice shade along the border.
Using background image is not an option too, because it planned to be with seamless pattern.
So what I`m thinking to do is:
Put one centered div.
Put images cut from photoshop in it's corners
Use 1px high PS pattern for sides as shade.
Everything would be ok, but 'patterned' background messes everything.
So only solution I see here is to put two divs on both sides of centered div, make right one draw pattern from right-top corner, so borders cut from photoshop would match seamlessly with siding divs, used as background image.
Now tell me, folks, am I trying to invent a bicycle here, or there's better solution?
p.s. all solutions that i've found all over are useless in a way. Some are very close, but leaving some margin white field 10px around divs. Or after adjusting to necessary height and width do not scrolling and falling out of page. Tables with text are useless without text (no? if i remove text it just disappears)
Yeah, I am a total noob, so please be indulgent =)
If your main concern is rounded-corner property support in older versions of IE, it might be worth checking out a plugin like CSS3Pie (css3pie.com). This uses the 'behaviour' property, so it won't mess with your other browsers - there's no sense in adding obsolete mark-up for 90% of current browsers (i.e. designing for the lowest common denominator).
CSS3 Pie
To be honest, I'd usually abandon the rounded corners in older versions of IE completely - as long as content degrades gracefully, there's absolutely no harm in this. However, if you really want a consistent appearance, I'd definitely go with a plugin like the above, rather than structuring your entire page around browsers that should've fallen out of use ages ago.
This question already has an answer here:
Chrome using wrong border color on left on tall objects with border-radius set
(1 answer)
Closed last month.
Alright, well I have searched and searched on google, stackoverflow, other sites for an issue regarding how webkit handles the combination of border-radius, border width and color applied to a box, with one side having both a thicker border and different border-color.
I have been testing and testing both in the project I'm currently working on and in JSfiddle.
I have created a JSfiddle with multiple test cases in it exemplifying what styles do and do not affect this bug. http://jsfiddle.net/kGST9/4/
You will see that most of the boxes have a strip of red in the centers of the top and bottom borders. You'll also notice that on the different test cases the width of the strip of red varies depending from what I've found, on the width of the left border and the width of the box. I believe it truly doesn't matter what side the thicker border is on and will behave the same. This only occurs in webkit, both the latest releases of Safari 5 and Chrome 16, and I'm assuming this goes to all versions of webkit that supports border radius.
Firefox does not display this issue.
I have not even been able to find anyone talking about this bug in a forum or blogpost, and do not believe to be the only to have this problem. lol
Just for reference, I've also attempted adding other none border related styles, such as position, display, overflow, background-clip, and their various values, with none of them helping.
So help me get down to the bottom of this if you will.
Regards,
CSSDevMonkey
Very strange indeed. I've found after toying with it that whether or not the bug shows up (and how severe it is) is tied to a combination of the ratio of the box's overall width and height as well as the size of the border radius. I can get the problem to go away (in all but one case) by increasing the border radius to 20px. Also, reducing the width of every div to 200px seems to fix the issue.
Definitely looks like a bug. Not sure what a direct fix would be other than playing with varying width/height ratios, border-radii, or border widths. You've probably already done a good amount of this.
I just stumbled across this post and have a similar bug with border radius and different width to height ratios of the divs. I'm not using different sized borders, but different colors.
If I have a border radius and border-color: red blue blue red, the left border gets a strip of blue in it depending on the size. Only in Web-Kit browsers it seems, and I cant seem to find any work around. I guess its a bug, unless you have found a solution.
Put up my own jsfiddle with my issue.
http://jsfiddle.net/6xUNr/
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
For things like menubars and headers, a background color is nice.
But a background color that gracefully transitions from say Blue to White is even nicer.
I know this can be done by making a 1-pixel wide, X-pixel tall image file containing the desired fade and repeating it across the div, but does CSS have native support to just define colors and be done with it?
Can any other language handle this?
With CSS3, you can do that. However, CSS3 is not widely supported through browsers, so only the most recent of browsers (and not even all of them) will be able to display the gradient. Unless you're only interested in working with those browsers that can do it, you're going to have to stick with the 1px background image.
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/CSS/current-work#CSS3
You mean a gradient?
Webkit browsers(Chrome and Safari), and apparently FF 3.6 now support CSS gradients:
see this link
According to the article, even IE has some proprietory CSS gradient support, I don't know how well that works though. You should always have a fallback to solid color though.
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.