dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Weird IE7&8 Problem

  1. #1
    Join Date
    May 2012
    Posts
    2

    Question Weird IE7&8 Problem

    OK, I have only been designing and deveploing sites for just a little bit. I am working on a site for a tattoo studio. They wanted a "knob" that turns. OK no problem just a little jQuery. It works; however; in IE 7 & 8 the knob "flys" to a new postion when it rotates. I have no clue why or how to fix it. Any help with how to over come this problem would be great!

    here is a snip of the css code:

    body {
    background-color: #000;
    }


    img {
    border: none;
    }


    /***** wrapper *****/
    .wrapper {
    width: 1280px;
    height: 750px;
    background-color: #CCC;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
    padding: 0;
    margin-bottom: 0px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    }

    /***** header *****/
    .header {
    width: inherit;
    height: 200px;
    background-color: #FFF;
    background-image: url(../images/header.jpg);
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    padding: 0;
    margin:0;
    }

    .headerSpacer {
    width: inherit;
    height: 20px;
    background-color: #000;
    padding: 0;
    margin: 0;
    }

    .header img {
    margin-top: 15px;
    float: right;

    }

    /***** insideWrapper *****/

    .insideWrapper {
    width: inherit;
    height: 580px;
    padding: 0;
    margin: 0;
    background-image: url(../images/inner.jpg);
    background-repeat: repeat;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    }

    /***** content wrapper *****/

    .contentWrapper {
    background-color: transparent;
    background-image: url(../images/content.png);
    width: 1250px;
    height: 538px;
    position:absolute;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    }
    /***** navBar ****/
    .navBar {
    width: 1210px;
    height: 120px;
    background-color: transparent;
    position: absolute;
    margin: 20px 20px;
    background-image: url(../images/header2.jpg);
    }

    /***** powerBox *****/
    .powerBox {
    height: inherit;
    width: 150px;
    margin-right: 25px;
    background-color: transparent;
    float: right;
    top: 40px;
    }

    .powerBox img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 150px;
    }


    /***** navMenu *****/
    .navMenu {
    float: right;


    /* position: absolute;*/
    height: 180px;
    width: 350px;
    background-color: transparent;
    }

    /*.menuKnob {
    margin-top: 200px;
    margin-right: 250px;
    position: absolute;
    }

    .bookingLink {
    margin-left: 45px;
    margin-top: 75px;
    position: absolute;
    }

    .contactLink{
    margin-left: 45px;
    margin-top: 60px;
    position: absolute;
    }
    .artistLink {
    margin-left: 45px;
    margin-top: 30px;
    position: absolute;
    }

    */.studioLink{
    width: 100px;
    height: 35px;
    }

    /***** inner content wrapper *****/

    .innerContentWrapper {
    width: 1200px;
    height: 480px;
    margin-top: 25px;
    margin-left: 27px;
    margin-right: 20px;
    background-color: transparent;
    }

    /***** footer *****/
    .footer {
    width: 1210px;
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;
    background-color: transparent;
    }

    and

    #knob
    {
    height: 200px;
    width: 300px;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-color: transparent;
    }
    #knob>* { position: absolute; }
    #knob img,#knob div
    {
    user-select: none;
    width:100px;
    height:100px;
    left: 60px;
    top: 30px;
    }
    /*#knob a:visited{color:green}
    #knob a:link{color:green}*/
    a[href="index.html"]{
    left: -75px;
    top: 80px;
    background-image: url(../images/studioOff.png);
    width: 150px;
    height: 50px;
    }
    #knob a[href="artist.html"]{
    left: 45px;
    top: 2px;
    background-image:url(../images/artistOff.png);
    width: 150px;
    height: 50px;
    }
    #knob a:hover[href="index.html"]{
    background-image: url(../images/studioOn.png);
    background-color: transparent !important;
    }
    #knob a:hover[href="artist.html"]{
    background-color: transparent !important;
    background-image:url(../images/artistOn.png);
    }
    #knob a:hover[href="contact.html"]{
    background-image:url(../images/contactOn.png);
    }
    #knob a:hover[href="booking.html"]{
    background-image:url(../images/bookingOn.png);
    }
    #knob a[href="contact.html"]{
    left: 175px;
    top: 80px;
    background-image:url(../images/contactOff.png);
    width: 150px;
    height: 50px;
    }
    #knob a[href="booking.html"]{
    left: 50px;
    top: 150px;
    width: 150px;
    height: 50px;
    background-image: url(../images/bookingOff.png);
    }
    #knob a[href="#feed"]{
    left: 45px;
    top: 45px;
    }
    .dialed{color:red !important;}


    for html and jQuery code here:

    <!--css rules-->
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>
    <link rel="stylesheet" href="css/royalslider.css" />
    <link rel="stylesheet" href="css/royalslider-skins/default/default.css" />
    <link rel="stylesheet" href="css/royalslider-skins/iskin/iskin.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/stylesheetIE9.css" type="text/css"/>
    <![endif]-->
    <link rel="stylesheet" href="css/royalslider-preview.css" />



    <!-- preview-related stylesheet -->
    <link rel="stylesheet" href="css/royalslider-preview.css" />
    <!--javaScript-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
    <!--<script src="js/knob.js"></script>-->

    <script src="js/jquery.easing.1.3.min.js"></script>
    <script src="js/royal-slider-8.1.min.js"></script>
    <script>

    $('#studio').mouseover(function() {
    $('.menuKnob').rotate({
    //angle: 0,
    animateTo: 45,
    duration: 500
    });
    });
    $('#artist').mouseover(function() {
    $('#knob').rotate({
    //angle: 0,
    animateTo: 45,
    duration: 500
    });
    });

    $('#booking').mouseover(function() {
    $('#knob').rotate({
    //angle: 0,
    animateTo: 113,
    duration: 500
    });
    });
    $('#contact').mouseover(function() {
    $('#knob').rotate({
    //angle: 0,
    animateTo: 135,
    duration: 500
    });
    });

    </script>

    <script>

    </script>
    </head>

    <body>
    <div class="wrapper">
    <div class="header">

    <img src="images/logo6.png" alt="Revolution Ink's logo"/>
    <div class="navMenu" id="knob">
    <img id="knob2" src="images/knob.png" alt="menu control knob" />
    <a id="studio" class="studioLink" href="index.html"><!--<img src="images/studioLink.png" alt="Studio Link" />--></a>
    <a id="artist" class="artistLink" href="artist.html"></a>
    <a id="contact" class="contactLink" href="contact.html"></a>
    <a id="booking" class="bookingLink" href="booking.html"></a>
    </div><!--end of navMenu-->
    </div><!--end of header-->
    <div class="headerSpacer">
    <div class="subNav">
    <ul>
    <li><a href="links.html">Links</a></li>
    <li><a href="fqa.html">FQA</a></li>
    </ul>
    </div>
    </div><!--end of headerSpacer-->

  2. #2
    Join Date
    Mar 2012
    Location
    bangalore,india
    Posts
    27
    IE does support BORDER RADIUS..all you have to do is to download ie.htc file and store it in the directory containg your actual code..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles