SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    IE6 -- prob with dynamic positioning..

    http://mayacove.com/dev/jquery/rollovers.html

    I'm not 100% this is a CSS issue, but I suspect it is..

    when you click on first img, the image in the middle, which gets smaller, is supposed to be moved to the right.. this works everywhere but IE 6.. what could be the problem.. markup and CSS validate....

    thank you..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you are using concentated selectors to give certain offset values to position the others (classes assigned via jquery)

    IE6 is buggy with concentated selectors, so instead of trying to combine the classes I'd just have a unique ID assigned, or a unique class and just do that instead .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, you are using concentated selectors to give certain offset values to position the others (classes assigned via jquery)

    IE6 is buggy with concentated selectors, so instead of trying to combine the classes I'd just have a unique ID assigned, or a unique class and just do that instead .
    concentated selectors.. where? in the JS? I don't have any concentated selectors.... this is line that moves that elem to the right:

    $("a#two-link-a").addClass("move-to-right-div");

    this is not a concentated selector, right?

    and this class does nothing but move that elem to the right, since I don't need to move it in all cases... thank you..

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    concentated selectors.. where? in the JS? I don't have any concentated selectors....
    Yes you do

    Here:

    Code:
    a#one-link-a.active {}
    a#two-link-a.active {}
    a#three-link-a.active {}
    IE6 doesn't understand that and it will fail as you have found out.

    You will need to add a unique class to each and don't target it via id.classname and then it will work.

    You will need to maintain the same weight so prefix it with the id from a parent like so:
    e.g.

    Code:
    #mainContent .active{}
    #mainContent .active2{}
    #mainContent .active3{}
    Of course you will need to change the JS to apply a different class to each item accordingly.

    Hope that helps

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    this is a concatenated selector?

    a#three-link-a.active {}

    I thought this only applied to when you have more than one CLASS in a selector, not an element with an identifier and a class for that element.. this is pretty standard CSS stuff.. oh brother...

    if I have these all over the place, don't understand why only that one line of JS is being ignored by IE6.. oh man.. ok.. thank you..

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so now have just:

    .move-to-right-div {position:absolute; bottom:0px; left:165px; }
    ( I didn't really need to ref. element there..)

    js line adding that class is still being ignored by IE6.. :-(

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you are sure the JS isn't ac tually adding it then head on over to the JS section.

    And yes that is a concentated selecctor.. You can concentate IDs and classes (not just classes and classes )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    [/QUOTE]And yes that is a concentated selecctor.. You can concentate IDs and classes (not just classes and classes )[/QUOTE]

    oh yes I know that...;-) I've known that for a long time.. just didn't know it could cause a problem in IE.. thank you very much.. will check in JS section, I guess.. (or maybe jQuery forum.. come to think of it, maybe I shd try traditional JS for this one instead of jQuery...;-)

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well if you are only using JS for this small thing then incorporating an entire library might be overkill .

    PS-It's only IE6 that has buggy behavior with this
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If I'm not mistaken you can just do this:

    Code:
    .move-to-right-div {
        position:absolute;
        bottom:0px;
        left:165px!important;
    }
    Full code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <style type="text/css">
    /* ======================================= */
    
    html {
        overflow-y: scroll;
    }
    body {
        margin:0 0 20px 0;
        font-family:arial, verdana, helvetica, geneva, sans-serif;
        font-size:12px;
        letter-spacing:1px;
        color:#666;
    }
    #wrapper {
        width:960px;
        padding:0;
        margin:0 auto;
        position:relative;
    }
    #mainContent {
        margin:0;
        position:relative;
        width:958px;
        border:solid 1px #CCC;
    }
    img {
        border:none;
    }
    .hide {
        display:none;
    }
    .show {
        display:block;
    }
    #mainContent {
        height:450px;
    }
    .test {
        width:410px;
        margin:0 0 5px 0;
        font-weight:bold;
        font-size:12px;
        text-align:center;
    }
    .sub-div {
        position:relative;
        margin:120px auto 0 auto;
        width:415px;
        height:145px;
    }
    .sub-div-links {
        position:relative;
        height:145px;
        width:415px;
    }
    a#one-link-a {
        position:absolute;
        bottom: 0;
        left:0;
        display:block;
        width:105px;
        height:105px;
        background:url(http://mayacove.com/dev/jquery/images/1.jpg) no-repeat;
    }
    a#one-link-a.active {
        width:145px;
        height:145px;
        background:url(http://mayacove.com/dev/jquery/images/1-roll.jpg) no-repeat;
    }
    a#two-link-a {
        width:105px;
        height:105px;
        position:absolute;
        bottom: 0;
        left:130px;
        display:block;
        background:url(http://mayacove.com/dev/jquery/images/2.jpg) no-repeat;
    }
    a#two-link-a.active {
        width:145px;
        height:145px;
        background:url(http://mayacove.com/dev/jquery/images/2-roll.jpg) no-repeat;
    }
    a#two-link-a.move-to-right-div {
        position:absolute;
        bottom:0px;
        left:165px;
    }
    a#three-link-a {
        position:absolute;
        bottom: 0;
        left:300px;
        display:block;
        width:105px;
        height:105px;
        background:url(http://mayacove.com/dev/jquery/images/3.jpg) no-repeat;
    }
    a#three-link-a.active {
        left:260px;
        width:145px;
        height:145px;
        background:url(http://mayacove.com/dev/jquery/images/3-roll.jpg);
    }
    .sub-one-captions {
        position:relative;
        margin:20px 0 15px 0;
        width:410px;
        height:40px;
    }
    .sub-one-captions div {
        background:#eee;
        height:40px;
        text-align:center;
        font-weight:bold;
    }
    .caption-one {
        width:105px;
        position:absolute;
    }
    .active-caption-one {
        color:#211E89;
        width:145px;
    }
    .caption-two {
        width:105px;
        position:absolute;
        bottom: 0;
        left:130px;
    }
    .active-caption-two {
        color:#211E89;
        width:145px;
    }
    .move-to-right {
        position:absolute;
        left:165px;
    }
    .move-to-right-div {
        position:absolute;
        bottom:0px;
        left:165px!important;
    }
    .caption-three {
        width:105px;
        margin:0;
        position:absolute;
        left: 300px;
        top:0px;
    }
    .active-caption-three {
        color:#211E89;
        width:145px;
        left:260px;
    }
    .copy-div {
        width:250px;
        margin:0 auto;
        text-align:center;
    }
    </style>
    <script type="text/javascript" src="http://mayacove.com/dev/jquery/js/jquery-1.4.2.js"></script>
    <!--<script type="text/javascript" src="http://mayacove.com/dev/jquery/js/main.js"></script>-->
    <script type="text/javascript">
    $(function() {
    
        $("a.linkTwo").addClass("active");
        $(".caption-two").addClass("active-caption-two");
        $(".copy-one").hide();
        $(".copy-three").hide();    
            
                $("a.animated").mouseover(function(e) {            
                      var targetEl = e.currentTarget;    
                    $(targetEl).addClass("active");                    
                    var thisID = $(targetEl).attr("id");
                    var _thisID = thisID.substr(0,3);
    
                    if (_thisID == "one") {
                        $("a#one-link-a").addClass("active");
                        $("a#two-link-a").addClass("move-to-right-div");                    
                        $("a#two-link-a").removeClass("active");    
                        $("a#three-link-a").removeClass("active");        
                                                        
                        $(".caption-one").addClass("active-caption-one");    
                        $(".caption-two").removeClass("active-caption-two");
                        $(".caption-two").addClass("move-to-right");                        
                        $(".caption-three").removeClass("active-caption-three");    
                        $(".caption-three").addClass("move-to-right");    
                                        
                        $(".copy-one").show();
                        $(".copy-two").hide();            
                        $(".copy-three").hide();        
                    }
                    
                    if (_thisID == "two") {
                        $("a#one-link-a").removeClass("active");    
                        $("a#two-link-a").addClass("active");
                        $("a#two-link-a").removeClass("move-to-right-div");                                                                    
                        $("a#three-link-a").removeClass("active");    
                        
                        $(".caption-one").removeClass("active-caption-one");    
                        $(".caption-two").addClass("active-caption-two");
                        $(".caption-two").removeClass("move-to-right");                    
                        $(".caption-three").removeClass("active-caption-three");    
                                        
                        $(".copy-one").hide();
                        $(".copy-two").show();                        
                        $(".copy-three").hide();                        
                    }
    
                    if (_thisID == "thr") {    
                        $("a#one-link-a").removeClass("active");    
                        $("a#two-link-a").removeClass("active");                                        
                        $("a#two-link-a").removeClass("move-to-right-div");    
                        
                        $(".caption-one").removeClass("active-caption-one");    
                        $(".caption-two").removeClass("active-caption-two");
                        $(".caption-three").addClass("active-caption-three");        
                                        
                        $(".copy-one").hide();
                        $(".copy-two").hide();                        
                        $(".copy-three").show();                        
                    }
            });
    }); 
    </script>
    </head>
    <body>
    <div id="wrapper">
        <div id="mainContent">
            <div id="divOne">
                <div class="sub-div">
                    <div class="sub-div-links"> <a class="animated linkOne"   id="one-link-a" href=""></a> <a class="animated linkTwo"   id="two-link-a" href=""></a> <a class="animated linkThree" id="three-link-a" href=""></a> </div>
                    <div class="sub-one-captions">
                        <div class="caption-one"> CAPTION<br />
                            ONE </div>
                        <div class="caption-two"> CAPTION<br />
                            TWO </div>
                        <div class="caption-three"> CAPTION<br />
                            THREE </div>
                    </div>
                    <!-- sub-one-captions -->
                    <div class="copy-div">
                        <div class="copy-one"> <b>-- one -- </b><br/>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt </div>
                        <div class="copy-two"> <b>-- two -- </b><br/>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt </div>
                        <div class="copy-three"> <b>-- three -- </b><br/>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt </div>
                    </div>
                    <!-- copy-div-one -->
                </div>
                <!-- sub-div-one -->
            </div>
            <!-- divOne -->
        </div>
        <!-- mainContent -->
    </div>
    <!-- wrapper -->
    </body>
    </html>

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much all for your responses.. am completely stumped here, as still haven't gotten this to work in IE6..

    finally managed to make it work in a bare-bones
    http://mayacove.com/dev/jquery/rollovers2.html

    in which used div instead of <a>, this is the only way that IE finally moved it..
    but here element moused over is moved....

    but here,
    http://mayacove.com/dev/jquery/rollovers.html
    in which I also used div instead of <a> (it's not a link so it doesn't matter), IE6 just won't move it... when mouseover other element

    I just don't get this...

    thank you..

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As far as I can tell the code I posted in post #10 is working fine in IE6. I just copied and pasted it again and it seems to be working fine unless I am missing something.

    Just copied all your code again and changed this:

    Code:
    #link2.move-to-right-div {
        position:absolute;
        bottom:0px;
        left:165px;
    }
    To this:

    Code:
    .move-to-right-div {
        position:absolute;
        bottom:0px;
        left:165px!important;
    }
    and it seems to work fine in IE6 unless I'm missing something important and obvious.

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    indeed this finally worked.. thank you very much..

    I guess I had tried the !important with <a>, not <div>

    IE6 moves it ONLY if it's a div, not <a>.... for <a> tried all these in CSS:

    a#two-link-a.move-to-right-link {position:absolute; bottom:0px; left:165px!important;}

    a.move-to-right-link {position:absolute; bottom:0px; left:165px!important;}

    .move-to-right-link {position:absolute; bottom:0px; left:165px!important;}


    and none of them worked.. bottom line: IE6 will move it ONLY with !important AND only if it's a div..

    finally.. oh man... thank you very much..


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
  •