I wanted to have a round table corner inside the Asp.net HTML pages ,so I wrote the following HTML code to be visible in Chrome & Mozila and also IE (I am using IE9).
<style type="text/css">.round{-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}
</style>
Every thing is right except in IE9 .What's the problem .
Your code is fine. IE9 uses the unpredixed border-radius.
http://caniuse.com/#feat=border-radius
Add this to your <head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
This should make sure IE9 runs border-radius.
Related
I am having this huge issue with IE 11, I can't get any variation of the color royal blue to display correctly as a background color. The background color works great in firefox and chrome.
I have tried all of this in the CSS file:
background-color:navy;
background-color:navy !important;
filter: none !important
I have tried other colors, like blue, and have tried to use just the color codes.
I have tried to force compatibility, If you run IE in compatibility, it will display the color correctly. I can never seem to get IE 11 to run compatibility from HTML. I have tried the the following:
<meta http-equiv="X-UA-Compatible" content="IE=8">
I am using the Doc Type tag as well:
<!DOCTYPE html>
How it looks in Firefox:
How it looks in IE 11:
No matter what I do, I can't get internet explorer to display the background color that I want. Can someone please tell how I can accomplish this?
This seems like a really strange behavior, as color constants have been supported by IE for quite a while. Your post contains a number of details, but not enough to help identify what might be going wrong in your case.
This JSFiddle works correctly on my machine; that is, it changes the background color of the body element as requested. Both navy and royalblue appear to work as intended on my copy of IE11.
Also, this MSDN sample, written originally for IE8, continues to work in IE11 (though you need to use the F12 tools to switch the document mode. BTW, that page also shows how to correctly declare the x-ua-compatible header to IE8 mode, if you're looking for such a live sample.)
To specify this (and the x-ua-compatible) directive in a bare bones HTML page, I might be tempted to use something like this:
<!doctype HTML>
<head>
<title>My page title</title:>
<meta http-equiv="x-ua-compatible" content="ie=8">
<style type="text/css">
body { background-color: navy }
</style>
</head>
<body>
<p>Hello, world</p>
</body>
</html>
If your machine is not showing this, then I would consider other environmental factors, such as basic syntax errors, out of date video drivers, loose cable connections, or related things
Hope this helps...
-- Lance
If you are getting the wrong blue, it's most likely how IE is reading the color "Navy". Have you tried using specific HEX codes? A browser will read a hex code the same, but color names can appear differently, try using the HEX Code like below.
background:#000080; /*Navy BG Color*/
or
background-color:#000080; /*Navy BG Color*/
My IE displays these as the same colors.
Heres a site you can get the browser HEX codes for each color name:
http://www.color-hex.com/color/000080
I have a web project that just breaks when I run it on Internet Explorer. Here it is, working as I want it to, on jsfiddle.
On IE, the display_area goes up and mixes with the toolbar up top. Also, the posts mixes into the side_display_area instead of them being confined to main_display_area, as is on the jsfiddle.
The problem I had was because IE, by default, uses 'Quirky' mode for its CSS rendering for the sake of compatibility with older code that was written ad hoc for IE. Although IE currently has different standard compliant modes(I can't attest to how compliant, however), it still defaults to this compatibility mode.
The solution is to override, or explicitly set, the rendering mode of IE via the X-UA-Compatible header. You can do this through html tags with:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
more info
I think this may help http://css-tricks.com/the-css-overflow-property/
Consider adding some div to you horizontal menu and put some height on that
div.hmenu {
margin-left:auto;
margin-right:auto;
height: 20px;
min-width:1000px;
max-width:90%;
overflow:auto;
}
So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
I just finished designing a webpage for my photography. I used Chrome as my test browser.
But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).
Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.
<html>
<head>
<title>A test HTML</title>
<style type="text/css">
#currpage
{
position: absolute;
bottom: 18%;
right: 10%;
left: 35%;
top: 15%;
border:2px solid green;
z-index: 240;
}
</style>
</head>
<body>
<div id="currpage" style="visibility: visible; opacity: 1;">
This is just a test.
</div>
</body>
</html>
Have you tried... actually making a well-formed HTML file?
Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.
Add <!DOCTYPE HTML> to the start of the file.
EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)
Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.
At the very first line (even before the <html>-Tag write the following:
<!DOCTYPE html>
This is for a HTML5 document.
Edit: ....edit.... forget that point.
Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"
If you look at this website with IE8 there a scrollbar on the right... How can I get rid of it? Any ideas pr tools that could help me find the error?
http://www.photocabana.net/
Does not work with IE8 Compat Mode = Off
Works in IE8 Compat Mode = On
Works in Firefox
Works in Chrome
If you use overflow:hidden on the HTML element and the BODY that should get it working in IE7 also.
Another option for your site if it's IE7 compatible already is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
http://msdn.microsoft.com/en-us/library/aa374783(VS.85).aspx
This will buy you time until you can get everything right in IE8 native.
include this in your <head> element:
<style>
html, body {
overlow-y: hidden;
}
</style>
This is css that hide the scrollbar in the html and body tags.
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp