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" />
Related
It's on a simple asp.net web project. There's a Styles folder in the project and in that folder are four css files all pretty simple. Main.css has this:
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 85%;
width: 700px;
height: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: 2px;
background-color: green;
}
The green (it was originally white) shows up in IE but not in Chrome. I reference the css files in the ASPX file:
<link href="Styles/CheckOut.css" rel="Stylesheet" type="text/css"/>
<link href="Styles/Main.css" rel="Stylesheet" type="text/css" />
The green was only one test. I made other changes to the css files and none showed up in Chrome. Aside from the css issue, the app performs fine in Chrome as well as IE.
The Page Inspector reflects the css files; but Chrome does not. There are a couple of similar seeming questions here but none address my issue, AFAIK.
When you refresh the page in Chrome, do you have dev tools open? And if you do, do you have "Disable cache (while DevTools is open)" checked? I've found that Chrome is pretty aggressive about caching stuff, so if you're not seeing your changes this might be something to look into. (You can verify if that checkbox is marked by hitting F12 on Windows or option-command-I on Mac, and clicking on the widget wheel. It's the first checkbox under "General".)
I am using HTML5 and CSS3 in my project. To Work in IE8, I am importing famous html5.js downloaded from code.google.com.
But what I am facing is, my main header is repeating twice down side while it is looking perfect in Chrome and Firefox.
What is going on wrong here?
CSS:
header#US_header {
background-image:url('/images//US_header.png');
width:910px;
height:82px;
margin:0px 0px 0px 0px;
padding:0;
}
JSP:
<header id="US_header">
use background-repeat:no-repeat;
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.
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'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.