jquery and IE6 problems

[gemelli2]

hi – i’m working on a site and using the moving boxes jquery script. everything looks great EXCEPT for IE6!
it’s breaking out all over the place. I’ve tried all sorts of things with css to fix it but then everything else goes out of whack. Anyone out there have experience with this happenning in explorer 6 ? Is this something that can be fixed with a hack? Any help would be much appreciated!
thanks,
lisa

page: http://www.artisansgallery-cafe.com/our-menu.html
css:http://www.artisansgallery-cafe.com/css/style2.css

[TheDoc]

Give this a go:

http://code.google.com/p/ie7-js/

[gemelli2]

thanks for the tip. i applied it to the page and unfortunately it did not affect it. Cleared cache history etc. I also did a display: inline to the .slide and … nothing! The slider seems to float left below the left sidebar and display’s the entire #mover div. Here’s some of the css for the slider:

Code:

*{ margin: 0; padding: 0; }
#slider {
height: 472px;
overflow: hidden;
position: relative;
margin: 20px 0;
background-color: #F7EDC7;
background-image: url(../images/slider-bg2.jpg);

}

#mover {
width: 2358px;
position: relative;
}

.slide {
width: 888px;
float: left;
position: relative;
padding-top: 120px;
padding-right: 30px;
padding-bottom: 26px;
padding-left: 40px;
display:inline;

}
.slide h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 24px;
color: #9C8462;
}
.slide p {
color: #A68049;
font-size: 13px;
line-height: 18px;
width: 300px;
text-indent: 10px;
}
.slide img {
position: absolute;
top: 88px;
left: 349px;
}
#slider-stopper {
position: absolute;
top: 1px;
right: 20px;
color: #F7EDC7;
padding: 3px 8px;
font-size: 10px;
text-transform: uppercase;
z-index: 1000;
background-color: #642C2C;
}

I’m wondering if something with the specificity from the other styles could be forcing it to break out??
I actually have them embedded in the page:

Code:

Works beautifully in firefox and even IE7.
Any ideas???
Thank you in advance,
-Lisa

[apostrophe]

I’m on a mac so I’m only seeing your page in ie on IENetRenderer.
I think your problem in ie6 is the double margin bug. I’ve played around a bit with firebug and this certainly won’t break anything in firefox and it may just help in ie6.

Code:

#left_sidebar {
background-color:#A68049;
border:thin solid #642C2C;
clear:left;
float:left;
left:5px;
margin:100px 5px 0 0;
padding:0 0 10px;
position:relative;
width:175px;
}

#slider {
background-color:#F7EDC7;
background-image:url(../images/slider-bg2.jpg);
float:right;
height:472px;
margin:20px 0;
overflow:hidden;
position:relative;
width:780px;
}

[gemelli2]

i changed the css and you’re right – it didn’t affect firefox but it actually now is dropping in IE 7 now.
The good news is that in IE6, the slider is contained and is pretty much appearing the same as it is in IE7 (dropping below the left sidebar)
??????

[apostrophe]

Look at the code I posted again, specifically for the sidebar. Note that I removed the left margin and positioned it instead 5px from the left, you haven’t. Actually, on reflection you can ditch the right margin as well, it’s not doing anything. So what happens when the code for the sidebar looks like this:

Code:

#left_sidebar {
background-color:#A68049;
border:thin solid #642C2C;
clear:left;
float:left;
left:5px;
margin:100px 0 0;
position:relative;
width:175px;
}

[gemelli2]

my bad – i added that to the css and now it has corrected itself in IE7 BUT of course, IE6 is still dropping. Also, I noticed that on IE6 the second slide is sort of appearing as if it is a lot taller than the other two or it is dropping below where the other two appear when they scroll.

Another thing, in dreamweaver it does say that it is an expanding box issue.

thanks for helping on this BTW — greatly appreciated

Would a screenshot help???

[apostrophe]

I’m now getting this message from IENetRenderer for your page in ie6:

Quote:

Error 105. Your web page has caused Internet Explorer to crash. Please do not abuse this service. To protect this service against abuse, we are continuously logging all requests and will take all necessary actions to stop vandalism.

Though it renders in ie7 no problem.
Just out of curiosity, what happens in ie6 if you make the width of #slider 10px less so it’s 770px wide?
As for the other problem, I must admit I don’t have a clue at the moment as all three slide divs have the same rules applied to them, a screenshot may help.

[gemelli2]

actually i just wrote a conditional css for the container to be a bit wider and it fixed the drop. Not the best way to deal with it because i like the container to look the same throughout the site but, hey, it did the trick. That said, the thing i was talking about before is still happening. I made a screenshot of it: [img]http://www.artisansgallery-cafe.com/1.jpg[/img]

don’t know why you got that crash report – maybe if we got everyone to stop using IE our lives would be a lot simpler!
does this make sense that it is doing this? I’m totally stumped!

[apostrophe]

About the only thing I can suggest is to increase the width and/or decrease the padding for .slide
As for ie users, I’ve started charging more money to anybody who wants their site pixel perfect in ie6, otherwise ie6 users get a simplified version of what everybody else sees. ;)

[gemelli2]

well, i tried to play around with with the padding but then it starts making a mess of everything so i am going to give up on that page. Of course I have another to contend with which also has a jquery involved. You are right, i never thought i’d spend this much time on this site and it’s all because of ie6! More money sounds good right about now.
Thanks for all of your help on this issue – i really appreciated it!!
–lisa

[Author]

Posts