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…
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…
Yes you do 
Here:
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.
#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
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…
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… 
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 :))
[/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…
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
If I’m not mistaken you can just do this:
.move-to-right-div {
position:absolute;
bottom:0px;
left:165px!important;
}
Full 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>
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…
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:
#link2.move-to-right-div {
position:absolute;
bottom:0px;
left:165px;
}
To this:
.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.
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:
[FONT=“Courier New”]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;}[/FONT]
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…