Снова IE

[ivanivan]

помогите исправить ошибку отображения элементов

должно быть так (из Оперы) :

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

а в ИЕ вот так:

http://imageshack.us/photo/my-images/19/57035201.png/

помогите пожалуйста исправить этот баг

привожу фрагмент файла index.html:

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

и style.css

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

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

.small-name {
width:325px;
margin:4px 0px 2px 0px;
text-align:center;
}

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

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

.small-img img {
border:none;
}

.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 {
width:134px;
height:65px;
margin:12px 0px 0px 17px;
border-right:1px dashed #e2e3e8;
float:left;
}

.price b {
font-size:31px;
font-family:Arial,sans-serif;
color:#c83b00;
}

.buy {
margin:16px 0px 0px 168px;
}

.opisanie {
font-size:17px;
text-decoration:underline;
color:#525151;
}

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

Прошу прощения за почти что повтор темы, просто очень хочется, чтоб помогли разобраться с этой хренью

[Николя223]

http://imageshack.us/photo/my-images/834/79618884.jpg/

Мне сложно что либо написать , у меня explorer (9) - справа, отображает страницу почти также как хромиум. (различия связанны с отсутствием картинки)

думаю это из-за float - попробуй его убрать.

вот немного подогнал, но по хорошему все это на таблицах переверстать - практичней!)))

только фон - картинку верни)

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

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

.small-name {
width:325px;
margin:4px 0px 2px 0px;
text-align:center;
}

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

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

.small-img img {
border:none;
}

.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 {
width:134px;
height:65px;
margin:12px 0px 0px 17px;
border-right:1px dashed #e2e3e8;
position:absolute;

}

.price b {
font-size:31px;
font-family:Arial,sans-serif;
color:#c83b00;
}

.buy {margin:16px 0px 0px 168px;position:absolute;width:120;
}

.opisanie {
font-size:17px;
text-decoration:underline;
color:#525151;
margin-left:5px;
}

.buy-small {border-radius:5px;
width:98px;
height:auto;
background-repeat:no-repeat;
background:green;
color:#ffffff;
font-size:14px;
padding-top:5px;
padding-bottom:5px;
font-family:Arial,sans-serif;
text-decoration:none;
display:block;
text-align:center;
}
</STYLE>

Edited July 9, 2012 by Николя223

[ivanivan]

Огромное спасибо

Как ни странно - у меня тоже IE9, но Вы сами всё видели

Ваш ответ здорово помог