css - <!DOCTYPE html> breaking my page! Why? -


problem: images not showing until resize browser, or else fraction of each image showing; outcome random each time page reloaded. 10 different results reloading page 10 times.

after resizing window, page show should look, when sizing page original size, continue working.

after having trouble simple webpage,

js fiddle here (working fine):

http://jsfiddle.net/grdvw/5/

i found 1 change make page's source removing

<!doctype html>  

no other changes fixed problem, removing tag fixes it, 100%. why this??

html:

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style/style.css"> <title>title</title> <meta name="keywords"> <meta name="description" content="the gamemode hub minecraft server network bringing of minecraft's best , brightest server owners present gaming community largest collection of minecraft servers in world!"> <meta name="author" content="jonathan todd">  </head>  <body> <div class="wrap">     <!-- begin wrap :: keep of stuff neat , in 1 place -->     <div class="login-screen bg-dirt">         <!-- begin login screen, background dirt :: sets background login , styles dirt tile , holds login elements -->     </div>     <!-- end login screen, background dirt -->     <div class="welcome-screen">         <!-- begin welcome screen :: hold elements within welcome screen, title , 2 moving wall pieces -->         <div class="wall-left">             <!-- begin wall left :: must explain this? opens , closes other wall -->             <img src="http://www.new.gamemode.org/images/wall_left.png">         </div>         <!-- end wall left -->         <div class="wall-right">             <!-- begin wall-right :: must explain this? opens , closes other wall -->             <img src="http://www.new.gamemode.org/images/wall_right.png">         </div>         <!-- end wall right -->         <img class="welcome-logo" src="http://www.new.gamemode.org/images/logo.png">         <img class="welcome-shadows" src="http://www.new.gamemode.org/images/shadows_fast.png">     </div>     <!-- end welcome screen --> </div> <!-- end wrap --> </body> </html> 

css:

/* style setup */ body, div { margin:0; padding:0; -webkit-perspective:6500; } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0; } address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } q:before, q:after { content:''; } abbr, acronym { border:0; } .wrap, html { width:100%; margin:0px; padding:0px; height:100%; overflow:hidden; } /* style start */  .bg-dirt { } .login-screen { z-index:0; } .welcome-screen { z-index:1; width:100%; height:100%; } .wall-left { position:absolute; z-index:2; height:100%; left:0px; } .wall-right { position:absolute; z-index:3; height:100%; right:0px; } .welcome-logo { position:absolute; z-index:4; margin-left:auto; margin-right:auto; } .welcome-shadows { position:absolute; z-index:5; width:100%; } 

i'm not sure why happening, but:

  • not tag. says document html (version 5). should not remove unless know doing. without browsers think working in html4, , strange thinks happen if still use html 5 thinks.
  • try writing more xml-like code. example, try code closing img tags , works me (latest chrome @ mac os):

        <div class="wall-left">         <!-- begin wall left :: must explain this? opens , closes other wall -->         <img src="http://www.new.gamemode.org/images/wall_left.png" />     </div>     <!-- end wall left -->     <div class="wall-right">         <!-- begin wall-right :: must explain this? opens , closes other wall -->         <img src="http://www.new.gamemode.org/images/wall_right.png" />     </div> 

(please note img tag closes />)


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -