I am working on a HTML application, and I am trying to style an info panel. Here is the CSS code I have so far:
#info_panel {
width:900px;
height:100px;
margin:auto;
background-color:brown;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
border-top-left-radius:25px;
border-top-right-radius:25px;
}
I do not have a problem with the first four lines. The problem arises with the border radius properties. I noticed that the shadow property does not work either. I know that this code would normally work in a web browser, but this being an application, there seems to be a problem. Unfortunately, there is very little documentation on this subject. I would include a fiddle, but of course I could not because it would be running in a web browser. Any help is welcome! :)
From what I gather, your HTA is essentially running on Internet Explorer's rendering engine. Only IE9 and IE10 support the border-radius property. Older IEs will not show rounded corners or box shadows. Do you have IE8 installed?
If you need these style features for the older IE rendering, then look into CSS3 PIE: http://css3pie.com/
To really run HTA with IE9 you need to set document type and a x-ua compatible meta tag:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="x-ua-compatible" content="IE=9"/>
....
Notice the order, there shouldn't be any style, script or link tags before meta.
There also seems to be a bug in IE9. Radius is not rendered, when assigned it to a fieldset element which has a legend element too. Without legend borders are rounded.
I am curious as to why you are using the longhand version to specify the border radius. Have you tried the universal shorthand?
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
This the box shadow code:
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
Related
I try to use box-shadow with css3, but it's not working on IE, works fine on chrome and firefox.
I know, on IE9 I must used box-shadow without moz or webkit prefix
I use an iFrame in my WebPage for login (Made for ERP login), And this iframe have a known bug, when you use html5 you can be redirected after login, That's why I must use <html> tag and not <!DOCTYPE html> (I've open a ticket for fix this bug)
If I use <!DOCTYPE html> my box-shadow work, but my iframe freeze.
If I use <html> My iFrame work fine but my box-shadow is not diplayed.
So, actually I must choose between design or functionality, but I'm pretty sure stackoveflow know an issue for that.
If you know a solution or a hack, it can be cool
Here my code : (work with <!DOCTYPE hml> but want the same effect with <html>)
#header-container{
-webkit-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
}
The CSS3 box-shadow is a Candidate Recommendation.
It is method of displaying an inner or outer shadow effect to elements and it can be partially emulated in older IE versions using the non-standard shadow filter. Partial support in Safari, iOS Safari and Android Browser refers to missing inset and blur radius value support.
IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has its border-collapse property set to collapse, then the box-shadow is not applied. This is fixed in a future releases).
As mentioned earlier, IE6-8 requires Visual Filters to emulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents.
Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:
<!-- Extra white-space below is just to make it easier to read. :-) -->
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9) ]> <body class="modern"> <![endif]-->
<!--[!(IE)]><!--> <body class="notIE modern"> <!--<![endif]-->
We can then apply CSS specific to a version of IE. For example:
body.ie7 #box {
/* insert IE7 specific CSS here */
}
(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)
All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.
Type #1: Simple, Unblurred Shadows
In order to simulate simple, un-blurred box-shadows in IE, we use IE’s DropShadow Visual filter:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.
Type #1a: Blocks With Transparent Backgrounds
Let’s say you use the above CSS, but omit the background property:
#box {
/* CSS for all browsers. Note there is no background-color, so box will be transparent */
border: solid 1px #808080;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
Doing this will results in some unexpected results in IE6-8. The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter.
Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.
Type 1b: Negative Shadow Offsets
If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: -10px -5px 0px #ff0000;
-webkit-box-shadow: -10px -5px 0px #ff0000;
-moz-box-shadow: -10px -5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}
Type #2: Glowing box-shadow
The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:
#box {
box-shadow: 0 0 5px #666666;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}
Two important caveats about the Visual Filter rules:
As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the Shadow filter behaves: it requires a lighter shade to simulate the same effect.
Also he Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8.
You may be able to "cheat" by adding:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This will tell IE to render using up-to-date standards, which includes the box-shadow.
However, this is at best a hack and probably won't help much. You should really focus on fixing the bug that's stopping you from properly declaring a <!DOCTYPE>.
The doctype tag is not a replacement for the html tag, you should have both.
If you have only the doctype tag and not an html tag, the markup is invalid. The browser will try to make the best of the broken code, but there are a number of ways that it can misinterpret parts of the rest of the code.
If you have only the html tag and not a doctype tag, the browser will parse the page in quirks mode, which is basically using the oldest standards possible. This will disable some features from newer standards, like CSS3.
If you can't use the HTML5 doctype, you should use one for an older standard, for example HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
W3C has a list of Recommended Doctype Declarations where you can see the different versions and variations.
I am looking at a fix for a website - I have applied a box-shadow to a div. This renders perfectly in:
Safari, Firefox, Chrome.
The SAME CSS renders perfectly in IE when displayed via ASP.NET razor views.
The CSS that works in the above .NET, doesn't render via Umbraco.
I am using a separate stylesheet for IE (8.0+) and using:
box-shadow: 5px 5px 0px #000
in the main stylesheet (for all other browsers) I am using:
box-shadow: 0px 40px 100px 2px #000;
neither work for IE and I am stumped now.
IE makes me want to drink bleach - anybody have any ideas where I am going wrong?
Thank you in advance!
This does indeed have to do with IE compatibility. Remove this line from your html:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The line above forces newer versions of Internet Explorer to render the page as IE8 would, by default. See MSDN's Specifying legacy document modes for more details.
I'm guessing the link to your css is relative or something, it's got absolutely nothing to do with umbraco - you have full control over the html. Perhaps paste a link to your website or your html code.
also for cross browser drop shadows you need something like this
-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.
Here's the sample, what I am trying to achieve:
And what I did until now:
<div style="padding-left: 15px; position:absolute;">
<img src="avatar.png" alt="" />
<img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
</div>
It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?
If your images are going to be irregular sizes, an SVG as background-image is what you're looking for. Adobe Illustrator ($$$) or Inkscape (free) can be used to create the unusually shaped shadow as an SVG file. From there, all that should be necessary is this CSS:
.myImage {
background: url(myShadow.svg) no-repeat;
background-size: 100% 100%;
padding: ? ? ? ?; // the values will have to depend on your bg image
}
In depth explanation can be found here: http://designfestival.com/a-farewell-to-css3-gradients/
If your images are all the same size or you don't care about any graininess that might occur when it is resized, then a PNG as your background would work just as well.
You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.
This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.
Hope this helps.
This is because, that would not be supported by that particular browser. You might be missing vendor-prefix
Opera 10.50 (currently only available on Windows) is the first web
browser to have an implementation without a vendor-prefix, whereas
Firefox, Safari and Google Chrome all need it for now. So, this code
makes it work in all those web browsers
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
Further you can refer these links
Drop shadow with css for all web browser
Box shadow
This is a more generic solution, but may be useful to others. I added the following to the <head> section of the HTML:
<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>
and it worked great for adding shadows to all images.
I'm having a problem with my form that looks okay in Firefox but it goes lower than I want it to on Chrome and IE. Also footers go higher in IE when there perfect in Chrome and FF.
I just want to know if there is any way I can make the CSS specific to each browser so if I opened my page in FF, IE or Chrome it would use the CSS specific to it.
Thanks
Update:
I have found this code to make a separate style sheet for IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Is there one I can make for all the other browsers?
In IE you can add a specific stylesheet using conditional comments:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For Mozilla and Chrome you could use vendor specific tags.
In Chrome you would use something like this (As Chrome is webkit based, you add -webkit before tags):
#foo {
-webkit-border-radius:5px;
-webkit-box-shadow: 5px 5px 5px #000;
}
And in Mozilla you would use (add -moz before tags):
#foo {
-moz-border-radius:5px;
-moz-box-shadow: 5px 5px 5px #000;
}
You have to remember you cannot do this in all tags.
List for Mozilla:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
List for Chrome:
http://qooxdoo.org/documentation/general/webkit_css_styles
I'm having a problem with dropshadow and other hacks in IE. I have seen lots and lots of the fixes for IE. I cannot get them to work for me and I cannot find an explanation of why.
Here is an example of one of the hacks I have tried:
http://i.imgur.com/31Dra.png
My code and webpage are on the left. The website this hack is taken from is:
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
What really gets me is that it will work on that site in IE. I also have the source inspected (in chrome) but the page is displayed in IE.
This is IE 8, just to clarify.
Any explanation of this would be much appreciated.
HTML:
<head>
<link REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen />
</head>
<body>
<div class="shadow">Nothing to see, move along.</div>
</body>
CSS:
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow:3px 3px 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
background-color:00ccff;
}
It's because you have not accepted the security risk alert at the top of the browser, since the "hacks" are implemented in ActiveX.
Also, see CSS dependent on ActiveX?
Most likely caused by not setting the correct DOCTYPE. Try adding <!DOCTYPE html> to the top of your document