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.
Related
I'm working on a table that has cells requiring a background with lowered opacity, and text on top not effected by the background. The content in the cells is dynamic.
http://jsfiddle.net/6zszm/3/
In IE9 (have not tested in other IE versions) the background is clipped at the span content. In firefox, the background runs wild and overflows to bottom right. In chrome this works like a charm.
Some similar questions that didn't quite cover it:
How to make <div> fill <td> height
Someone suggests a 1px height to the td - this did not work for me, nothing changed. I would also rather not use JS to fix this problem.
Another somewhat related issue: CSS absolute positioning bug with IE9
The strange thing is in IE9, this worked in compatibility mode, but not without.
This is indeed seemingly impossible - unless you specifically define each cell's width and height, which kind of defeats the object of using a table.
Possbile solutions...
RGBA
Assuming you are going to use background colours you can always use background-color: rgba(200,200,200,0.5) with a fallback to solid colours if it fails. Support for RGBA is in all of the top browsers, it doesn't work for IE8 and below however...
Transparent PNGs
The obvious easy one is to fallback to using transparent PNGs, but then this relies on the colours you are using being predefined and rather rigid.
Use -moz-element
Another mad solution to get FireFox to work (if you are using background images rather than colours) would be to use the background: moz-element() ability. Here you create hidden elements on your page of each different opacity that you might require and reference them as a background via id. For example:
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
Then reference that on the element you want the background to appear on:
<td style="background: -moz-element(#image1);"></td>
I'm not vouching for this method however, it's rather inelegant and browser specific. Tbh I'm quite suprised to find that this problem is indeed not fixable (esp. in FF) using plain old absolute and relative tricks.
Don't us Tables
The more browser supported solution by far would be to drop using tables and recreate a table structure using good old divs and floats. The only problem with this solution is again you'd have to define most widths and heights and you wouldn't be able to achieve vertical cell alignments unless you fallback to something even more experimental like FlexBox.
You could try working with a CSS framework, like LESS or Blueprint. Most frameworks have background code that makes your styling look the same in all browsers, even if tweaking would normally be required.
I'm hunting some very odd rendering issues in IE9 in windows 7. I'm using the microsoft "filter" method wherever there are gradients, it's HTML5, and everything is in standards mode.
Please note, as there has been some confusion: This is happening everywhere there are rounded corners, including in situations where there are no gradients, and even no background color at all. The specific issue can be seen in the screenshots below as gaps in the border and color getting repeated on the x-axis, INSIDE the element.
As far as I can tell, I have set up everything correctly, and of course it all renders just fine in firefox and webkit browsers.
Has anyone ever seen this? I'm chasing my tail and googling turned up squat.
Input box:
DIV with gradient background:
Edit:
The twitter-bootstrap link provided below exhibits exactly the same issues on all their example elements. Smarter people than me are working on that project, so I'm racking this up as un-solvable with CSS alone. Feel free to close.
thats a known bug in IE9 and theres no really easy solution* to get rid of this. the easiest ways would be:
use a background-image containing the gradient instead of a gradient for IE < 10
use a plain background-color instead of a gradient for IE < 10
twitter bootstarp, for example has to deal with this, too. they've chosen to use a plain background-color for their buttons as you can read here:
In IE9, we drop the gradient on all buttons in favor of rounded
corners as IE9 doesn't crop background gradients to the corners.
*ugly svg-for-ie-solution: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
IE Filters and rounded corners don't play nicely together. You're going to have to choose between a solid background colour or square corners for IE. Vendor prefixed gradients are going to be supported in IE10, so there is that at least.
Twitter make note of this on the Bootstrap site, saying:
"In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners."
When I use only rounded corners on my div, it looks about how I expect in IE9.
border-radius: 7px;
However, when I add the following line to make a drop shadow, I get an unexpected effect:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
Here's a screenshot of the effect. I'm referring to the ugly little black corners suddenly appended to my light blue div:
http://imageshack.us/photo/my-images/406/blackcorners.png/
How can I get rid of that?
IE9 supports box-shadow natively, so there's no need to use the old filter style.
If you're using the filter for the benefit of older IE versions, then it may be that both shadows are coming into play in IE9, and slightly different, thus causing the weird effect.
My first suggestion is simply to drop the filter style. This will mean that versions of IE won't see the box shadow, but it's not really a critical element of the layout.
If that's no good, then I would suggest using CSS3Pie to implement the box shadows for older versions of IE. As a bonus, it'll do the border-radius too.
With CSS3Pie, you can use the standard CSS box-shadow style in older versions of IE, and not need to worry about the filter style. And, to show how it directly answers your question, it will switch itself off automatically in IE9, so you won't get the double shadow effect.
Hope that helps.
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
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.