Помогите с вёрсткой под IE

ivanivan · July 7, 2012

Помогите пожалуйста с блочной версткой

В нормальных браузерах сайт отображается нормально, но в IE...

Элементы посыпались, и один div не реагирует на установку размеров для него

Вот фрагмент файла index.html:


<html>
 <head>
  <link rel='stylesheet' type='text/css' href='style.css'>
  <title>Design</title>
 </head>
 <body>

<div id='tovary'> 
 <div class='small-knife sm-left'>
 <p><a href='?postid=1'>Нож Выживания Bear Grylls</a></p>
 <img src='img/postpics/1336572716_l.jpg'>
 <div class='price-small'>
  <p>цена:
	    <b>900</b></p>
  <div class='stripe'></div>
  <a href='?postid=1' class='opisanie'>описание</a>
  <a class='buy-small' href='?postid=1'>Купить</a></div>
 </div>
<div class='small-knife sm-right'>
 <p><a href='?postid=2'>Cold Steel Spartan, Grivory Ha</a></p>
 <img src='img/postpics/1336573998_l.jpg'>
 <div class='price-small'>
  <p>цена:
	    <b>800</b></p>
  <div class='stripe'></div>
  <a href='?postid=2' class='opisanie'>описание</a>
  <a class='buy-small' href='?postid=2'>Купить</a>
 </div>
</div>
</div>
</body>
</html>

Вот фрагмент файла style.css:


#tovary {
margin:20px 0px 0px 0px;
width:658px;
}

.small-knife {
width:325px;
height:358px;
margin:0px 0px 10px 0px;
background:#ffffff;
border:1px solid #eaeaea;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

.small-knife p{
width:325px;
text-align:center;
margin:15px 0px 0px 0px;
}

.small-knife p a{
text-decoration:none;
color:#535151;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:bold;
}

.sm-left {
float:left;
}

.sm-right {
float:right;
}

.small-knife img {
width:272px;
height:203px;
margin:5px 0px 0px 26px;
}

.price-small {
width:303px;
height:88px;
margin:9px 0px 0px 11px;
border:1px solid #dedad6;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:0-linear-gradient(top, #fff, #f6fafe);
background: -moz-linear-gradient(top, #fff, #f6fafe);
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#fff), color-stop(100%,#f6fafe));
background: -webkit-linear-gradient(top, #fff, #f6fafe);
background: -o-linear-gradient(top, #fff, #f6fafe);
background: -ms-linear-gradient(top, #fff, #f6fafe);
background: linear-gradient(top, #fff, #f6fafe);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6fafe');
}

.price-small p {
font-weight:normal;
position:relative;
left:16px;
bottom:2px;
display:inline;
}

.price-small p b {
position:relative;
top:30px;
right:36px;
font-size:31px;
font-family:Arial,sans-serif;
color:#c83b00;
}

.stripe {
width:1px;
height:67px;
position:relative;
left:150px;
bottom:27px;
border-right:1px dashed #e2e3e8;
}

.opisanie {
position:relative;
left:175px;
bottom:87px;
font-size:17px;
text-decoration:undreline;
color:#525151;
}

.buy-small {
width:98px;
height:28px;
background-repeat:no-repeat;
background-image:url('img/buy.png');
position:relative;
bottom:73px;
left:170px;
display:block;
color:#ffffff;
font-size:14px;
text-align:center;
padding-top:5px;
font-family:Arial,sans-serif;
text-decoration:none;
}

простите за такой объём сообщения

Привожу скрин из Оперы:

http://imageshack.us/photo/my-images/807/operah.png

И из IE

http://imageshack.us/photo/my-images/824/80178091.jpg

Помогите пожалуйста понять, почему раздуло div class=price-small и почему в нём посыпались элементы

USF · July 7, 2012

смущает большое количество relative объектов, насколько я вижу и без них можно обойтись. и странный способ расположить блок с помощью float

а можно ссылку на страничку, так все же проще проверить в чем ие тупит(судя по картинке могу предположить, что если блоку ширину увеличить, то они все в 1 ряд окажутся). но хотелось бы материал для теста)

Edited July 7, 2012 by USF

ivanivan · July 8, 2012

смущает большое количество relative объектов, насколько я вижу и без них можно обойтись. и странный способ расположить блок с помощью float
а можно ссылку на страничку, так все же проще проверить в чем ие тупит(судя по картинке могу предположить, что если блоку ширину увеличить, то они все в 1 ряд окажутся). но хотелось бы материал для теста)

а как тогда точно выставить элементы в согласии с макетом, если не использовать position:relative ?

мне интересно, почему IE раздувает div.price-small и почему неадекватно расставляет элементы с position:relative

USF · July 8, 2012

а как тогда точно выставить элементы в согласии с макетом, если не использовать position:relative ?

просто. у тебя там 2 больших блока в 1 ряд. тут можно либо оба float:left, либо display:inline-block.

внутри 2 блока. в первом картинка, во втором еще 2 блока в 1 ряд с кнопками купить и ценой. данные внутри можно позиционировать отступами и тд, но никак не position:relative. Не нужен он тут.

структура общая примерно такая

<div id='tovary'> 
  <div class='small-knife'>
     <div class="product-image">
     </div>
     <div>
         <div class="product-price">
         цена
         </div>
         <div class="product-buy">
         купить
         </div>
     </div>
  </div>

  <div class='small-knife'>
     <div class="product-image">
     </div>
     <div>
         <div class="product-price">
         цена
         </div>
         <div class="product-buy">
         купить
         </div>
     </div>
  </div>
</div>

упрощенный схематический вид.

ivanivan · July 8, 2012

исчезнет ли в таком случае проблема раздутости блока с ценой?

USF · July 8, 2012

это предствоит проверить вам. должна, по идее. и повторюсь, неплохо бы страничку в html виде посмотреть, так все же удобнее

Sign In

Помогите с вёрсткой под IE

Question

ivanivan

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

ivanivan

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

ivanivan

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information