Разлезлась верстка в IE8

Тема в разделе "Веб-дизайн", создана пользователем SkiLLer, 27 фев 2011.

Модераторы: zek24
  1. SkiLLer

    SkiLLer

    Регистр.:
    22 авг 2007
    Сообщения:
    307
    Симпатии:
    64
    Ребят, кто в верстке разбирается, подскажите, почему верстка разлезается в IE8 тут http://expo.zem.ru/, в остальных браузерах хорошо работает, а в ИЕ.... спасибо заранее.
     
  2. litllerror

    litllerror Создатель

    Регистр.:
    28 ноя 2010
    Сообщения:
    15
    Симпатии:
    15
    Код:
    <style type="text/css">
    #lightbox, #lightbox-overlay {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	bottom:auto;
    	right:auto;
    	z-index:100;
    	width:100%;
    	height:auto;
    	text-align:center;
    	color:#333333;
    	margin:0px;
    	padding:0px;
    	border:none;
    	outline:none;
    	line-height:0;
    	text-decoration:none;
    	background:none;
    	word-spacing:normal;
    	letter-spacing:normal;
    	float:none;
    	clear:none;
    	display:block;
    }
    #lightbox a, #lightbox a:link, #lightbox a:visited, #lightbox a:hover {
    	text-decoration:underline;
    	color:#999999;
    }
    #lightbox-overlay {
    	z-index: 90;
    	background-color:#000000;
    	height: 100%;
    	position:fixed;
    }
    #lightbox-overlay-text {
    	text-align: right;
    	margin-right: 20px;
    	margin-top: 20px;
    	color: white;
    	font-size: 12px;
    	cursor: default;
    	line-height:normal;
    }
    #lightbox-overlay-text a, #lightbox-overlay-text a:hover, #lightbox-overlay-text a:visited, #lightbox-overlay-text a:link {
    	color:white;
    }
    #lightbox-overlay-text span {
    	padding-left:5px;
    	padding-right:5px;
    }
    #lightbox img, #lightbox a img, #lightbox a { border:none; outline:none; }
    #lightbox-imageBox {
    	position:relative;
    	border:1px solid black;
    	background-color:white;
    	width:400px;
    	height:400px;
    	margin:0 auto;
    }
    #lightbox-imageContainer {
    	padding:1px;
    }
    #lightbox-loading {
    	position:absolute;
    	top:40%;
    	left:0%;
    	height:25%;
    	width:100%;
    	text-align:center;
    	line-height:0;
    }
    #lightbox-nav {
    	position:absolute;
    	top:0;
    	left:0;
    	height:100%;
    	width:100%;
    	z-index:10;
    }
    #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    	display:block;
    	width:49%;
    	height: 100%;
    	background:transparent url("/img/blank.gif") no-repeat; 
    	zoom:1; 
    	padding:0px;
    	margin:0px;
    }
    #lightbox-nav-btnPrev { 
    	left:0;
    	right:auto;
    	float:left;
    }
    #lightbox-nav-btnNext { 
    	left:auto;
    	right:0;
    	float:right;
    }
    #lightbox-infoBox {
    	font:10px Verdana, Helvetica, sans-serif;
    	background-color:#FFFFFF;
    	margin:0 auto;
    	padding:0px;
    	/* width: 100%;
    	padding: 0 10px 0; */
    }
    #lightbox-infoContainer {
    	padding-left:10px;
    	padding-right:10px;
    	padding-top:5px;
    	padding-bottom:5px;
    	color:#666;
    	line-height:normal;
    }
    #lightbox-infoHeader {
    	width:100%;
    	text-align:center; 
    }
    #lightbox-caption {
    	text-align:justify;
    }
    #lightbox-caption-title {
    	font-weight:bold;
    }
    #lightbox-caption-description {
    	font-weight:normal;
    }
    #lightbox-infoFooter {
    	margin-top:3px;
    	color:#999999;
    }
    #lightbox-currentNumber {
    	display:block;
    	width:49%;
    	float:left;
    	text-align:left;
    }
    #lightbox-close {
    	display:block;
    	width:45%;
    	float:right;
    	text-align:right;
    }
    #lightbox-close-button{
    	padding-left:30%;
    }
    #lightbox-close-button:hover {
    	color:#666666;
    }
    #lightbox-infoContainer-clear {
    	clear:both; 
    	visibility:hidden;
    }
    #lightBox { width:400px; margin:0; padding:0; list-style-type:none; }
    #lightBox img { border:1px solid #000; margin-left:5px; }
    </style>
    Не удивительно что ИЕ отображает его криво, этот стиль находится в самом начале html, в не положенном для него месте!
    Стиль должен размещаться внутри html, в теле тега <head> </head>
     
    SkiLLer нравится это.