Search the Community
Showing results for tags '100%'.
Found 1 result
-
I'm having a weird issue with any elements that are given a width: 100% or width: auto. If the window is re-sized smaller. It seems to cut a chunk off and wreck hell upon the layout. I thought it was my code so I borrowed a few from tutorials etc with the same results. I've just installed FireFox also, thinking it was a Chrome bug, but that gives the same result too.. http://shanesdomain.byethost32.com/ I might be missing something obvious from lack of sleep, but could anyone assist this? body { background: url(../images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #topbar-navigation { width: auto; height: 48px; background: #080d10; position: absolute; margin-left: auto; margin-right: auto; top: 0; left: 0; right: 0; display: inline-block; text-align: center; border-bottom: 1px solid #262b2f; z-index: 1; } #adblock-warning { width: auto; position: absolute; margin-left: auto; margin-right: auto; top: 0; left: 0; right: 0; background: #344152; font-family: 'sinkin_sans400_regular'; color: #b6b6b6; padding-top: 10px; padding-bottom: 10px; margin-top: 49px; text-align: center; font-weight: normal; font-size: 10px; white-space: nowrap; } #maincontainer { width: 960px; height: 1000px; position: absolute; margin-left: auto; margin-right: auto; margin-top: 150px; top: 0; left: 0; right: 0; background: #f2f2f2; } .user-icon-notif { height: 20px; width: 20px; position: absolute; margin-left: auto; margin-right: auto; margin-top: 15px; top: 0; left: 875px; right: 0; } .user-register { height: 20px; width: 20px; position: absolute; margin-left: auto; margin-right: auto; margin-top: 15px; top: 0; left: 815px; right: 0; text-decoration: none; font-family: 'sinkin_sans400_regular'; font-size: 11px; color: #99a0a8; } .user-register:hover { color: #c9c9c9; } .user-login { height: 20px; width: 20px; position: absolute; margin-left: auto; margin-right: auto; margin-top: 15px; top: 0; left: 700px; right: 0; text-decoration: none; font-family: 'sinkin_sans400_regular'; font-size: 11px; color: #99a0a8; } .user-login:hover { color: #c9c9c9; } <!DOCTYPE html> <html> <head> <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> <META HTTP-EQUIV="content-language" content="EN"> <META NAME="Rating" content="General"> <META NAME="Designer" content="Shane Wilson"> <META NAME="Keywords" content="Gamer, Community"> <META NAME="revisit-after" content="7"> <META NAME="Robots" content="index,follow"> <META HTTP-EQUIV="Cache-Control" content="no-cache"> <META HTTP-EQUIV="Expires" content="0"> <META NAME="Author" content="Shane Wilson"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="topbar-navigation"> <a href="register" class="user-register">Register</a> <a href="login" class="user-login">Login</a> </div> <div id="maincontainer"> </div> <script type="text/javascript" src="http://shanesdomain.byethost32.com/js/advertisement.js"></script> <script type="text/javascript"> if (document.getElementById("TestAdBlock") == undefined) { document.write('<div id="adblock-warning">Oops! It looks like you are using AdBlock. We know adverts can be annoying, but in order to keep the site running we have to display them</div>'); } </script> </body> </html>
