I've tinkered with text-shadow and achieved an effect I really like in safari, however it is rendered differently in ff & chrome. I'm very wet behind the ears but believed that text-shadow would work the same on most browsers as the prefixes (-moz, -webkit, ect) are no longer used for it. Thanks.
h1 { color:#a2d639; text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #66ff33,0 0 40px #66ff33,0 0 70px #ff00de,0 0 80px #66ff33,0 0 100px #ff00de,0 0 150px #ff00de;}
I've experienced the same (and multiple other issues) concerning cross-browser compatibility. Unfortunately, the best current solution is to find a "happy medium" between the browsers. Be sure to check the results frequently if you're making a lot of changes.
If you haven't done so already, download the latest versions of Firefox, Chrome, IE, Safari, and Opera to test your pages. As far as I know, Safari, Chrome and Opera use the Webkit rendering engine, but there are still slight differences in how they are displayed.
Related
I apply same values for box-shadow property, but on IE11, the shadows seem thinner and I even can't see it in some case.
See this fiddle: http://jsfiddle.net/anhhnt/8pvgZ/2/
Here is result of IE11 for who don't have this browser:
The original property value is :
box-shadow: 0px 1px 3px 0px #777;
When I change it into
box-shadow: 0px 1px 6px 0px #777;
... then it seems OK, but why there is this difference? and what is best solution to work around this?
Thanks in advanced
This happens because each browser has it's own way of rendering elements.
The best way to work around this really is to make your page non-dependant on graphic elements that may differ from browser to browser (such as box-shadow). When i have to use box-shadow, i usually put an almost invisble one, with a subtle border. It works out really nice, and avoid most of the problems we usually have with the absurd difference between browsers' interpretation of the box-shadowproperty.
I made a fiddle based on the one you posted.
I've been trying to get the same shadow in all modern browsers (except IE version 9).
Unfortunately, for example Google Chrome doesn't blur it as nice as Firefox does.
Here's my code..
HTML:
<div id="box">Every browser should see my shadow the same way!</div>
CSS:
#box {
box-shadow: 0 4px 4px -4px #000, 4px 0 0 0 #E8EBEF;
padding: 10px;
background-color: #E8EBEF;
width: 200px;
}
and here's a fiddle:
http://jsfiddle.net/hLp8J/1/
What can I do to get the same shadow in at least the latest versions of Firefox, Google Chrome, Safari and Opera? Thanks for your ideas!
The different rendering engines draw the shadow slightly differently (Firefox for example has a smoother falloff than Webkit based browsers, looks better if you ask me)
The only way to guarantee it'll look identical across browsers is to be dumb about it and use images.
Otherwise you need to find a way to deal with the minor differences without adversely affecting your design.
You may try online CSS3 Generator or CSS3 Box Shadow Generator or CSS3 Maker
I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.
Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.
Example
Firebug will only show:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
When the full code is:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
If leaves out the moz and webkit.
I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.
I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.
download the latest version of any browser and you see absolutely all the css.
With Inspector in Chrome you can see even the different states like :hover :active and so on
Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.
I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.
I've been working at this all morning hopefully someone can see the problem, I've missed.
I have a background image set for my header, it works fine in all browsers except IE8 and below, even works fine in IE9 Beta.
Here is the link, http://test.medialayer.net/
Here is the css for the header,
header {
width: 890px;
height: 90px;
background: #fff url('/images/headerBG.png') repeat-x top left;
margin: 0 0 18px 35px;
padding: 0 0 0 10px;
}
I've tried rearranging the order of the css to no avail, it's not the missing space after (), other background images on the page work fine and are set up identically, I've tried using jpg instead of png, made a whole new png, made sure it was rgb not cmyk, and still nothing.
I have no idea what to try next,
thanks in advance to anyone who takes a look.
Chuck
If you open the page in IE9, open the developer tools (F12) and change the document mode to IE8, you see that the styling of the header element aren't applied.
The header element is an HTML 5 element, which IE8 and below doesn't understand.
IE 8 chokes on <header>, which is a HTML 5 element.
See this question for workarounds: Does Internet Explorer 8 support HTML 5?
The most popular seems to be the HTML 5 shim.
I have boxes that have been designed like this
Basically I need to code them so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.
Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)
If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/
To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.
The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.
If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I can't help with box shadows in IE, I'm afraid.
Actually, IE has a proprietary CSS extension that allows you to add shadows:
.shadowed {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)
DD_Roundies Website
As for other browsers, you can use this:
/*************************************************/
/* The properties follow this format: */
/* property-name: x-offset y-offset blur #color; */
/*************************************************/
box-shadow: 0 0 4px #000; /* For Opera */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
I would strongly recommend CSS3Pie (works in IE6-9).