List of CSS Features Not Supported by IE6

List of CSS features not supported by IE6

IE6 has LOTS of CSS bugs so that will be contributing to your page rendering. The official list of what is and isn't supported is here.

What might also help you is positioniseverything.net, they have a comprehensive list of IE bugs and their fixes.

If you're still struggling to get it right post a link to your page.

main element not working in Internet Explorer 11

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced
elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

Default settings of unrecognized HTML elements
Default style sheet for HTML 4
main property browser compatibility
display property definition and initial value

Is there any way to use latest css properties to other browser that not supported to that browser

You would have to to some research and google for polyfills or shims for each property not supported by your targeted browsers.

There are lists on the internet for common solutions (Example on GitHub).

Here, as an example, a polyfill for object-fit for older IE-versions:

https://github.com/fregante/object-fit-images

It is not good practice to offer links on StackOverflow - as links do outdate quickly - but I wanted to provide examples for what to search for.

css menu is not working in internet explorer

You have closed the HEAD tag twice (after TITLE and at the end of the STYLE).
And you don't have opened the BODY tag

Edit: try this code (Fiddle)

<html>
<head><title>Administrator Page</title>
<style type="text/css" >
#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
  position:relative;
  z-index:999;
}
#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 6px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #0399D4;
  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 34px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}   
</style></head>
<body>
<div>
<ul id="menu-bar">
 <li class="active"><a href="">Home</a></li>
 <li><a href="#">Admin Pages</a>
  <ul>
   <li><a href="title_index.php">Title</a></li>
   <li><a href="#">Matter Type</a></li>
   <li><a href="#">Claims Hubs</a></li>
   <li><a href="#">Areas</a></li>
   <li><a href="#">Firms</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="home.php">Logout</a></li>
</ul>
        </div>  

</body>
</html>

Menu Tabs do not function correctly in only Internet Explorer 8

IE8 does not support :target, which is what you are relying on to show those tabs.

I believe your best alternative would be to separate the tab content into different pages, and use a set of links at the top for navigation. Your nav links can be styled to look like tabs, so the site can still look the same - you'd just have a page load after clicking each tab.

That alternative would also be less confusing even for users with modern browsers, since their back and forward buttons will behave in a predictable way while they're browsing the site.

:target is better used for highlighting which in-page anchor the user has jumped to after clicking a section link. Using it to fake a tab control where large chunks of primary content in the page are hidden does not seem very accessible or user friendly.

Show a message if the browser is not internet explorer 9 or greater

HTML

IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.

As @Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.

jQuery

jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

Browser Detection in general

Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.

These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.

As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.

If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.

-webkit support in Internet Explorer

The Internet Explorer 10 supports some more CSS3 features. Did you to obmit the prefix? If this doesn't work there is nothing you can do. You may need to wait for the Internet Explorer 11.

However I would not recommend to concentrate your work for the IE. Better try to make run your app on Firefox, Safari, Opera and co.

Have also a look to the blog post Adapting your WebKit-optimized site for Internet Explorer 10 by Microsoft.

Does Internet Explorer support CSS transitions?

The page you link to has a compatibility table.

Chrome
    1.0 (-webkit prefix)

Firefox
    4.0 (2.0) (-moz prefix)
    16.0 (16.0) (no prefix)

Internet Explorer
    10.0 (no prefix)

Opera
    10.5 (-o prefix)  
    12.0 (no prefix)

Safari
    3.2 (-webkit prefix)

There is also an article on MSDN about CSS3 transitions in Internet Explorer.

Almost all of bootstrap styling not working in IE8. Works fine in chrome and firefox

Ok, so I figured it out. Wow this is really stupid. Apparently I was running IE in quirks mode.. This is what happens when you let a mac guy mess around in windows. Anyway, thanks for the feedback.

List of CSS Features Not Supported by IE6