javascript - Design for old browser, backwards compatibility -
i want sync design old browsers ie7 , up. here design old browsers ie7 , up, have searched , found tool download , utilize javascript implement code. there way this?
here html:
<!doctype html> <html lang="en-us"> <head> <title>nitro info networks teleserv corporation</title> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=dosis' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/main.css"/> <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/contact.css"/> <script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script> </head> <body> <script> (function(i,s,o,g,r,a,m){i['googleanalyticsobject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new date();a=s.createelement(o), m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentnode.insertbefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '--snip--', '--snip--'); ga('send', 'pageview'); </script><div id="wrapper"> <div id="header"> <ul> <a href="http://nitrodatanetworks.com/index.php"> <li> <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">home</a></li> <a href="http://nitrodatanetworks.com/index.php/welcome/login"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/91-32.png">login</a></li> <a href="http://nitrodatanetworks.com/index.php/welcome/profile"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/88-32.png"> profile</li> <a href="http://nitrodatanetworks.com/index.php/welcome/service"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/16-32.png">services</li> <a href="http://nitrodatanetworks.com/index.php/welcome/contact"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/04-32.png">contact us</a></li> <div id="social"> <li>like us!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-14.png"></li> <li>tweet!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-05.png"></li> <li>plus!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-19.png"></li> </div> </ul> </div> <!---------------------------header-------------------> <!---------------slideshow---------------------> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">nitro info networks teleserv corporation</p> <p class="subtext">we focus on aligning services needs of our client's business.</p> </div> <div class="nav"> <label for="img-6" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">flexibility</p> <p class="subtext">voip systems allow end-users carry phone number everywhere on planet, long location has net access. beneficial companies, organizations, , agencies conduct business domestically , internationally.</p> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">cost savings</p> <p class="subtext">leveraging voip create international calls can translate huge savings end- users on traditional phone lines. voip providers offer consumers first-class rates when making calls internationally.</p> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-4" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">nitro info networks teleserv corporation</p> <p class="subtext">we focus on aligning services needs of our client's business.</p> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-5" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">application integration</p> <p class="subtext">voip solutions save end-user time , money integrating web applications, email, audio, , info telephone requirements 1 easy-to-use application.</p> </div> <div class="nav"> <label for="img-4" class="prev">‹</label> <label for="img-6" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrphs0undqpha8rwnvqaxzwb9p1z8in352q4bjo1ppfmmffniia6g" /> <p class="text">nitro info networks teleserv corporation </p> <p class="subtext"> nitro data's core team has played leading role across broad range of industry activities, built successful businesses , created sustainable long-term relationships our partners.</p> </div> <div class="nav"> <label for="img-5" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> </li> </ul> <!------------------------------------> <div id="nav-post"> <h2>coming soon</h2> <p> nitro info networks teleserv corporation (nitro data) 1 of trusted technological solutions provider many computer-telecommunication. nitro info has served assist many organizations in using computer-telecommunications assets more efficiently , effectively. our services inline internationally accredited set of practices service management. </p> </div> <hr> <div id="services"> <h2>voip benefits</h2> <ul> <li> <label for="img-1" style="cursor:pointer;"> <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/19-64.png"> <a href="http://nitrodatanetworks.com/index.php/welcome/login"> <h1>application integration</h1></a> <p>voip solutions save end-user time , money integrating web applications, email, audio, , info telephone requirements 1 easy-to-use application.</p> </label> </li> <li> <label for="img-2" style="cursor:pointer;"> <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/21-64.png"> <a href="http://nitrodatanetworks.com/index.php/welcome/flexibity"> <h1>flexibility</h1></a> <p>voip systems allow end-users carry phone number everywhere on planet, long location has net access.this beneficial companies. </p> </label> </li> <li> <label for="img-3" style="cursor:pointer;"> <img src=https://cdn2.iconfinder.com/data/icons/pittogrammi/142/94-64.png> <a href="http://nitrodatanetworks.com/index.php/welcome/costsavings"> <h1>cost savings</h1></a> <p>leveraging voip create international calls can translate huge savings end- users on traditional phone lines.most voip providers offer consumers first-class rates.</p> </label> </li> </ul> </div><div id="footer"> <h2>nitro info networks teleserv</h2> <div id="footercontent"> <ul class="footer1"> <li>careers</li> <li>contac us</li> <li>locations</li> </ul> <ul class="footer2"> <li>our team</li> <li>where started</li> <li>information</li> </ul> <ul class="footer3"> <li>sitemap</li> <li>location map</li> <li>privacy policy</li> </ul> </div><!-----footer content------------------------> </div><!-----footer-------------------------------> <div id='footercopy'> <p>terms of use</p> <p>© 2014 netsolutions technologies</p> </div> </div> </body> </html> here css:
/*developed , designed chris einar m. san agustin*/ html{ background:background: background: #4c4c4c; /* old browsers */ background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(0%,#000000), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* ie10+ */ background: linear-gradient(to bottom, #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#4c4c4c', endcolorstr='#131313',gradienttype=0 ); /* ie6-9 */ font-family: 'oswald', sans-serif; } h2{ font-size:50px; font-family: 'oxygen', sans-serif; } #wrapper{ width:1024px; margin-right:auto; margin-left:auto; min-height:1000px; } #header{ width:1024px; margin-right:auto; margin-left:auto; position:relative; left:-20px; color:#000000; padding-top:50px; padding-bottom:10px; } #header li{ display:inline; padding:20px; background:#fff; opacity:0.5; } #header img{ } #social{ text-align:right; } #social li{ background:#c8c8c8 ; position:relative; top:-53px; padding-left:10px; } #header li:hover{ opacity:1; } #header a{ text-decoration:none; color:#000000; } /*slideshow*/ /*slider*/ @import url(http://fonts.googleapis.com/css?family=varela+round); .slides { width:1024px; padding-right:65px; height:420px; display: block; position: relative; z-index:11; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide-container { display: block; } .text{ background-color: rgba(0, 0, 5, 0.3); background: rgba(0, 0, 5, 0.3); color: rgba(0, 0, 5, 0.3); text-align:center; opacity:0.8; font-size:50px; width:800px; color:white; position:relative; left:100px; margin-top:-400px; } .subtext { background-color: rgba(0, 0, 5, 0.5); background: rgba(0, 0, 5, 0.3); color: rgba(0, 0, 5, 0.3); padding:20px; color:white; font-size:15px; position:relative; font-family: 'dosis', sans-serif; text-align:left; left:100px; right:110px; width:500px; } .slide { top: 0; left:-11px; opacity: 0; margin-left:auto; margin-right:auto; width:100%; height:100%; text-align:center; display: block; position: absolute; transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); transition: .7s ease-in-out; -moz-transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; } .slide img { margin-right:auto; width:1024px; margin-left:-83px; margin-top:-10px; height:110%; text-align:center; } .nav label { width: 200px; height:0%; display:none; position: absolute; margin-left:-35px; margin-right:110px; padding:auto; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; -moz-transition: opacity .2s; -webkit-transition: opacity .2s; color: #fff; font-size: 150px; text-align: center; line-height: 380px; font-family: "varela round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 960px; bottom: 0px; height: 1px; display: block; position: absolute; text-align:center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); } #nav-post{ padding-top:30px; color:#fff; padding:20px; font-family: 'dosis', sans-serif; } #nav-post h2{ text-align:center; } #services{ padding-top:50px; padding-bottom:40px; color:#fcfcfc; } #services h2{ text-align:center; } #services li{ display:inline-block; padding:30px; font-family: 'dosis', sans-serif; } #services li:hover{ font-weight:bold; font-size:20px; } #services img{ background:#fff; border-radius:70px; padding:30px; opacity:0.5; } #services p{ width:200px; text-align:left; color:#fff; font-family: 'dosis', sans-serif; } #services h1{ padding-top:20px; color:#888888; text-align:left; } #services img:hover{ position:relative; top:-20px; opacity:1; } #services a{ text-decoration:none; } #footer { clear:both; background: rgb(96,108,136); /* old browsers */ background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 0%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(0%,rgba(63,76,107,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* opera 11.10+ */ background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* ie10+ */ background: linear-gradient(to bottom, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#606c88', endcolorstr='#3f4c6b',gradienttype=0 ); /* ie6-9 */ margin-top:-23px; min-height:300px; margin-right:auto; margin-left:auto; text-align:center; overflow:hidden; font-family: 'dosis', sans-serif; color:#ffffff; } #footer h2:hover{ text-decoration:underline; } #footercontent { width:1024px; font-weight:20px; margin-right:auto; margin-left:auto; font-family: 'dosis', sans-serif; text-decoration:none; } #footer h2{ text-decoration:none; } .footer1 { float:left; padding-left:100px; padding-right:150px; } .footer2 { float:left; padding-right:150px; } .footer3 { float:left; padding-right:150px; } .footer4 { float:left; padding-right:100px; } .footer5 { float:left; padding-right:100px; } #footercopy { background:#404040; text-align:center; padding:20px; margin-bottom:-10px; color:white; font-family: 'dosis', sans-serif; }
i see you're trying utilize modernizr, first off allow me syntax includes wrong. have this.
<script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script> and should (notice: filename extension)
<script src="http://nitrodatanetworks.com/assets/modernize.js" type="text/javascript"></script> how modernizr works:
when page loaded, modernizr runs , detects "features" usable current browser, , add together special class names html tag of page. illustration see you're using css gradients, if load page on outdated browser no back upwards css gradients, html tag similar <html class="no-cssgradients">.
you can specifiy rules target when css gradients not supported.
like this: default class (obviously vender prefixes left out)
.exampleclass { background: linear-gradient(to bottom, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); } and fallback can utilize no-cssgradients class this. when no cssgradients supported class apply element.
.no-cssgradients .exampleclass { background: #000000; } with background property can provide fallback within default tag, seperated way example. same process applies other unsupported elements detected modernizr. there more modernizr classes i'd recommend heading on site , start digging around.
edit: recommend run html & css through validator, you'll see have plenty of syntax errors throughout code. nonethless luck!
javascript html css
No comments:
Post a Comment