SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image rotate ie problem

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

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Which version of IE are you using? 8 doesn't support transform, and 9 requires the -ms- prefix. http://caniuse.com/#search=rotate

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Great. It's always nice when it's an easy fix.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •