View Full Version : XHMTL validated but won't work in FF, help!!

09-01-2009, 07:16 PM
For the purpose of highlighting my problem, this script is a 'cut to the bone' version, of one I use within a circular scrolling carousel that has additional animations added to it.

The problem, is that although the script validates as XHTML in JSLint, it will not run correctly under Firefox (currently using 3.5.2) and I guess only works in IE (currently using IE7) because, (as I understand it to be) IE tends to treat XHTML as HTML.

When this script is run as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> it runs in both FF and IE as intended, with five+ images placed horizontally with a space between each, with a horizontal scroll bar auto enabled.

However, under XHTML in FF, all the five images are place one on top of the other on the left-hand side of the scrollPanel.

Incidentally, the script has to be used on the same page as other scripts that require XHTML, so running it under HTML is not an option for me. It originally used document.write, which caused exactly the same problem, in addition to the fact it would not validate either. The images have to be loaded via an array. I think the problem may be related to the build_imgLeftPos_array() function, as that sets the image positioning.

I have spent many, many hours looking at many different scripts etc..., but have not been able to find a solution, to get this script to work under XHTML in FF.

I am hoping that one of the more experienced of you on this board might be able to help me out on this, please.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<title>Artists Image Scrolling Panel</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


* {padding:0; margin:0; border:0;}

#scrollPanel {

#scrollPanel .imgFrame {
border:2px solid yellow;

<script src="./includes/js/jquery/jquery-1.3.2.js"></script>

<script type="text/javascript">

var axData = [];
var imgWidth = 140;
var imgSpacer = 25;
var overallWidth = imgWidth + imgSpacer;

function buildDataArray( pic, picWidth){
this.aimg1 = pic;
this.width = picWidth;

myImg1 = 'test_img1.jpg';
myImg2 = 'test_img2.jpg';
myImg3 = 'test_img3.jpg';
myImg4 = 'test_img4.jpg';
myImg5 = 'test_img5.jpg';

axData[0] = new buildDataArray( myImg1, overallWidth);
axData[1] = new buildDataArray( myImg2, overallWidth);
axData[2] = new buildDataArray( myImg3, overallWidth);
axData[3] = new buildDataArray( myImg4, overallWidth);
axData[4] = new buildDataArray( myImg5, overallWidth);

var imgArray = axData;
var imgLeftPos=[imgArray.length]; // array to hold left positions for loaded images

// build the array to hold the left position of all loaded images
function build_imgLeftPos_array() {
var i,n,pos;

for (i=0;i<imgArray.length;i++){ // loop until the end of the array
pos=0; // set the left position of the first image
for (n=0;n<i;n++){ // loop to the cumulative (i)number of array images
pos=pos+imgArray[n].width; // calc the cumulative left position of each image
imgLeftPos[i] = pos; // save the cumulative position (total cumulative width), of each image
} // eof for()

function add_li(list_id, aImg) {
// builds an unordered list of images to be scrolled
var listID = document.getElementById(list_id);
var li = document.createElement("li");
li.innerHTML = aImg;

function load_list(list_div_id, list_array) {
// populate the List from an Array
var myList = list_div_id;
var html_txt="";
for (var ii = 0; ii < list_array.length; ii++) {

html_txt = '<a href="#"><img id="'+ "img" + ii + '" class="imgFrame" style="left:' + imgLeftPos[ii] + ';" src="' + list_array[ii].aimg1 + '" width="140" height="200" ><\/a>';

add_li(myList, html_txt);

$(document).ready(function() {

load_list('list_artists', axData);

}); // eof ready(function)


<div id='scrollPanel' >
<ul id="list_artists"></ul>