Проблема с ИЕ 8. вновь каряво - HTML и CSS

Bariy47 · 01.02.2013, 16:08

Добрый день
До этого была проблема что коряво было во всех ИЕ сейчас в более новых всё отлично работает, осталось разобраться с ИЕ8
Помогите советом с вёрсткой
вот код

Цитата:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

</head>
<body>
<script src="jquery.js">

</script>
<script src="jQueryRotateCompressed.2.2.js" >

</script>
<style>

.card {
-webkit-transition:z-index 0s ease 1s;
-moz-transition-property:z-index;
-moz-transition-delay:0.25s;
z-index:10;
display:none;
}

.card:hover {
z-index:100;
}

img#bigcard {
position:absolute;
left: 500;
margin-left: -150px;
top: 500;
margin-top: -450px;
top:455px;
left:300px;
width:300px;

height:450px;
display:none;
}
</style>

<script>
function ShowImage(img){
$('#bigcard').attr('src',img.attr(' src'));
$('#bigcard').css('z-index','100');
$('#bigcard').show(400);
};
</script>

<script>
$(document).ready(function() {
$('#card1').rotate(-60);
$('#card1').show(400);
// $('#card1').css('top','170px');
//$('#card1').css('left','100px');

$('#card2').rotate(-30);
$('#card2').show(600);
// $('#card2').css('top','120px');
// $('#card2').css('left','150px');
$('#card3').show('slow');

$('#card4').rotate(30);
$('#card4').show(800);
// $('#card4').css('top','120px');
// $('#card4').css('left','250px');

$('#card5').rotate(60);
$('#card5').show(1000);
// $('#card5').css('top','170px');
// $('#card5').css('left','300px');

$('.card').click(function() {ShowImage($(this))});
$('#bigcard').click(function() {$(this).hide(300)});
});

</script>

<img id="card1" class="card" src="card_1.jpg" style="position: absolute; top: 170px; left: 100px; width: 200px; height: 300px; transform: rotate(-60deg); display: inline;">

<img id="card2" class="card" src="card_2.jpg" style="position: absolute; top: 120px; left: 150px; width: 200px; height: 300px; transform: rotate(-30deg); display: inline;">
<img id="card3" class="card" src="card_3.jpg" style="position: absolute; top: 100px; left: 200px; width: 200px; height: 300px; display: inline;">
<img id="card4" class="card" src="card_4.jpg" style="position: absolute; top: 120px; left: 250px; width: 200px; height: 300px; transform: rotate(30deg); display: inline;">
<img id="card5" class="card" src="card_5.jpg" style="position: absolute; top: 170px; left: 300px; width: 200px; height: 300px; transform: rotate(60deg); display: inline;">
<img id="bigcard" src="" style="">

</body>

</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
W7 Автоматическое переименование вновь созданных файлов	grablin	Операционные системы общие вопросы	8	19.03.2012 01:24
и вновь матрица	Litoi	Помощь студентам	25	04.01.2011 02:17
И вновь COM-порт	SilverRulezz	Общие вопросы C/C++	2	17.10.2010 20:01
И вновь проблема с DateTimePicker	sl963	БД в Delphi	15	06.06.2010 17:15
Защита листа вновь созданой макросом книги.	КаМММ	Microsoft Office Excel	1	27.04.2009 06:14