I have the following test code in my css file:
#media only screen and (min-width: 960px){
body{
background-color: red;
}
.wrapperShadow {
margin: 0px 3em;
box-shadow: 0px 0px 2.5em 0.5em rgba(0, 0, 0, 0.4);
}
.wrapperShadow {
margin: 0px 3em;
box-shadow: 0px 0px 2.5em 0.5em rgba(0, 0, 0, 0.4);
}
}
I added the red just as a test.
But in IE, it's not picking this css as per the F12 tool
I'm just wondering what the problem could be.
EDIT 1:
What I'm noticing is that my site is defaulting to compatibility mode, on various pages.
When I turn off compatibility mode using the little broken page symbol in the address bar, the page looks correct.
why does it default to compatibility mode?
is it because I have the following line in my header:
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
Do you have compatibility mode turned on? Check that...
(IE9 Under "Compatibility View Settings" it had the "Display Intranet Sites in Compatibility View")
Good Luck..)
As far as I know, IE9 can understand #media queries, but earlier versions can't. If you hit f12 on a PC and then check Compatibility mode, you may find that it's running an earlier version.
I once saw this code to display a default image for sub-IE9 browsers:
Ugh, actually it won't let me post the code. The workaround is at line 85 here: https://github.com/scottjehl/picturefill/commit/9aa22f58cd338bdd22e907239cb33629a5ec2143
With those meta tags you are telling ie to use the ie 7 view engine,yuck. When you remove those tags you will use either the 9 or 10 view engines.
Related
Simple code, but in chrome font-size is always 12px, in IE it's 10px.
For px larger than 12, it's ok to change. But for px under 12, it cant be changed....how to fix this?
<html>
<head>
<style type="text/css" >
body{
font-size: 10px;
}
div{
margin: 0 auto;
border: 1px solid #000;
width: 60em;
}
</style>
</head>
<body>
<div>
wrapper
</div>
</body>
In chrome://settings/fonts, there is a setting for "minimum font size". You probably have that set to 12px.
You can adjust the size of text in chrome.
Click Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings.
In the "Web Content" section, use the "Font size" drop-down menu to make adjustments.
see here
Try change size like this:
body {
font-size: 10px !important;
}
If it still doesn't work, you would probably have some javascript changing it on the fly (do you have some javascript plugins or code loaded with your project?
Or maybe css from other plugins/modules/code etc.
Or maybe you have really set some minimum font size in chrome settings. Try to check taht also.
Here's my project:
[had to remove url because of spam-bot]
For a quick look, here's my CSS for the div in question:
#leftCol { width: 431px; height: 552px; background: #67b8b9; /* Fallback */ background: rgba(100,179,180,0.88); float: left; display: block; border-radius: 0px 24px 0px 0px; behavior: url('PIE-1/PIE.htc'); zoom: 1; }
The left column has a transparent solid background and one rounded corner. It looks fine everywhere, except some versions of IE 8. On my IE 8 (Win XP SP2) it's fine, dropping the transparency and just showing a solid color.
Today a co-worker showed me the page in their IE 8 and the background color is missing altogether, and I can recreate her results looking at the page through Adobe Browserlab, so it's 'something' but I don't know what.
Tried a separate CSS sheet for IE 8, I have no height:100%, overflow:hidden or any other properties that IE is known to choke on. So please tell me what I'm missing. If it helps, it looks fine in IE 7 too. In fact if I could get just IE 8 to behave like IE 7 I'd be happy enough.
Thanks!
Seems the only fix I could find was to force IE8 to render like IE7 using the following meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=EmulateIE9" />
Doesn't really solve the problem as IE8 ought to be able to handle it. Gosh, how many times have you heard that before?
P.S. that tag tells IE 8 to render like IE 7 but leaves IE 9 alone to render as IE 9.
I am using some css to add a corner radius and box shadow to a div in my asp.net project
.DesktopContainerDiv
{
background-color:#C4D5E9;
box-shadow: 10px 10px 5px #888;
border-radius: 10px;
border-collapse: separate;
padding:10px;
width:60%;
min-width:800px;
margin: 20px auto;
text-align:center;
min-height:200px
}
This works fine when I run through the Visual Studio IDE (Hitting F5). But when I deploy it to my web server, if I load a page using IE9 is doesn't display the box shadow and radius (Firefox and Chrome both show it correctly).
I have tried using UltiDev and IIS web servers and both behave the same so that eliminates that.
IE must be picking up the sytlesheet because it is turning the background blue so I can't understand what the difference is between running in IDE and web server is.
This happened to me once before and the problem was solved by making sure the compatability mode was set to IE9
You can force this by putting
<meta http-equiv="X-UA-Compatible" content="IE=9" />
into your <head>
Edit: Or try:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
I'm trying to get rounded corners to on of my css class with the code as it follows
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
I have been reading couple of articles related to my issue and the code above should be ok but in my case won't fire.
Add this to your markup as the very first line.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Use this for border radius for better compatibility with other browsers also.
-moz-border-right-radius: 5px;
-webkit-border-right-radius: 5px;
border-right-radius: 5px;
-moz-border-left-radius: 5px;
-webkit-border-left-radius: 5px;
border-left-radius: 5px;
IE9 uses CSS3 (the industry standard). Your code should therefore work.
A very common problem is that although you are using ie9, it might be rendering the page using an older version. See if compatibility mode is enabled by mistake. You could also try the developer tools (F12) and look at the document mode and browser mode (at the top) are set to IE9.
I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate?
http://jigsaw.w3.org/css-validator/
Although the syntax for vendor extensions is mentioned in the CSS3 Syntax module and introduced into the grammar to allow vendors to implement their own prefixes ignoring the standard, the actual vendor extensions themselves are not recognized as official CSS properties. This is not going to change, as they're proprietary and specific to the vendors that invent and use them.
However, a recent enhancement (early 2011) to the Jigsaw W3C CSS Validator makes it possible to reduce validation errors triggered by vendor extensions to warnings. Find this new option among other such as the level of CSS to validate against by expanding the More Options section:
This makes it easier to find the real problems with your stylesheet if it still doesn't validate. If vendor extensions are the only things triggering errors, turning them into warnings will allow your stylesheet to validate tentatively. It also eliminates the need to maintain vendor extensions in a separate stylesheet that you have to hide from the validator.
Warnings are the furthest you can shy away from errors, though, as ultimately, vendor prefixes are still non-standard and therefore technically invalid CSS.
No, they are browser specific properties, and not defined in the standard CSS specification.
That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification.
It partly possible. Collect all your unsupported css classes in one file (css3.css)
Example:
css3.css
.round{
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}
default.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css3.css">');
</script>
</head>
<body>
<div class="square round"></div>
</body>
</html>
Search engine don't run client scripts, so your W3C unsupported attributes will not damage your SEO.
As for green css validation, sorry, not yet.
No, as they are not part of the standard the validator validates against. The only solution that comes to mind is to put the incompatible properties into a separate style sheet.
The Mozilla and WebKit specific properties will not validate. What you can do is separate your "enriched" css into a separate style sheet. Just like you separate your ie hack styles out of your main style sheet. This way your base style sheets will validate.
If you use a separate CSS file for my "invalid" or "browser-specific" CSS then use a little PHP to filter out that CSS from the validator:
<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){
echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />';
}
?>
Then link to the validator with CSS3 as the profile (accepts border-radius, text-shadow, etc.):
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$_SERVER['HTTP_HOST'] doesn't work but perhaps there is something that will?
12-12-2011
Kami really posted the best solution. I create a separate css3.js file and document.write(''); the CSS line by line:
CSS3.js
document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');
#BoltClock is TOTALLY right on this one... W3C has indeed added a vextwarning level BOOL search criteria. It is NOT documented... but if you are using their SOAP API validation you can add a parameter to the payload of your validation GET request....
&vextwarning=true
for example... if you wanted to edit the CSS validator command in TextMate... you would "Edit Bundles...", aka ⌃+⌥+⌘+B
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='
scope = STDIN.read
…
to - something - more along the likes of
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='
scope = STDIN.read
…
Notice that I also added a level=css3 and changed the warninglevel. Alter these, according to the API, as needed.
If you want to see all the parameters that are available via the "online" submit mechanism.... open up Firebug, or the Webkit inspector, etc.. while submitting a query via their form and check out the full request content to get even more options, as needed...