Webpage Cross Browser CSS - html

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

Related

box-shadow and IE9 compatibilty

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.

Conditional comments not working for browsers other than Internet Explorer

<!--[if !IE]>
<style type="text/css" media="screen">
.title {
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
<![endif]-->
This piece of code in head tags doesn't works never... why? I have been searching a lot throught internet and everyone says it works... but, actually, in my web-page doesn't. I have used it a lot of times and it worked... but something I should have wrong...
Anybody can help me, please?
Thanks in advance!
As posted in this SO answer (that I linked to in the comments):
Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->
However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
You have this:
<!--[if !IE]>
some stuff
<![endif]-->
which non-IE browsers see as this:
(There's nothing, because it's just a comment to non-IE browsers).
You need this:
<!--[if !IE]-->
some stuff
<!--[endif]-->
so that both the opening and closing tags are fully-contained comments to non-IE browsers, and the style is rendered.
What Mystere Man means is that these conditional comments were only supported in versions of Internet Explorer prior to Internet Explorer 10. Since you are saying "apply these styles if it not Internet Explorer" you have a logical impossibility.
I would personally write these as follows-
<style type="text/css" media="screen">
.title {
color: #000000;
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
You will notice the extra "color" property of the title class - this will be overridden in browsers that support RGBA (which will use that value instead) but will be a fallback value for those browsers that do not support it. That way all browsers that do not support RGBA (for example Firefox 2 and below) will also have a usable fallback colour. I've not bothered providing a fallback for text-shadow as Internet Explorer 8 and below do not support this property either - your users can live without it.
There is no harm providing a standard CSS property that a browser does not understand, it will simply be ignored by that browser and only used in browsers that do understand it. See more about CSS fallback properties.
If you must use conditional comments to solve this you could look at targeting those versions of Internet Explorer you know do not support RGBa (don't penalise users of Internet Explorer 9 - 11 whose browsers do support the property).
<!--[if lte IE 8]>
<style type="text/css" media="screen">
.title {
color: #000000;
}
</style>
<![endif]-->
Do not do this when fallback properties are a better solution, as in this case.
I will answer myself because I found the problem, which wasn't anything related with IE selector tag neither rgba attribute in itselves (as somebody said before: IE 10 supports this last one), but with the alpha gradient applied. For some reasson, the alpha value is not rendered very well in IE and it results in a completely different style. Changin the 0 (alpha value) in the font color and playing a little with those color values is possible to get a very similar result in IE and other browsers.
So, thank you so much for everyone who has been trying to help me. I hope this helps another person.
:)
you're missing the [endif]:
<!--[if !IE]>
<style type="text/css" media="screen">
.title {
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
<!--[endif]-->
note: this will apply the style on non-IE browsers. If you wanted to use it on IE browsers, change the !IE to IE

Umbraco not rendering IE box shadows

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');

CSS not working in HTML application

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);

Why don't IE hacks work for me?

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