internet explorer - IE not supporting some CSS3 styling -
i having problem ie. using css3 style on current project. on other browsers have tested on firefox, chrome , safari , looks amazing. on ie looks room(doesn't good).
i need advice please. know percentage of ie user days very low compare other browsers. question should rewrite css3 standard css ones doesn't support ie or should annoy , using php alert users contains might no looks right because of browser type , recommend them download, chrome or firefox?
an example of 1 of issue navigation bar.
<nav> <ul> <li> <a href="">home</a> </li> <li><a href="about.php">aboutus</a></li> <li><a href="contact.php">contact us</a></li> </ul> </nav>
css
nav{ text-align:center; } nav li{ text-align:center;list-style: none; float: left; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { z-index:50; background: #ffffff; background: linear-gradient(top, #ffffff 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #ffffff 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li:hover { background: linear-gradient(top, #ffffff 0%, #ffffff 40%); background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 40%); background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 40%); } nav ul li:hover { color: #fff; } nav ul li { display: block; padding: 10px 10px; text-transform: uppercase; text-decoration: none; } nav ul li { float: left; } nav ul li:hover { color: #760076; } nav ul li { display: block; color: #000000; text-decoration: none; } nav ul ul { border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li { color: #fff; } nav ul ul li a:hover { background: #ffffff; } nav ul ul ul { position: absolute; left: 100%; top:0; }
for example ie9:
nav ul { : background: -ms-linear-gradient(to bottom, #ffffff 0%, #bbbbbb 100%); : }
and
nav ul li:hover { background: -ms-linear-gradient(to bottom, #ffffff 0%, #ffffff 40%); : }
ie10 works similar rules, without vendor prefixes.
Comments
Post a Comment