html - edge is not displaying background color on a:link -
https://fivosm.github.io/ tested on ie, firefox, chrome works fine, a:link's background red. in edge though background not red until hover on it.
i don't know start, google searches don't show related problem. here pastebin link, in case formatting messed again
<!doctype html> <html> <head> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicons/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicons/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicons/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicons/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicons/apple-touch-icon-60x60.png" /><link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicons/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicons/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicons/apple-touch-icon-152x152.png" /><link rel="icon" type="image/png" href="favicons/favicon-196x196.png" sizes="196x196" /><link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96" /><link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16" /><link rel="icon" type="image/png" href="favicons/favicon-128.png" sizes="128x128" /><meta name="application-name" content=" "/><meta name="msapplication-tilecolor" content="#ffffff" /><meta name="msapplication-tileimage" content="favicons/mstile-144x144.png" /><meta name="msapplication-square70x70logo" content="favicons/mstile-70x70.png" /><meta name="msapplication-square150x150logo" content="favicons/mstile-150x150.png" /><meta name="msapplication-wide310x150logo" content="favicons/mstile-310x150.png" /><meta name="msapplication-square310x310logo" content="favicons/mstile-310x310.png" /> <meta name="description" content="all of projects stored here" /> <title>fivosm projects</title> <link rel="stylesheet" href="animate.css"> <style> body { backgroundcolor = "#f5f5f5"; font-family: sans-serif; text-align: center; text-align: center; -webkit-font-smoothing: antialiased; } .background{ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; } div { border-radius: 25px; width: 270px; height: 370px; display: inline-block; white-space: normal; box-shadow: 0px 0px 6px #828282; } h1 { text-shadow: 2px 2px 10px #d3d3d3; } small { font-size: smaller; } .transparent{ background:rgba(255,255,255,0.9); } a:link { background-color: #f44336; color: white; padding: 3px 6px; text-align: center; text-decoration: none; display: inline-block; } a:visited { background-color: #7b77ff; color: white; padding: 3px 6px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active{ background-color: red; } a:disabled, a[disabled]{ color: black; background: rgb(255, 255, 255); background: rgba(0, 0, 0, 0); text-decoration: underline; } </style> </head> <script type="text/javascript"> function changebackground() { document.body.style.backgroundcolor = "#f5f5f5"; var viewport_w = math.max(document.documentelement.clientwidth, window.innerwidth || 0); var viewport_h = math.max(document.documentelement.clientheight, window.innerheight || 0); var geturl = "url(https://source.unsplash.com/category/nature/" + viewport_w + "x" + viewport_h + ")"; document.body.style.backgroundimage = geturl; } </script> <body class="background" onload="changebackground();"> <div class = "body animated bounceindown transparent"> <h1>my projects: </h1> <h3> software: </h3> <p><b>pinger:</b> <a href="https://cdn.rawgit.com/fivosm/pinger/12b37fe2/pinger.bat" target="_blank" download="pinger"> download </a> <a href="https://github.com/fivosm/pinger" target="_blank"> github </a></p> <h3> games: </h3> <p><b>hellblocks:</b> <a href="https://fivosm.itch.io/hellblocks" target="_blank"> itch.io page </a></p> <h3> websites: </h3> <p><b>this website:</b> <a href="https://fivosm.github.io" target="_blank" > fivosm.github.io </a></p> <p><small><a href="https://github.com/fivosm" target="_blank" disabled="true"> github </a> | <a href="https://fivosm.itch.io/" target="_blank" disabled="true"> itch.io </a> </small></p> </div> </body> </html>
define background a. have a:visited style setting background color #7b77ff. remove if don't need link button styling.
a{ background-color: #f44336; ... } a:visited { background-color: #7b77ff; }
Comments
Post a Comment