image rotate ie problem

**foshan** · Jan 20, 2013 12:58

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

Code HTML4Strict:

<!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

Code 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;
}

**TechnoBear** · Jan 20, 2013 13:23

Which version of IE are you using? 8 doesn't support transform, and 9 requires the -ms- prefix. http://caniuse.com/#search=rotate

**foshan** · Jan 20, 2013 13:47

Originally Posted by TechnoBear

Which version of IE are you using? 8 doesn't support transform, and 9 requires the -ms- prefix. http://caniuse.com/#search=rotate

Thanks TechnoBear,
I am using version 9 and -ms- prefix and all is ok. Thanks for the link as well very helpful.

**TechnoBear** · Jan 20, 2013 13:48

Great. It's always nice when it's an easy fix.

**ralph.m** · Jan 20, 2013 15:18

Also, when using experimental properties, make sure to put the normal version (without the prefixes) last, so that it's the last thing a browser sees. Down the track, if not now, having them in a different may cause problems.

So, instead of this:

Code:

transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);

you should have this:

Code:

-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);

IE9 needs -ms-, but IE10 doesn't.

**foshan** · Jan 21, 2013 13:46

Originally Posted by ralph.m

Also, when using experimental properties, make sure to put the normal version (without the prefixes) last, so that it's the last thing a browser sees. Down the track, if not now, having them in a different may cause problems.

So, instead of this:

Code:

transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);

you should have this:

Code:

-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);

IE9 needs -ms-, but IE10 doesn't.

Thanks for the info Ralph

User Tag List

Thread: image rotate ie problem

Thread Tools

Display

image rotate ie problem

Bookmarks

Bookmarks

Posting Permissions