I have 2 issues with my page.
I have dots as background in my wrapper div. Its not visible in both fF and chrome.
I have css background gradients for navigation. It looks fine in Chrome, but not in FF.
You set the background image to the dots but after that you set the gradient in the background. It overwrites the dots, maybe you could use multiple backgrounds.
Check this link for more about that (and the gradient declaration)
You should post the relevant sections of your CSS.
FF and WebKit have different formats for gradients. I believe that CSS3 is closer to the FF style, so you'll have to provide multiple alternative CSS statements. However, on Chrome 10 and FF4, your page looks identical.
As for the dots, is it set on the same div as the gradient? A gradient is an "image". You may need to either use two different overlaying div's and then change the opacity of the top div, or specify multiple images for the background, but change the order of your layering of the background images.
Related
I have a page where the body is set to a background colour. I have a fixed-position footer that is above some text that scrolls behind it.
I have used a css3 gradient to attempt to create a sort of fade effect, but there seems to be a brighter line occurring somewhere along the gradient. Any tips to remove this line would be greatly appreciated. Ideally, I would like to avoid using images as the colours are changing dynamically across various pages, so it would be nice not to have to create a new background image for every colour.
I have created a jsbin to demonstrate:
http://jsbin.com/okedut
I also took a screenshot and increased the contrast/size in photoshop which confirms there is indeed a line appearing for some reason:
It seems like a browser bug when you are using rgba values.
The effect that you want to achive can be done with CSS masks.
http://www.webkit.org/blog/181/css-masks/
For FF you can use a SVG solution:
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
I use a gradient background color for selected or hovered menu items it works fine in chrome,FF,opera,ie7,ie8 . but in ie9 the background of the elements appears in the right of the element but text keeps in place this is the first problem.
the second problem i faced is the rounded corner it works fine in chrome, FF, opera but in ie9 the corners are ok but the background of the box was an image but it appears white!!!
the third problem is that of shadow
i apply shadow to the divs containing images it works fine in all browsers but ie9 offset the whole div instead of applying shadow and opacity change on mouse over increased the problem by adding black parts in the side of div that doesn't have shadow???????
when i heard that ie9 supports css3 i knew that this is unbelievable ie will still be my Nightmare!!
I'm afraid of future appearance of the website in ie 9 so i add this
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/>
when i used IE=7 or IE=8 the problem still as it is
but know it appears better after adding that line but with no support for rounded corner.
How are you telling IE9 to implement the corners and gradients? Are you using the IE filters (like I assume you're using for 7 and 8)? Or are you actually using CSS3?
If you're using filters, try making IE9 just use CSS3. You can put the filters into their own stylesheet and just use conditional comments to target IE8 and below for them, so IE9 ignores the filters altogether, that way you know they're not interfering.
I have a text field, and it's good everywhere except Opera, where it takes the color of the background.
How can I make just the inside white? Setting background(-color) to white makes the entire square element background white, which is not what I want.
The cornering is border-radius. No IE hacks needed :)
No specific CSS is used for the other browsers, it just works, in that it was always white.
Should've posted the link earlier, but the page in question is http://blog.darkhax.com/
I can't see anything wrong - I've set up a simple test here: http://jsfiddle.net/ZxR5k/1/, which works fine on Opera 10.6. The border radius property works as expected.
It appears from the image you have up there that you are applying the background color to the parent of the input element. That may be the problem.
How are you creating that curve? Is it with border-radius? If so, background-color should do it (though you say it doesn't).
If it is an image, can you fire up the image in your graphics program and give it a white background?
What CSS do you use that works in every other browser except Opera?
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.