Download & Extend

Won't display in Internet Explorer 6

Project:Nodecarousel
Version:6.x-1.x-dev
Component:Code
Category:support request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I'm nearly finished with my site, but I have one thing left to figure out. My node carousel doesn't display in IE 6. It shows the list numbers, but that's it. I'm completely stumped. Any ideas any of you may have as to why it won't display in IE 6 would be greatly appreciated.

You can see it here: http://beta.menashalibrary.org

Here's what I have in my template.php:

function deco_nodecarousel_node($node, $name='') {
  $content = '<div class="node-carousel-item">';
  $image_node = node_load($node->iid);
$content .= '<div class="carousel-image">'. theme('imagecache', 'featured', $node->field_image[0]['filepath']) .'</div>';
  $content .= '<div class="hidden nid">'. $node->nid .'</div>';
  $content .= '<div class="teaser"><div class="featured-title">'.l($node->title, 'node/' .$node->nid) .'</div><div class="node-carousel-index">'. $node->teaser .' <div id="read-more"> '.l('[Read More]', 'node/'. $node->nid).' </div></div></div>';
  $content .= '</div>';
  return $content;
}

And, here's what I have in my css file:

#nc_wrapper_whatsnew {
padding: 0 0 15px 0;
width: 661px;
height: 229px;
margin: 0 auto;
}
/*#nc_wrapper_whatsnew .carousel-image {
width: 661px;
overflow: hidden;
padding-left: 0;
margin-left: -4px;
} */
#nc_wrapper_whatsnew ul#nc_whatsnew {
list-style: none;
width: 661px;
height: 229px;
overflow: hidden;
margin-right: -3px;
}
#nc_wrapper_whatsnew ul#nc_whatsnew li {
margin: 0;
}
#nc_wrapper_whatsnew ul.index_control_list {
position: absolute;
z-index: 3;
display: inline;
list-style: none;
float: right;
padding: 0;
margin-top: -220px;
margin-left: 510px;
}
#nc_wrapper_whatsnew ul.index_control_list li {
display: inline;
list-style: none;
padding-left: 6px;
padding-top: 2px;
padding-right: 10px;
font-size: 12px;
}
#block-nodecarousel-nc_whatsnew h2.title {
display: none;
}
#nc_wrapper_whatsnew .teaser {
position: relative;
right: 0px;
padding-left: 6px;
top: -234px;
width: 169pt;
height: 229px;
bottom: 0;
/* background: rgba(0,0,0,0.6); */
background: black;
display: block;
float: right;
color: #cecece;
line-height: 1.1em;
filter: alpha(opacity=75);
opacity: 0.75;
-moz-opacity: 0.75;
}
.teaser a {
color: #cecece;
}
#read-more a { color: white; }
#read-more {
margin-top: 4px;
}
#nc_wrapper_whatsnew .featured-title a {
color: white;
}
.teaser .featured-title {
margin-top: 30pt;
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
}
.node-carousel-index {
width: 160pt;
padding: 6px 4px;
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
font-size: .9em;
}
.jcarousel-item-horizontal {
margin:0px;
}

/* fixes for IE 6 */

* html #nc_wrapper_whatsnew .teaser {
margin-top: 5px;
z-index: 10000;
background: black;
border: green 1px dashed;
filter: alpha(opacity=65);
opacity: 0.6;
-moz-opacity: 0.6;
}
* html #nc_wrapper_whatsnew {
padding: 0 0 15px 0;
border: purple 1px dotted;
width: 661px;
height: 229px;
overflow: visible;
}

Comments

#1

Status:active» closed (won't fix)

As you can see on popsci.com, it works in IE6, so the problem you are having must be something custom you have done.

#2

I went to your http://beta.menashalibrary.org with IE6, it works.

How did you solve your problem?

I have similar problem, I have 5 nodes, the last node is blank. All platform OK, except for IE6.

#3

Solved.

.jcarousel-item-horizontal {
margin:0px;
}

#4

Status:closed (won't fix)» active

I'm having the same troubles. Seems like the carousel is displayed as a frame with a width which is equal to the combined width of all my carousel images. i.e. i'm trying to display four 300px images, but its rendering a 1200px wide frame (with scrollbars!) in my carousel container.

Furthermore, no images are displayed!