ivanivan
-
Posts
5 -
Joined
-
Last visited
ivanivan's Achievements
Explorer (1/14)
0
Reputation
-
Огромное спасибо Как ни странно - у меня тоже IE9, но Вы сами всё видели Ваш ответ здорово помог
-
помогите исправить ошибку отображения элементов должно быть так (из Оперы) : 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; } Прошу прощения за почти что повтор темы, просто очень хочется, чтоб помогли разобраться с этой хренью
-
исчезнет ли в таком случае проблема раздутости блока с ценой?
-
а как тогда точно выставить элементы в согласии с макетом, если не использовать position:relative ? мне интересно, почему IE раздувает div.price-small и почему неадекватно расставляет элементы с position:relative
-
Помогите пожалуйста с блочной версткой В нормальных браузерах сайт отображается нормально, но в 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 и почему в нём посыпались элементы