Очень простая настройка CSS и HTML: почему моя страница показывает случайные результаты?

0

По какой-то причине эта страница разворачивается при загрузке. И если я изменил размер (включая возврат к исходному размеру), все это будет загружаться идеально, как если бы оно уже было. Но до изменения размера окна браузера я получаю пустой экран.

Примечание. Случайные комбинации будут загружаться, как это ни странно, для меня до изменения размера.

Кто-нибудь видит мою проблему?

Хорошо, вот скрипка JS: http://jsfiddle.net/grDvW/1/

Загрузка изображений arent, но вы даже можете увидеть, что местозамены изображений не отображаются до тех пор, пока вы не измените размер окна вывода скрипта js. По крайней мере, проблема последовательна.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style/style.css"><title>GameMode | Minecraft</title>
    <meta name="keywords" content="keyword">
    <meta name="description" content="description">
    <meta name="author" content="Jonathan Todd">
</head>
<body>
    <div class="wrap"><!-- begin wrap :: this will keep all of the stuff neat and in one place -->
    <div class="login-screen bg-dirt"><!-- begin login screen, background dirt :: sets up a background for the login and styles it with a dirt tile and holds all login elements -->
    </div><!-- end login screen, background dirt -->
    <div class="welcome-screen"><!-- begin welcome screen :: this will hold the elements within the welcome screen, mainly just a title and the two moving wall pieces -->
       <div class="wall-left"><!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
          <img src="images/wall_left.png">
       </div><!-- end wall left -->
       <div class="wall-right"><!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
          <img src="images/wall_right.png">
       </div><!-- end wall right -->
       <img class="welcome-logo" src="images/logo.png">
       <img class="welcome-shadows" src="images/shadows_fast.png">
   </div><!-- end welcome screen -->
</div><!-- end wrap -->
</body>
</html>

И мой CSS очень прост:

/* Style Setup */

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    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%;
}
Теги:

1 ответ

0

Не могли бы вы попытаться удалить,

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
  margin:0;
  padding:0;
  /*-webkit-perspective:6500;*/
}
Поделиться
  • 0
    Давайте попробуем это ..
  • 0
    Хорошо нет Без изменений там. Точно такой же результат.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню