Hi all,
Can someone please tell me why my images won’t rotate in internet explorer. Everything seems to be fine in firefox and Chrome.
Code is as follows
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>East Midlands Magic</title>
<link rel="stylesheet" href="primary.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="images/header.jpg" alt="header" width="960" height="110">
</div>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="magic.html">Magic</a></li>
<li><a href="">Photographs</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="http://markrobertsmagic.blogspot.co.uk/">Blog</a></li>
<li><a href="">contact</a></li>
</ul>
<div id="content">
<h2>Welcome to East Midlands Magic</h2>
<img src="images/markroberts.jpg" alt="Mark roberts" width="300" height="200" class="floatright">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus lacinia tellus, a egestas felis ultrices sit amet. Vestibulum sit amet lorem ligula.</p>
<p>In erat lacus, ultricies id feugiat ut, tincidunt venenatis justo. Suspendisse pretium pellentesque leo. Pellentesque viverra, elit placerat dignissim tempor, quam nisl placerat dolor, vitae pharetra turpis lacus eget ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet odio in ligula scelerisque id sagittis mi tincidunt. Sed sed turpis nisi, pulvinar ultricies diam. Nulla sed ipsum nec ligula fringilla tincidunt. Ut tempor, ipsum nec sagittis congue, dui leo posuere arcu, a cursus massa nisl blandit nunc. Nunc id metus massa. Phasellus iaculis cursus tincidunt. Maecenas ullamcorper dolor sed metus luctus vel consequat neque accumsan. Aliquam erat volutpat. Integer augue tortor, venenatis sed viverra in, interdum molestie lacus. Duis ac malesuada mi. Pellentesque eu neque dui. Nullam eu sapien et enim sollicitudin mollis ultricies et urna. Cras quis diam tincidunt tellus suscipit tristique. </p>
<img src="images/wedding.jpg" alt="mindwarped" width="300" height="200" class="floatleft">
<p>Fusce tortor augue, lacinia in tempus sed, porttitor lobortis tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus urna in massa molestie adipiscing. Ut pellentesque iaculis lacus ac tristique. Nulla non massa nec nisi rhoncus sodales ornare in nulla. Nam purus nisi, lacinia quis commodo nec, suscipit nec mi. Maecenas elit augue, molestie quis volutpat nec, consequat sagittis ante. Donec tempus vulputate facilisis. Suspendisse potenti. Aenean nunc mauris, iaculis vel varius tincidunt, ultricies eu lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla a urna leo. </p>
</div>
<div id="footer">
<ul class="footernav">
<li><a href="index.html">Home</a></li>
<li><a href="magic.html">Magic</a></li>
<li><a href="">Photographs</a></li>
<li><a href="">videos</a></li>
<li><a href="">Testmonials</a></li>
<li><a href="http://markrobertsmagic.blogspot.co.uk/">Blog</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {
margin:0 auto;
background:#666;
color:#fff;
font:arial;
}
#container {
width:960px;
margin:0 auto;
margin-top:5px;
background:#333;
-webkit-box-shadow:7px 7px 5px 3px #000;
-moz-box-shadow:7px 7px 5px 3px #000;
box-shadow:7px 7px 5px 3px #000;
}
#header {
width:960px;
height:110px;
}
a {
outline:none;
}
.nav {
position:relative;
top:0;
width:100%;
float:left;
background-color:#000;
list-style:none;
padding:0;
margin:0;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.nav li {
float:left;
}
.nav li a {
position:relative;
left:90px;
display:block;
padding:5px 20px;
text-transform:uppercase;
text-decoration:none;
color:#ccc;
}
.nav a:hover {
background:#333;
color:#fff;
}
#header h1 {
margin:0;
position:relative;
top:20px;
left:40px;
}
#content {
float:left;
width:937px;
height:670px;
background:#000;
-moz-border-radius:20px;
border-radius:20px;
margin:10px;
border:2px solid #666;
}
#content h2 {
color:#999;
text-align:center;
}
#content p {
padding:0 20px 0 20px;
}
#content img.floatright {
transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
float:right;
margin:20px;
border:2px solid #fff;
}
#content img.floatleft {
transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
float:left;
margin:20px;
border:2px solid #fff;
}
#footer {
clear:both;
background:#000;
height:30px;
}
.footernav {
margin:0;
}
.footernav li {
list-style:none;
display:inline-block;
margin:5px;
}
.footernav a {
color:#ccc;
text-decoration:none;
padding:30px;
}
.footernav a:hover {
color:#fff;
}
